微信小程序开发总结

微信小程序开发

1. data-*

data-* 属性是用于存储页面或应用程序的私有自定义数据，存储的数据能够被页面的JavaScript中使用,也是HTML5才有的新属性。

(1)在wxml文件中通过添加data-属性来传递我们需要的值

(2)在js文件中获取值

moodDetail: function (e) {

    var data = e.currentTarget.dataset;
    var id = data.id;
  }

2. 通过navigator传递参数

(1)在navigator的url中添加需要传递的值

• 在wxml文件中，通过控件
  

• 在js文件中，通过api:wx.navigateTo()
  

moodDetail: function (e) {

    var data = e.currentTarget.dataset;
    wx.navigateTo({
      url: '../moodDetail/moodDetail?id='+data.id
    })
  }

(2)在跳转的页面获取值

onLoad:function(options){
    // 生命周期函数--监听页面加载
    console.log("onLoad======");
    var id = options.id;
  }

3. 页面间实现通信

大家可能会遇到这样的需求：通过A页面进入到B页面，B页面操作成功后需要返回A页面并刷新A页面的数据，这就涉及到页面之间的通信。具体可以用以下方法实现：

(1)在A页面定义一个函数

refresh: function (isRefresh) {
    that.setData({
      isRefresh:isRefresh
    })
  }

(2)在B页面通过getCurrentPages()得到A页面的实例

success: function(){
    var pages = getCurrentPages();
    if(pages.length >1) {
      var prePage = pages[pages.length-2];
      prePage.refresh(true);
    }
}

得到A页面的实例然后调用这个函数，这里传入布尔值true.

(3)在A页面判断isRefresh的值从而实现刷新

分析小程序的页面生命周期我们可以得知B页面跳转到A页面调用的是onShow()方法，所以将刷新逻辑写在该方法中。

onShow:function(){
    // 生命周期函数--监听页面显示
    console.log("onShow======");
    
    if(that.data.isRefresh == true) {
      that.onReady();//这里onReady()方法中加载数据，所以直接调用onReady()
    }
    that.setData({
        isRefresh:false
      });
}

4. 在模拟器上可以实现但真机无法实现

(1)下拉刷新在真机上无效

在模拟器上试验多次可以正确的实现下拉刷新，但是真机上测试却是始终无法实现，真是一脸懵逼啊！对比app.json文件发现原来问题出在这里，我在开启下拉刷新配置时是这样写的：

{
    "enablePullDownRefresh": "true"
}

问题就在于上述代码中“true”是一个字符串类型，应该改成布尔值类型即true就可以得到解决。

{
    "enablePullDownRefresh": true
}