【业务方案】我对小程序的理解

Everglow_X
334 阅读4分钟

前言

  最近新入职的公司，我主要做的是小程序开发。虽然之前一直做的也都是小程序，但是属于野路子，没有一次系统的梳理小程序相关知识，也难免会遗漏一些东西，更加不容易融入新的开发技术。因此，记录一下对于小程序的理解，等待消化吸收成为自己的东西。

正文

  • 小程序这个「小」的概念是产品层次上的，相对于平时大众眼中的功能繁多，交互丰富的程序。

  • 小程序是由根目录下的app.js与pages文件夹下的各个页面js文件组成的程序，app.js生成的APP实例是单例对象，在其他页面脚本中可以使用宿主环境提供的getApp()获取APP实例。可以说这两类脚本文件是小程序的核心骨架，其他的脚本文件，如:mixin、plugin等文件均是为上面两类脚本文件服务的。另外pages文件夹下的各个js文件的作用域是相互独立，互不影响的，这也意味着可以在不同的页面js文件中声明同名变量。

  • app.js中，代码通过使用APP()构造器来生成一个程序实例，APP()构造器接受一个Object参数，参数说明如下，其中onLaunch/onShow/onHide三个回调是App实例的生命周期函数。

App({
  onLaunch: function(options) {},
  onShow: function(options) {},
  onHide: function(options) {},
  onError: function(options) {},
  globalData: "I am globaldata"
})

App构造器

  • 宿主环境提供了Page()构造器来注册一个小程序页面，Page()在页面构建脚本page.js中调用。Page构造器接受一个Object参数，其中data属性是当前页面在WXML模板中可以用来做数据绑定的初始数据。onLoad/onReady/onShow/onHide/onUnload 5个回调是Page实例的生命周期函数，onPullDownRefresh/onReachBottom/onShareAppMessage/onPageScroll 4个回调是页面的用户行为。
Page({
  data: {text: "This is a page"},
  onLoad: function(options) {},
  onShow: function() {},
  onReady: function() {},
  onHide: function() {},
  onUnload: function() {},
  onPullDownRefresh: function() {},
  onReachBottom: function() {},
  onShareAppMessage: function() {},
  onPageScroll: function() {}
})

Page构造器

  • 通信模型 小程序代码分为「渲染层」和「逻辑层」，不同于浏览器环境中单线程模型，小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端（下文中也会采用Native来代指微信客户端）做中转，逻辑层发送网络请求也经由Native转发，小程序的通信模型如图3-1所示。 小程序通信模型

  • 逻辑层通过this.setData()方法将数据更新到渲染层，由于小程序的渲染层和逻辑层分别在两个线程中运行，所以setData传递数据实际上是一个异步的过程，所以setData的第二个参数是一个callback回调，在这次setData对界面渲染完毕后触发。

  • setData其一般调用格式是 setData(data, callback)，其中data是由多个key:value构成的Object对象。实际在开发的时候，页面的data数据会涉及相当多的字段，你并不需要每次都将整个data字段重新设置一遍，你只需要把改变的值进行设置即可，宿主环境会自动把新改动的字段合并到渲染层对应的字段中。如下代码所示。data中的key还可以非常灵活，以数据路径的形式给出，例如 this.setData({"d[0]": 100}); this.setData({"d[1].text": 'Goodbye'})。

  • 我们只要保持一个原则就可以提高小程序的渲染性能：每次只设置需要改变的最小单位数据。

  • 微信小程序开发调试阶段不校验域名

    • 微信开发者工具中，点击「预览」生成的二维码，扫描打开进入的小程序开发版。可以 右上角-->打开调试，绕开校验域名。
    • 在微信开发者工具预览时，会受配置限制。 具体是在微信开发者工具中：项目配置，将「开发环境不校验请求域名以及 TLS 版本」勾
      上。
    • 上传到服务器，小程序后台设置为体验版的时候，微信服务器还是会校验域名，此时可 以继续右上角，选择打开调试。

参考文章

  1. [小程序开发指南(developers.weixin.qq.com/ebook?actio…)
  2. [微信开放文档(developers.weixin.qq.com/miniprogram…)
avatar
文章
阅读
粉丝