微信小程序开发指南v0.1

前期工作包括，注册微信公众号获取 appid 等相关权限，有微信开放平台账号。急需体验的相关破解已有。

主要结构说明

全局配置文件

配置文件包括 ：

• app.js脚本文件实现逻辑：小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API，如本例的同步存储及同步读取本地数据，获取用户数，支付接口。具体可查看微信官方 API 列表。
• app.json 配置文件：配置小程序是由哪些页面组成 pages，配置小程序的窗口表现
  window，配置底部导航 tab 表现tabBar，网络超时networdTimeout,是否开启调试模式debug。注意该文件不可添加任何注释。
• app.wxss样式文件

页面文件

每一个页面的【路径 + 页面名】都要配置在全局 app.json 的 pages 中，页面包含 .js, .json, .wxss,wxml 4 个文件，其中wxml是结构文件，相当于 html.

逻辑层

注意：JavaScript 的一些浏览器功能如 document 和 window 不能再框架内实现。

注册程序, 针对全局配置

App()
函数用来在app.js 中注册一个小程序，且只能注册一个。接受一个 object 参数，其指定小程序的生命周期函数等。

object参数说明：

|属性 |类型| 描述 |触发时机|
|--|
|onLaunch |Function |生命周期函数--监听小程序初始化 |当小程序初始化完成时，会触发 onLaunch（全局只触发一次）|
|onShow |Function |生命周期函数--监听小程序显示| 当小程序启动，或从后台进入前台显示，会触发 onShow|
|onHide| Function |生命周期函数--监听小程序隐藏| 当小程序从前台进入后台，会触发 onHide|
|自定义 |Any |开发者可以添加任意的函数或数据到 Object 参数中，用 this 可以访问

<b>前台、后台定义</b>： 当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并没有正在的销毁，而是进入了后台；当再次启动微信或再次打开小程序，又会从后台进入前台。

只有当小程序进入后台一定时间，或者系统资源占用过高，才会被真正的销毁。

• 不要在定义于 App() 内的函数中调用 getApp() ，使用 this 就可以拿到 app 实例。
• 不要在 onLaunch 的时候调用 getCurrentPage()，此时 page 还没有生成

示例代码：

App({
  onLaunch: function() { 
    // Do something initial when launch.
  },
  onShow: function() {
      // Do something when show.
  },
  onHide: function() {
      // Do something when hide.
  },
  globalData: 'I am global data'
})

App.prototype.getCurrentPage()
用于获取当前页面实例

getApp()
用于在页面脚本文件中获取小程序实例。在 getApp() 获取实例之后，不要私自调用生命周期函数

注册页面

page()
跟 App() 函数比较，用来在page_name.js 中注册一个页面。接受一个 object 参数，其指定页面的生命周期函数等。

| 属性| 类型 | 描述|
| --|
| data| Object | 页面的初始数据|
| onLoad | Function | 生命周期函数--监听页面加载
| onReady | Function | 生命周期函数--监听页面渲染完成
| onShow | Function| 生命周期函数--监听页面显示
| onHide| Function | 生命周期函数--监听页面隐藏
| onUnload | Function| 生命周期函数--监听页面卸载
| 其他| Any | 开发者可以添加任意的函数或数据到 OBJECT 参数中，用 this 可以访问

页面脚本中可以通过getApp() 实例化 app.

示例代码：

//index.js
var app = getApp()
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // Do some initialize when page load.
  },
  onReady: function() {
    // Do something when page ready.
  },
  onShow: function() {
    // Do something when page show.
  },
  onHide: function() {
    // Do something when page hide.
  },
  onUnload: function() {
    // Do something when page close.
  },
  // Event handler.
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    })
  }
})

data 将会以 JSON 的形式由逻辑层传至渲染层，所以其数据必须是可以转成 JSON 的格式：字符串，数字，布尔值，对象，数组。在 wxml 中通过 {{data}} 传值。

自定义视图函数

​ 除了初始化数据和生命周期函数，Page 中还可以定义一些特殊的函数：事件处理函数（实例代码中的 viewTap() 函数）。在渲染层可以在组件中加入事件绑定，当达到触发事件时，就会执行 Page 中定义的事件处理函数。在 Django 等框架里，是通过将 URL 和函数绑定， 在这个框架里，是在 HTML 中绑定。

<view bindtap="viewTap"> click me </view>

Page.prototype.setData()
setData 函数用于将数据从逻辑层发送到视图层，同时改变对应的 this.data 的值。一般出现在对应的视图函数中。

注意:

• 直接修改 this.data 无效，无法改变页面的状态，还会造成数据不一致。
• 单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。

setData() 参数格式
接受一个对象，以 key，value 的形式表示将 this.data 中的 key 对应的值改变成 value。其中 key 可以非常灵活，以数据路径的形式给出，如 array[2].message，a.b.c.d，并且不需要在 this.data 中预先定义。

示例代码：

//index.js
Page({
  data: {
    text: 'init data',
    array: [{text: 'init data'}],
    object: {
      text: 'init data'
    }
  },
  changeText: function() {
    // this.data.text = 'changed data'  // bad, it can not work
    this.setData({
      text: 'changed data'
    })
  },
  changeItemInArray: function() {
    // you can use this way to modify a danamic data path
    var changedData = {}
    var index = 0
    changedData['array[' + index + '].text'] = 'changed data'
    this.setData(changedData)
  },
  changeItemInObject: function(){
    this.setData({
      'object.text': 'changed data'
    });
  },
  addNewField: function() {
    this.setData({
      'newField.text': 'new data'
    })
  }
})

<!--index.wxml-->
<view>{{text}}</view>
<button bindtap="changeText"> Change normal data </button>
<view>{{array[0].text}}</view>
<button bindtap="changeItemInArray"> Change Array data </button>
<view>{{obj.text}}</view>
<button bindtap="changeItemInObject"> Change Object data </button>
<view>{{newField.text}}</view>
<button bindtap="addNewField"> Add new data </button>

页面路由
在小程序中所有页面的路由全部由框架进行管理，对于路由的触发方式以及页面生命周期函数如下：

|路由方式| 触发时机| 路由后页面 |路由前页面、
|--|
|初始化| 小程序打开的第一个页面| onLoad，onShow
|打开新页面 |调用 API wx.nativateTo 或使用组件 <natigator /> |onLoad，onShow |onHide|
|页面重定向| 调用 API wx.redirectTo 或使用组件 <natigator /> | onLoad，onShow |onUnload|
|页面返回 |调用APIwx.navigatBack或用户按左上角返回按钮| onShow |onUnload
|Tab切换 |多 Tab 模式下用户切换 Tab| 第一次打开 onLoad，onshow；否则 onShow |onHide

模块导入和代码共用

在一个模块中定义可以复用的函数代码，通过module.exports 暴露接口：

// common.js
function sayHello(name) {
  console.log('Hello ' + name + '!')
}
module.exports = {
  sayHello: sayHello
}

​在需要使用这些模块的文件中，使用 require(path) 将公共代码引入:

var common = require('common.js')
Page({
  helloMINA: function() {
    common.sayHello('MINA')
  }
})

API

丰富的微信原生API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。

说明：

• wx.on 开头的 API 是监听某个事件发生的API接口，接受一个 CALLBACK 函数作为参数。当该事件触发时，会调用 CALLBACK 函数。
• 如未特殊约定，其他API接口都接受一个OBJECT作为参数。
• OBJECT中可以指定success, fail, complete来接收接口调用结果。
  |参数名 |类型 |必填 |说明|
  |--|
  |success |Function |否 |接口调用成功的回调函数
  |fail |Function |否| 接口调用失败的回调函数
  |complete| Function |否 |接口调用结束的回调函数（调用成功、失败都会执行）
  功能包括：点击查看支持的 API 列表
• 网络服务上传，下载，websocket
• 媒体服务
  • 音乐控制
  • 录音控制
  • 图片预览，相册和拍照
  • 视频拍摄和调用
  • 文件保存
• 数据缓存
• 位置获取和查看
• 设备的网络状态，罗盘，重力感应，系统信息
• 界面导航条，绘画，动画交互效果
• 登录，用户信息，支付

视图层

由 wxml,wxss,组件构成

wxml

主要分成基础组件和事件触发，对应于 html 的标签组件和 JS 事件。

组件渲染内容

• 循环渲染（官方列表渲染）

• 条件渲染

• 模板

• 事件触发

  冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
  非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。
  WXML的冒泡事件列表：

  |类型 |触发条件|
  |--|
  |touchstart |手指触摸
  |touchmove| 手指触摸后移动
  |touchcancel |手指触摸动作被打断，如来电提醒，弹窗
  |touchend |手指触摸动作结束
  |tap |手指触摸后离开
  |longtap |手指触摸后，超过350ms再离开
  注：除上表之外的其他组件自定义事件都是非冒泡事件，如<form/>的 submit 事件，<input/>的 input 事件，<scroll-view/>的 scroll 事件，(详见各个组件)

• 引用 import和include,不能多级引用

组件名
组件主要针对手机端操作