小程序调研

创建小程序

• 1、下载小程序调试工具
• 2、注册账号，得到appid
• 3、通过工具创建小程序

小程序demo介绍

• pages //存放页面的文件夹
  • index // index页面
  • logs // logs页面
• utils // 存放小的单元模块
• app.js
• app.json // 配置路由，window变量等，也可每个页面单独配置，但是只能配置window，且覆盖window

app.json配置：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE

• app.wxss // 存放样式
• project.config.json // wx相关配置

语法

Mustache语法

参考：https://www.jianshu.com/p/a4eee37b2849
跟vue中的语法类似，只用过react的童鞋可以理解为弱化版的jsx

关于app()

App({
  onLaunch: function(options) { // 相当于willmount
    // Do something initial when launch.
  },
  onShow: function(options) { // 相当于didmount
    // Do something when show.
  },
  onHide: function() { // 切入后台，不相当于unmount
    // Do something when hide.
  },
  onError: function(msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

onLaunch、onShow生命周期可以拿到场景值

• App() 必须在 app.js 中注册，且不能注册多个。
• 不要在定义于 App() 内的函数中调用 getApp() ，使用 this 就可以拿到 app 实例。
• 不要在 onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成。
• 通过 getApp() 获取实例之后，不要私自调用生命周期函数。

关于page()

//index.js
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 () {
    // return custom share data when user share.
  },
  onPageScroll: function() {
    // Do something when page scroll
  },
  onTabItemTap(item) {
    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: {
    hi: 'MINA'
  }
})

提供了数据存放、生命周期和一些侦听事件

关于模板

wx提供了模板的引用方法，也就是说模板是可以重复使用的，import的写法可以定义作用域

关于自定义组件

wx提供了自定义组件的方法，在子组件中component:ture,父组件中useComponent引入子组件
slot相当于children，用name加以区分