微信小程序开发手册

官方文档非常详细，这里就不复制了，只记录一些自己用到的。

框架文档

配置

全局配置 app.json

页面单独配置 页面名.json

{
  "navigationBarBackgroundColor": "#ffffff",	// 导航栏背景颜色
  "navigationBarTextStyle": "black",	// 导航栏标题颜色
  "navigationBarTitleText": "导航栏标题文字内容",
  "backgroundColor": "#eeeeee",	// 窗口的背景色
  "backgroundTextStyle": "light"	// 下拉 loading 的样式
}

框架结构

• 可以将一些全局变量放在 app.js 中，这样全局都是能获取到的

页面跳转

• wx.navigateTo(‘/pages/index/index?id=123’): 如果要传递参数，可以在query参数中添加，然后在目标页面的 onLoad(options) 中获取 options.id 即可。需要注意，这个方法不能跳转给 Tab ，相当于是把一个新页面压入栈中，返回的时候就返回到刚才的页面。

• wx.navigateBack()不能直接携带参数，但是可以直接在其他页面获取之前栈中页面的page对象，然后直接进行setData：

  let pages = getCurrentPages()
  let lastPage = pages[pages.length - 2];
  lastPage.setData({})
  wx.navigateBack({})
  

事件

• 事件传参数，例如bindtap事件，不能直接像js那样打个括号把参数传递进去，而应该这样子传递

  <view id="myId" data-field="自定义字段，不能大写" bindtap="bindtap"> Click me! </view>
  
  // 然后在Page里面这样定义和接收参数
  Page({
      bindtap: function (e) {
          console.log(e)
          console.log(e.target)	// target数据结构和currentTarget一样，不过它表示触发事件的源组件，而currentTarget表示事件绑定的当前组件
          console.log(e.currentTarget)
          console.log(e.currentTarget.id)	// id不用在dataset中获取
          console.log(e.currentTarget.dataset.field)
      }
  })
  

组件文档

• 目前所有的原生组件都有一些使用限制，比如 z-index 默认为最高，并且无法更改。如果要覆盖，得使用 cover-view 这个原生组件。

cover-view

用于覆盖原生组件： map/video/canvas/camera/live-player/live-pusher ，但是内部只支持嵌套 cover-view/cover-image/button

map

• 最好整个小程序只维护一个 map 组件，不然可能会崩溃，性能很重要

API文档

元数据

// 动态修改页面标题
wx.setNavigationBarTitle({
    title: '标题1',
}
                         
// 获取屏幕信息
wx.getSystemInfoSync().windowWidth	// 屏幕宽度

网络

wx.request({
  url: 'test.php',
  data: {'x': '', y: ''}
  header: { 'content-type': 'application/json'},
  success (res) { console.log(res.data)}
})

位置

wx.getLocation(OBJECT)	// 获取当前的地理位置、速度
wx.chooseLocation(OBJECT)	// 打开地图选择位置
wx.openLocation(OBJECT)	// 使用微信内置的地图查看某个位置

其他工具