2、小程序结构中的JSON语法

小程序中JSON配置的一些注意事项

JSON 文件都包裹在大括号 {} 中，以键值的形式表达数据。 JSON 的 key 必须用双引号括起来。实践中，在写JSON时，忘记给Key值加双引号或者把双引号写成单引号是一个常见的错误。

JSON 的值只能是以下数据格式，任何其他格式都会引发错误，例如 JavaScript 中的 undefined。

3、小程序的运行时渲染层和逻辑层

小程序的运行环境分为渲染层和逻辑层，其中WXML模板和WXSS样式工作在渲染层，JS Scripts工作在逻辑层。

小程序的渲染层和逻辑层由两个线程管理：渲染层的界面使用WebView进行渲染，逻辑层使用JsCore线程运行JS脚本。一个小程序有多个接口，所以渲染层有多个WebView线程。这两个线程之间的通信会通过微信客户端进行中继，逻辑层发出的网络请求也会通过微信客户端进行转发。

逻辑层应用服务

小程序开发框架逻辑层使用JavaScript引擎，为小程序提供开发者的JavaScript代码运行环境和微信小程序独有的功能。

逻辑层处理数据并发送给视图层，并接受视图层的事件反馈。

开发者编写的所有代码最终都会打包成一个JavaScript文件，在小程序启动时运行，直到小程序被销毁。这种行为类似于ServiceWorker，所以逻辑层也叫App Service

4、小程序运行机制

前台/后台状态，小程序启动后，界面显示给用户，此时小程序处于前台状态，

当用户点击右上角胶囊按钮关闭小程序，或者按下设备home键离开微信时，小程序并没有完全停止运行，而是进入后台小程序也可以短时间运行的时间。当用户再次进入微信或再次打开小程序时，小程序会再次从后台进入前台。但是，如果用户长时间不进入小程序小程序开发设计，或者系统资源紧张，则可能会导致小程序被破坏，即小程序的运行完全终止。

小程序启动可以分为两种情况：一种是冷启动，一种是热启动。

销毁小程序的时机：

通常小程序只有在进入后台一段时间后才会被销毁，或者系统资源使用率过高。具体包括以下几种情况：

退出状态

每当小程序可能被销毁时，都会调用页面回调函数 onSaveExitState。如果想保持页面的状态，可以在这个回调函数中“保存”一些数据，下次启动时可以通过exitState获取保存的数据。

5、小程序开发

在JavaScript的基础上，我们增加了一些功能，方便小程序的开发：

注意：小程序框架的逻辑层并不运行在浏览器中，因此无法使用JavaScript在web中的一些能力，比如window、document等。

app.js

在打开小程序之前，微信客户端会将整个小程序的代码包下载到本地。然后通过app.json的pages字段就可以知道你当前小程序的所有页面路径。

app.json的pages字段中写的第一页就是这个小程序的第一页

微信客户端加载第一页的代码，程序底部的一些机制可以渲染这个页面。

小程序启动后，会执行app.js中定义的App实例的onLaunch回调。整个小程序只有一个App实例 小程序开发设计 小程序制作开发 ，即所有页面。

var api = require('./utils/request.js').default
App({
  onLaunch: function () {},
  onShow() {},
  onHide() {},
  onError(msg) {console.log(msg)},
  globalData: 'I am global data'
})

您可以使用getApp方法获取全局唯一的App示例，获取App上的数据，或者调用开发者在App上注册的函数。

const appInstance = getApp()
this.setData({
  globalData: appInstance.globalData
})

  {{globalData}}  // I am global data

页面

小程序包含不同类型的文件：

在js文件中，Page是一个页面构造函数，它生成一个页面。当页面生成时，applet框架会将数据数据连同index.wxml一起渲染成最终的结构，这样就得到了你看到的applet的样子。

界面渲染完成后，页面实例会收到一个onLoad回调，可以在其中处理相应的逻辑。

Page({
    data: {
      text: "This is page data."
    },
    onLoad: function(options) {
      // ⻚面创建时执行
    },
    onShow: function() {
      // ⻚面出现在前台时执行
    },
    onReady: function() { 
      // ⻚面首次渲染完毕时执行
    },
    onHide: function() {
      // ⻚面从前台变为后台时执行
    },
    onUnload: function() { 
      // ⻚面销毁时执行
    },
    onPullDownRefresh: function() { 
      // 触发下拉刷新时执行
    },
    onReachBottom: function() {
      // ⻚面触底时执行
    },
    onShareAppMessage: function () { 
      // ⻚面被用户分享时执行
    },
    onPageScroll: function() {
      // ⻚面滚动时执行
    },
    onResize: function() {
      // ⻚面尺寸变化时执行
    },
    onTabItemTap(item) {
      // tab 点击时执行 
      console.log(item.index) 
      console.log(item.pagePath) 
      console.log(item.text)
    },
    // 事件响应函数
    viewTap: function() { 
      this.setData({
        text: 'Set some data for updating view.'
      }, function() {
        // this is setData callback
      })
    },
    // 自由数据 
    customData: { 
      hi: 'MINA'
    }
})

框架的核心是一个响应式数据绑定系统，可以轻松保持数据和视图同步。数据修改时

，只需要在逻辑层修改数据小程序开发设计，视图层就会相应更新。

  Hello {{name}}

click me!
data: {
  name: 'xiaowang'
},
changeName: function (e) {
  this.setData({
    name: 'Jerry'
  })
},

组件

小程序提供了丰富的基础组件，开发者可以像搭积木一样组合各种组件自己的小程序

程序。

和HTML的div、p等标签一样，在小程序中，只需要在WXML中写下对应的组件标签名，就可以在界面上显示组件。比如你需要在界面上显示一张地图，你只需要写：

在使用组件的时候小程序开发设计，也可以通过属性给组件传值，这样组件就可以用 来显示不同的状态，比如我们希望地图中心的经纬度为广州一开始，那么需要声明地图的经度（中心经度）和纬度（中心纬度）两个属性：

API

为了方便开发者调用微信提供的能力，如获取用户信息、微信支付等，小程序提供了很多API供开发者使用。需要注意的是，大部分API回调都是异步的，代码逻辑的异步问题需要处理好。例如

自定义组件

开发者可以将页面中的功能模块抽象成自定义组件，这样可以在不同的页面中复用，复杂的页面也可以拆分成多个低耦合模块，有利于代码维护.

自定义组件的使用与基础组件非常相似。开发自定义组件，类似于页面，一个自定义组件由4个文件组成：json、wxml、wxss、js：

// json文件
{
  "component": true  // 设置为 自定义组件
}

在自定义组件js文件中，需要使用Component()来注册组件，并提供组件的属性定义、内部数据和自定义方法。组件的属性值和内部数据将用于组件wxml的渲染，其中属性值可以从组件外部传入。

Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 这里是一些组件内部的数据
    someData: {
    },
    methods: {
      // 这里是一个自定义方法
      customMethod: function () {}
    },
  }
})

使用自定义组件

在使用注册的自定义组件之前，必须先参考页面声明的json文件。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径：

// 使用足定义组件的页面的 json 文件
{
  "usingComponents": {
    "component-tag-name": "../../components/HelloWorld/index"
  }
}
// 使用足定义组件的页面的 wxml 文件

6、常见的setData操作错误1.经常去setData

频繁（毫秒）去setData会导致：

在Android下，用户在滑动时会有卡顿的感觉，操作反馈延迟严重。由于JS线程一直在编译执行渲染，用户操作事件无法及时传递给逻辑层，逻辑层也无法及时将操作处理结果传递给视图层。渲染有延迟，因为WebView的JS线程一直忙。状态，从逻辑层到页面层的通信时间增加，视图层收到的数据报文已经发送了几百毫秒，渲染结果不是实时的

每次setData都会传入大量新数据

从setData的底层实现可以看出，我们的数据传输其实是一个evaluateJavascript脚本过程。当数据量过大时，脚本的编译和执行时间会增加，占用WebView JS线程，

后台页面设置数据

当页面进入后台状态（用户不可见）时，不应该继续setData，后台页面的渲染对用户是不可见的，后台状态页面上去setData也会抢占前台页面的执行。

7、分包

在某些情况下，开发者需要将小程序分成不同的子包，在构建时将它们打包到不同的子包中。按需加载。

构建小程序子包项目时，构建会输出一个或多个子包。每个子包小程序必须包含一个主包。所谓主包就是放置默认的启动页面/TabBar页面，以及所有子包的一些公共资源/JS脚本，子包根据开发者的配置进行划分。

小程序启动时，默认会下载主包，并启动主包中的页面。当用户在分包中进入一个页面时，客户端会下载对应的分包，下载完成。稍后显示。

目前小程序的分包大小有以下限制：

【昱远信息系统开发定制】