微信小程序

2020-01-03  本文已影响0人  北风吹_yfy

简介

小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。

申请账号

申请账号.png
登录 小程序后台 ,我们可以在菜单 “设置”-“开发设置” 看到小程序的 AppID 了 。这个AppID是小程序的唯一标识,这里要区别于公众号的AppID。

安装开发者工具

前往 开发者工具下载页面 ,根据自己的操作系统下载对应的安装包进行安装。
打开开发者工具,新建项目选择小程序项目,选择代码存放的硬盘路径,填入刚刚申请到的小程序的 AppID和项目名称,点击确认后即可创建一个微信小程序。

项目结构解析

目录结构.png

渲染层和逻辑层

小程序的渲染层和逻辑层分别由2个线程管理:渲染层的界面使用了WebView 进行渲染;逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面,所以渲染层存在多个WebView线程,这两个线程的通信会经由微信客户端(下文中也会采用Native来代指微信客户端)做中转,逻辑层发送网络请求也经由Native转发,小程序的通信模型下图所示。


通信模型图.png

逻辑层 App Service

JavaScript 的基础上,我们增加了一些功能,以方便小程序的开发:

小程序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) {
    wx.redirectTo({
      url: 'pages/...'
    }) // 如果是 tabbar 页面,请使用 wx.switchTab
  },
  // 全局数据
  globalData: 'I am global data'
})
// other.js
var appInstance = getApp()
console.log(appInstance.globalData) // I am global data

注意:
不要在定义于 App() 内的函数中,或调用 App 前调用 getApp() ,使用 this 就可以拿到 app 实例。
通过 getApp() 获取实例之后,不要私自调用生命周期函数。

页面

...未完待续

上一篇下一篇

猜你喜欢

热点阅读