美文网首页
微信小程序

微信小程序

作者: 北风吹_yfy | 来源:发表于2020-01-03 09:22 被阅读0次

简介

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

申请账号

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

安装开发者工具

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

项目结构解析

目录结构.png

渲染层和逻辑层

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


通信模型图.png

逻辑层 App Service

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

  • 增加 AppPage 方法,进行程序注册页面注册
  • 增加 getAppgetCurrentPages 方法,分别用来获取 App 实例和当前页面栈。
  • 提供丰富的 API,如微信用户数据,扫一扫,支付等微信特有能力。
  • 提供模块化能力,每个页面有独立的作用域
    注意:小程序框架的逻辑层并非运行在浏览器中,因此 JavaScript 在 web 中一些能力都无法使用,如 windowdocument 等。

小程序APP

  • App(Object object)---注册小程序
    注意:App() 必须在 app.js 中调用,且只能调用一次。
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'
})
  • getApp(Object object)---获取到小程序全局唯一的 App 实例。
// other.js
var appInstance = getApp()
console.log(appInstance.globalData) // I am global data

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

页面

  • Page(Object object)---注册小程序中的一个页面。

...未完待续

相关文章

网友评论

      本文标题:微信小程序

      本文链接:https://www.haomeiwen.com/subject/uvinoctx.html