逻辑实现
1 使用动态数据展示列表(可以考虑使用wx:for属性配合动态数组渲染全部列表项,以减少WXML页面的代码量)
eg:
<view class='listGroup' wx:for='{{list}}' wx:for-item='group' wx:key='group{{index}}'>
<view class='listItem' wx:for='{{group}}' wx:for-item='row' wx:key='row{{index}}'>
<image class='icon' src='{{row.icon}}'></image>
<text>{{row.text}}</text>
<image src='/images/arrow.png'></image>
</view>
</view>
事件
1 bindinput 点击按钮时文本框失去焦点并触发自定义事件
<input bindinput='getNumber' type='number' placeholder='请输入 0~100的数字'></input>
bindtap 点击按钮时触发自定义的函数
<input bindtap='getNumber' type='number' placeholder='请输入 0~100的数字'></input>
3 bindChange 监听选项变化
<picker mode='region' bindChange=‘regionChange’>
<view>{{region}}</view>
</picker>
条件渲染
1 wx:if/wx:else
wx:if属性配合<block></block>代码块形成两种情况进行条件渲染。
eg: <block wx:if='{{isGameStart}}'>
<button type='primary'>提交</button>
</block>
<block wx:else>
<button type='primary'>重新开始</button>
</block>
页面间跳转
1 跳转到某一个页面: wx.navigateTo
eg: goGame(){
wx:navigateTo({
url:'../game/game'
})
}
返回首页: wx.navigateBack()
eg: wx.navigateBack()
交互
wx:request
eg: wx:request({
url:'https://xxxxxxxxxxxxxx',
data:{
location:this.data.region[1],
key:'xxxxxxxxx'
},
success:function(res){
this.setData({now:res.data.xxx})
}
})
常用API
建立本地存储：wx.setStorageSync
eg: wx.setStorageSync('myCard',e.detail.value);
2 获取本地存储：wx.getStorageSync
eg: wx.getStorageSync('myCard');
删除本地存储： wx.removeStorageSync
eg: wx.removeStorageSync('myCard');
查看位置：wx.openLocation({})
eg: wx.openLocation({
latitude:that.data.lat,
longitude:that.data.lon,
})
获取地理位置 wx.getLocation({}),,腾讯更新了小程序的许可权限,还需要在app.json文件中追加premission配置才能获取用户地理位置信息，如下：
eg: wx.getLocation({
altitude: true,
success:function(res){
that.setData({
lat: res.latitude.toFixed(2),
lon: res.longitude.toFixed(2),
alt: res.altitude.toFixed(2),
})
}
})