微信小程序基本知识

逻辑实现

 

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>

2 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'

　　　　})

　　}

2 返回首页:  wx.navigateBack()

 eg: wx.navigateBack()

交互

1 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

1 建立本地存储：wx.setStorageSync

 eg: wx.setStorageSync('myCard',e.detail.value);

2 获取本地存储：wx.getStorageSync

 eg: wx.getStorageSync('myCard');

3 删除本地存储： wx.removeStorageSync

  eg: wx.removeStorageSync('myCard');

4 查看位置：wx.openLocation({})

 eg:  wx.openLocation({

　　   latitude:that.data.lat,

　　   longitude:that.data.lon,

  })

5 获取地理位置 wx.getLocation({}),,腾讯更新了小程序的许可权限,还需要在app.json文件中追加premission配置才能获取用户地理位置信息，如下：

"permission":{

    "scope.userLocation":{

      "desc":"你的位置信息将用于小程序指南针的效果展示"

    }

  },

 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),

　　　　})

　　}

  })