小程序调研

创建小程序

  • 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加以区分

推荐阅读更多精彩内容

  • 什么是微信小程序 腾讯公司于2016年9月21日开始微信小程序内测,一时间小程序的讨论热度不断。网络上流传一张张小...
    centuryscr阅读 4,673评论 0 3
  • 因新工作主要负责微信小程序这一块,最近的重心就移到这一块,该博客是对微信小程序整体的整理归纳以及标明一些细节点,初...
    majun00阅读 6,364评论 0 9
  • title: 小程序教程之wepy 参考文档 中文文档:https://tencent.github.io/wep...
    采香行处蹙连钱阅读 11,406评论 8 24
  • ******************逻辑层****************** 1:app.json文件用来对微信...
    名字_都被占了阅读 841评论 0 2
  • 小程序 基本知识 项目文件 JSON 配置 小程序配置 app.json app.json 是对当前小程序的全局配...
    勇敢的_心_阅读 1,087评论 0 6
  • 毕业季就是成长中的一个过程。 毕业季就是因为几张试卷分开。 毕业季就是人生中的一个转折。 毕业季就是要学会面对分离...
    雨惜源阅读 1,034评论 0 0
  • “我想跟你说:你不要舍不得我,因为我也舍不得你” 阿风知道自己心里住着一个恶魔,每隔一段时间就会浮现出来。 秀走的...
    浪子峰阅读 142评论 1 0
  • #楠得一词#2017年第317天 独处 美国有个调查说,美国人均每天面对面互相交流的时间只有4分钟。其他的时间就是...
    楠得书写阅读 401评论 0 51