小程序总结 | 2018-03-21

[amenzai]

APP()

App({
  onLaunch: function(options) {
    // 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
  },
  onShow: function(options) {
      // 当小程序启动，或从后台进入前台显示，会触发 onShow
  },
  onHide: function() {
      // 当小程序从前台进入后台，会触发 onHide
  },
  onError: function(msg) {
    // 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
    console.log(msg)
  },
  globalData: 'I am global data' // 可以添加任意的函数或数据到 Object 参数中，用 this 可以访问
})

getApp()

// other.js
var appInstance = getApp()
console.log(appInstance.globalData) // I am global data

Page()

//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // 监听页面加载
  },
  onReady: function() {
    // 监听页面初次渲染完成
  },
  onShow: function() {
    // 监听页面显示
  },
  onHide: function() {
    // 监听页面隐藏
   // 当navigateTo或底部tab切换时调用。
  },
  onUnload: function() {
    // 监听页面卸载
   // 当redirectTo或navigateBack的时候调用。
  },
  onPullDownRefresh: function() {
    // 监听用户下拉动作
  },
  onReachBottom: function() {
    // 页面上拉触底事件的处理函数
  },
  onShareAppMessage: function () {
   // 用户点击右上角转发
   return {
      title: '自定义转发标题',
      path: '/page/user?id=123'
    }
  },
  onPageScroll: function() {
    // 页面滚动触发事件的处理函数
  },
  onTabItemTap(item) {
  // 当前是 tab 页时，点击 tab 时触发
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // Event handler.
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  customData: { // 可以添加任意的函数或数据到 object 参数中，在页面的函数中用 this 可以访问
    hi: 'MINA'
  }
})

• Page.prototype.route
  • route 字段可以获取到当前页面的路径
• Page.prototype.setData()

路由

参考链接

模块化

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

不支持直接引入 node_modules，需要使用到 node_modules 时候建议拷贝出相关的代码到小程序的目录中。

WXML

<!--wxml-->
// 列表循环
<view wx:for="{{array}}"> {{item}} </view>

// 条件渲染
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>

// 事件绑定
<view bindtap="add"> {{count}} </view>

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5],
    view: 'MINA',
    count: 1
  },
  add: function(e) {
    this.setData({
      count: this.data.count + 1
    })
  }
})