一、微信小程序中的单位rpx
注：开发微信小程序时设计师可以用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>
2、js
// pages/detail/detail.js
var app = getApp()
Page({
data: {
currentTab: 0
},
onLoad: function (options) {
// 页面初始化 options为页面跳转所带来的参数
},
//滑动切换
swiperTab: function (e) {
var that = this;
that.setData({
currentTab: e.detail.current
});
},
//点击切换
clickTab: function (e) {
var that = this;
if (this.data.currentTab === e.target.dataset.current) {
return false;
} else {
that.setData({
currentTab: e.target.dataset.current
})
}
}
})
