微信小程序开发指南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参数说明：

前台、后台定义：当用户点击左上角关闭，或者按了设备 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 参数，其指定页面的生命周期函数等。

页面脚本中可以通过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 中绑定。

 click me

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'
    })
  }
})


{{text}}

{{array[0].text}}

{{obj.text}}

{{newField.text}}

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

模块导入和代码共用

在一个模块中定义可以复用的函数代码，通过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再离开
注：除上表之外的其他组件自定义事件都是非冒泡事件，如
的 submit 事件，的 input 事件，的 scroll 事件，(详见各个组件)
引用 import和include,不能多级引用

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

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

主要结构说明

全局配置文件

页面文件

逻辑层

注册程序, 针对全局配置

注册页面

模块导入和代码共用

API

视图层

wxml

你可能感兴趣的:(微信小程序开发指南v0.1)