微信小程序-个人总结

小程序的运行环境分成渲染层和逻辑层，其中 WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。这样在小程序中不能使用一些前端的框架，如jQuery、Zepto等。而网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行DOM选中和操作。

全局配置

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

• 常用的配置项

• 部分常用配置选项

{
  "pages": [ // 第一项为默认首页
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarBackgroundColor": "#ffffff", //导航栏背景颜色
    "navigationBarTextStyle": "black",//导航栏标题颜色
    "navigationBarTitleText": "微信", //导航栏标题文字内容
    "backgroundColor": "#eeeeee", //窗口的背景色
    "backgroundTextStyle": "light" //下拉 loading 的样式，仅支持 dark / light
  },
  "tabBar": {
    "color": "#666",//未选中的的文字颜色
    "selectedColor": "#ff8928",//选中的的文字颜色
    "list": [{
        "pagePath": "pages/index/index", //页面路径
        "text": "首页",//tab 上按钮文字
        "iconPath": "images/tabBar_img2.png", //未选中的图片路径
        "selectedIconPath": "images/tabBar_img1.png"//选中时的图片路径
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000, //wx.request 的超时时间
    "downloadFile": 10000 //wx.downloadFile 的超时时间
  },
  "debug": true,
  "navigateToMiniProgramAppIdList": [ //允许跳转到其他小程序的appId
    "wxe5f52902cf4de896"
  ]
}
复制代码

页面配置

每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}
复制代码

sitemap 配置

小程序根目录下的 sitemap.json 文件用来配置小程序及其页面是否允许被微信索引。

注册小程序

整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 示例，获取App上的数据或调用开发者注册在 App 上的函数。

App({
  onLaunch (options) { //生命周期回调——监听小程序初始化
    // Do something initial when launch.
  },
  onShow (options) { //生命周期回调——监听小程序启动或切前台
    // Do something when show.
  },
  onHide () { //生命周期回调——监听小程序切后台
    // Do something when hide.
  },
  onError (msg) { //错误监听函数
    console.log(msg)
  },
  onPageNotFound(res){ //页面不存在监听函数
     // Do something when page not found. 
  },
  globalData: 'I am global data'
})
复制代码

其他页面引用:

const appInstance = getApp()
console.log(appInstance.globalData) // I am global data
复制代码

页面生命周期

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.
  },
  onPullDownRefresh: function() { //监听用户下拉动作
    // Do something when pull down.
  },
  onReachBottom: function() { //页面上拉触底事件的处理函数
    // Do something when page reach bottom.
  },
  onShareAppMessage: function (res) { //用户点击右上角转发
    if (res.from === 'button') {
        // 来自页面内转发按钮
     console.log(res.target)
    }
    return {
        title: '自定义转发标题',
        path: '/page/user?id=123'
    }
  },
  onPageScroll: function() { // 页面滚动触发事件的处理函数
    // Do something when page scroll
  },
  onResize: function() { //页面尺寸改变时触发，详见 响应显示区域变化
    // Do something when page resize
  },
  onTabItemTap(item) {  //点击 tab 时触发
    console.log(item.index); //被点击tabItem的序号，从0开始
    console.log(item.pagePath); //被点击tabItem的页面路径
    console.log(item.text); //被点击tabItem的按钮文字
  }
})
复制代码

页面路由

框架以栈的形式维护了当前的所有页面

打开新页面

调用 API wx.navigateTo 
使用组件 <navigator url="/page/index/index" open-type="navigateTo"/>
复制代码

页面重定向

调用 API wx.redirectTo 
使用组件 <navigator url="/page/index/index" open-type="redirectTo"/>
复制代码

页面返回

调用 API wx.navigateBack 
使用组件<navigator url="/page/index/index" open-type="navigateBack">
用户按左上角返回按钮
复制代码

Tab 切换

调用 API wx.switchTab 
使用组件 <navigator open-type="switchTab"/> 
用户切换 Tab
复制代码

重启动

调用 API wx.reLaunch 
使用组件 <navigator open-type="reLaunch"/>
复制代码

模块化

可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。

// common.js
function sayHello(name) {
  console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
  console.log(`Goodbye ${name} !`)
}

module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye

//引入并调用
var common = require('common.js')
Page({
  helloMINA: function() {
    common.sayHello('MINA')
  },
  goodbyeMINA: function() {
    common.sayGoodbye('MINA')
  }
})
复制代码