js-小程序入門-存儲彈框定時器(四)

一 存儲 storage

每個微信小程序都可以有自己的本地緩存，可以通過
wx.setStorage/wx.setStorageSync、
wx.getStorage/wx.getStorageSync、
wx.clearStorage/wx.clearStorageSync，
wx.removeStorage/wx.removeStorageSync
對本地緩存進行讀寫和清理。

  onLoad: function(options) {
      //獲取傳入的值
      //console.log(options);
		this.setData({
			newsId: options.newsId,
		})

		var newsCollect = wx.getStorageSync('newsCollect');
		console.log("第一次進入時判斷是否存在本地存儲");
		console.log(newCollect);
		// 如果newsCollect存在,則代表以前收藏過或者是以前取消過收藏
		if (newsCollect) {
			var newCollect = newsCollect[options.newsId];
			console.log("如果newsCollect存在,則代表以前收藏過或者是以前取消過收藏");
			console.log(newCollect);
			//注意這裏
			// if (!newCollect){
			// 	// 更新ui
			// 	this.setData({
			// 		collected: false
			// 	})
			// }else{
				// 更新ui
				this.setData({
					collected: newCollect
				})
		//	}
			
		} else {
			// 第一次進入，根本不存在數據
			var newsCollect = [];
			// 我把當前唯一id扔到newsCollect對象中，然後默認指定false
			newsCollect[options.newsId] = false;
			// 扔到本地存儲中
			wx.setStorageSync('newsCollect', newsCollect);
			
		}

  },

	collectTap(event) {
		var newsCollect = wx.getStorageSync('newsCollect');
		console.log("獲取所有值");
		console.log(newCollect);
		// 獲取單個狀態
		var newCollect = newsCollect[this.data.newsId];
		console.log("值:" + newCollect);
		// 點擊時收藏則爲不收藏，不收藏則爲收藏
		newCollect = !newCollect;

		// 更新到本地存儲中
		newsCollect[this.data.newsId] = newCollect;
		wx.setStorageSync('newsCollect', newsCollect);

		// 改變視圖
		this.setData({
			collected: newsCollect[this.data.newsId]
		});
	},

二 彈框 Toast

1 wx.showToast() 消息提示框
可以自定義image
也可以通過wx.hideToast(Object object)隱藏消息提示框

	//icon: 'success', 'loading', 'none'
    wx.showToast({
			title:  "收藏成功！",
			icon: 'success',
			image: ‘../../images/star.png’,
			duration: 800,
			mask: true
		});

2 wx.showModal(）模態對話框

 wx.showModal({
      title: '提示',
      content: '這是一個模態彈窗',
      success(res) {
        if (res.confirm) {
          console.log('用戶點擊確定')
        } else if (res.cancel) {
          console.log('用戶點擊取消')
        }
      }
    })

3 wx.showActionSheet(）菜單

   wx.showActionSheet({
			itemList: ['A', 'B', 'C'],
			success(res) {
				console.log(res.tapIndex)
			},
			fail(res) {
				console.log(res.errMsg)
			}
		})

4 wx.showLoading(Object object) loading 提示框
需主動調用 wx.hideLoading 才能關閉提示框

 wx.showLoading({
      title: '加載中',
    })

    setTimeout(function() {
      wx.hideLoading()
    }, 2000)

三 定時器

<text>倒計時 ： {{countDownNum}}</text>
<button bindtap="start" type="primary">開始 倒計時</button>

<button style="margin-top:10px;" bindtap="clearInterval"  type="primary">取消 倒計時</button>

data: {
    timer: '', //定時器名字
    countDownNum: '10' //倒計時初始值
  },
  countDown: function() {
    let that = this;
    let countDownNum = that.data.countDownNum; //獲取倒計時初始值
    //如果將定時器設置在外面，那麼用戶就看不到countDownNum的數值動態變化，所以要把定時器存進data裏面
    that.setData({
      timer: setInterval(function() { //這裏把setInterval賦值給變量名爲timer的變量
        //每隔一秒countDownNum就減一，實現同步
        countDownNum--;
        //然後把countDownNum存進data，好讓用戶知道時間在倒計着
        that.setData({
          countDownNum: countDownNum
        })
        //在倒計時還未到0時，這中間可以做其他的事情，按項目需求來
        if (countDownNum == 0) {
          //這裏特別要注意，計時器是始終一直在走的，如果你的時間爲0，那麼就要關掉定時器！不然相當耗性能
          //因爲timer是存在data裏面的，所以在關掉時，也要在data裏取出後再關閉
          clearInterval(that.data.timer);
          //關閉定時器之後，可作其他處理
        }
        that.data.countDownNum = 11;
      }, 1000)
    });
  },
   start: function (e) {
		clearInterval(this.data.timer);
		this.data.countDownNum = 11;
		this.countDown();
	},
	clearInterval(e){
		clearInterval(this.data.timer);
		this.data.countDownNum = 11;
		this.setData({
			countDownNum: this.data.countDownNum
		})
	}

四 getUserInfo

五 camera

六 撥打電話

   /**
   * 撥打電話 - 可簡單封裝工具集
   */
	callPhone(phoneNumber) {
		wx.makePhoneCall({
			phoneNumber: phoneNumber,
			success: function () {
				console.log("撥打電話成功！")
			},
			fail: function () {
				console.log("撥打電話失敗！")
			}
		})
	}