微信小程序

文档

开发指南

代码构成

  • .json后缀的JSON配置文件
  • .wxml后缀的WXML模板文件，参考
  • .wxss后缀的WXSS样式文件，参考
  • .js后缀的JS脚本逻辑文件
  • .wxs后缀的WeiXin Script脚本语言，不能跟JS、微信API等交互，但是性能优于JS（一些纯前端的逻辑，如：format处理等可以使用wxs处理），参考、详细文档

json配置

注意：JSON文件中无法使用注释，试图添加注释将会引发报错

全局配置 页面配置

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部tab等


{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/index",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

project.config.json 是开发者工具相关配置

wxml模板

跟vue的模板类似，具体参考：wxml模板

wxss样式

wxss具有css大部分的特性，小程序在wxss也做了一些扩充和修改，具体参考：wxss样式

跟app.json类似，可以写一个app.wxss作为全局样式

wxss在底层支持新的尺寸单位rpx来兼容不同尺寸的设备，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差

js逻辑

跟vue的写法类似，可以调用微信封装的一些API，具体参考：事件 API

小程序宿主环境

小程序的运行环境分成渲染层和逻辑层，其中WXML模板和WXSS样式工作在渲染层，JS脚本工作在逻辑层

小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView进行渲染；逻辑层采用JsCore线程运行JS脚本

一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端（Native）做中转，逻辑层发送网络请求也经由Native转发，如下图：

微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地，app.json的pages字段的第一个页面就是这个小程序的首页

小程序启动之后，在app.js定义的App实例的onLaunch回调会被执行，整个小程序只有一个App实例，是全部页面共享的

注册小程序


// app.js
App({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

获取全局实例


// xxx.js
const appInstance = getApp()
console.log(appInstance.globalData) // I am global data

注册页面


//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // 页面创建时执行
  },
  onShow: function() {
    // 页面出现在前台时执行
  },
  onReady: function() {
    // 页面首次渲染完毕时执行
  },
  onHide: function() {
    // 页面从前台变为后台时执行
  },
  onUnload: function() {
    // 页面销毁时执行
  },
  onPullDownRefresh: function() {
    // 触发下拉刷新时执行
  },
  onReachBottom: function() {
    // 页面触底时执行
  },
  onShareAppMessage: function () {
    // 页面被用户分享时执行
  },
  onPageScroll: function() {
    // 页面滚动时执行
  },
  onResize: function() {
    // 页面尺寸变化时执行
  },
  onTabItemTap(item) {
    // tab 点击时执行
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // 事件响应函数
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  // 自由数据
  customData: {
    hi: 'MINA'
  }
})

页面生命周期

![](http://img.fengfengphp.com/wechat2.png)

Hello World


<!-- This is our View -->
<view> Hello {{name}}! </view>
<button bindtap="changeName"> Click me! </button>


// This is our App Service.
// This is our data.
var helloData = {
  name: 'Weixin'
}

// Register a Page.
Page({
  data: helloData,
  changeName: function(e) {
    // sent data change to view
    this.setData({
      name: 'MINA'
    })
  }
})

Component构造器

Page构造器适用于简单的页面。但对于复杂的页面，更建议使用Component构造器，参考

类似于自定义组件

详情


Component({
  data: {
    text: "This is page data."
  },
  methods: {
    onLoad: function(options) {
      // 页面创建时执行
    },
    onPullDownRefresh: function() {
      // 下拉刷新时执行
    },
    // 事件响应函数
    viewTap: function() {
      // ...
    }
  }
})

路由相关

参考

模块化

可以将一些公共的代码抽离成为一个单独的js文件，作为一个模块

参考

微信API

参考

详情

其他

事件相关

事件

内置组件可以使用wxs来处理事件（前提是纯前端逻辑，可以提升性能）

网络

参考

api.weixin.qq.com不能用wx.request请求，需要在服务器请求

app.json可配置超时时间，默认是60s


"networkTimeout": {
  "request": 10000,
  "downloadFile": 10000
}

只要成功接收到服务器返回，无论statusCode是多少，都会进入success回调。请开发者根据业务逻辑对返回值进行判断

sitemap配置

可以理解成小程序SEO，参考：sitemap配置

场景值

场景值用来描述用户进入小程序的路径。完整场景值的含义请查看场景值列表，参考 详细配置

results matching ""

    No results matching ""