总结微信小程序中的一些知识

注：开发微信小程序时设计师可以用iPhone6作为设计稿的标准。

建议：设计稿使用设备宽度750px，比较容易计算，750px的设计稿，1rpx=1px，这样的话，设计稿上量出来的尺寸是多少px就是多少rpx，至于在不同的设备上实际上要换算成多少个rem就交给小程序自己换算了。

二、微信小程序页面跳转的几种方法

1、wx.navigateTo(object)

保留当前页面，跳转到应用内的某个页面。

 wx.navigateTo({   url: '/pages/budget/budget?id=' + id, })

注：小程序中左上角有一个返回箭头，可返回上一个页面，也可以通过方法 wx.navigateBack 返回原页面

2、wx.redirectTo(object)

关闭当前页面，跳转到应用内的某个页面。

wx.redirectTo({   url: '/pages/budget/budget?id=' + id, })

注：小程序左上角没有返回箭头，不能返回上一个页面

3、wx.switchTab(object)

跳转到 tabBar 页面，并关闭其他非 tabBar 页面

{  "tabBar": {    "list": [{      "pagePath": "index",      "text": "首页"    },{      "pagePath": "other",      "text": "其他"    }]  }}wx.switchTab({  url: '/index'})

注：wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabBar 页面，只能用 wx.switchTab 跳转到 tabBar 页面

4、wx.reLaunch(object)

关闭所有页面，打开到应用内的某个页面。

wx.reLaunch({  url: 'test?id=1'})

注：跟wx.redirectTo一样左上角不会出现返回箭头，但两者却不完全相同

区别：

（1）在wx.navigateTo中，每跳转一个新的页面，其原始页面就会被加入堆栈，通过调用wx.navigateBack(object),可通过获取堆栈中保存的页面，返回上一级或多级页面；

（2）wx.redirectTo方法则不会被加入堆栈，但仍可通过wx.navigateBack(object)方法返回之前堆栈中的页面

（3）wx.reLaunch方法则会清空当前的堆栈。

三、小程序实现多button单选/多选

1、wxml

样式选中改变是通过三元运算符实现的

<!--pages/button-select/button-select.wxml--><view class='button_container'>  <block wx:for="{{buttons}}" wx:key="buttons">  <button class='{{item.checked?"checked_button":"normal_button"}}' data-id='{{item.id}}' bindtap='radioButtonTap'>{{item.name}}</button>  </block></view>

2、在Page({…})中填充数据

data: {    buttons: [{ id: 1, name: '银色' }, { id: 2, name: '白色' }, { id: 3, name: '黑色' }],  },

3、默认第一个按钮被选中

onLoad: function (options) {    this.data.buttons[0].checked = true;    this.setData({      buttons: this.data.buttons,    })  },

4、在Page({…})中添加事件监听方法(单选)

/** * 事件监听,实现单选效果 * e是获取e.currentTarget.dataset.id所以是必备的，跟前端的data-id获取的方式差不多 */radioButtonTap: function (e) {    console.log(e)    let id = e.currentTarget.dataset.id    console.log(id)    for (let i = 0; i < this.data.buttons.length; i++) {      if (this.data.buttons[i].id == id) {        //当前点击的位置为true即选中        this.data.buttons[i].checked = true;      }      else {        //其他的位置为false        this.data.buttons[i].checked = false;      }    }    this.setData({      buttons: this.data.buttons,    })  },

5、在Page({…})中添加事件监听方法(多选)

注：记得在wxml中修改绑定方法bindtap='radioButtonTap'

checkButtonTap:function(e){    console.log(e)    let id = e.currentTarget.dataset.id    console.log(id)    for (let i = 0; i < this.data.buttons.length; i++) {      if (this.data.buttons[i].id == id) {        if (this.data.buttons[i].checked == true) {          this.data.buttons[i].checked = false;        } else {          this.data.buttons[i].checked = true;        }      }    }   this.setData({     buttons: this.data.buttons,    })  }

四、微信小程序显示与隐藏hidden

1、wxml

<view bindtap='clickMe'>点击</view>//这是显示隐藏的部分<view hidden="{{hiddenName}}">隐藏显示部分</view>

2、js

page({    data:{        hiddenName:true  //默认隐藏    },    clickMe:function(e){        this.setData({            hiddenName:（!this.data.hiddenName）        })    }})

五、微信小程序实现tab选项卡

1、wxml

<!--pages/detail/detail.wxml--><view class="swiper-tab">    <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">全部</view>    <view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">提现中</view>    <view class="swiper-tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">已提现</view></view><swiper current="{{currentTab}}" duration="300"  bindchange="swiperTab">    <swiper-item ><view>全部</view></swiper-item>    <swiper-item><view>提现中</view></swiper-item>    <swiper-item><view>已提现</view></swiper-item></swiper>