小程序

小程序的主要开发语言是 JavaScript ，小程序的开发同普通的网页开发相比有很大的相似性。对于前端开发者而言，从网页开发迁移到小程序的开发成本并不高，但是二者还是有些许区别的。

一. web 开发与小程序开发的区别

1. 渲染线程和脚本线程不同

   • 网页开发渲染线程和脚本线程是互斥,(这也是长时间的脚本运行可能导致页面失去响应)。
   • 小程序的脚本线程和渲染线程是分开运行的分别运行在不同线程中。

2. Dom选中和操作

   • 网页开发可以通过使用各种浏览器暴露出来的 DOM API, 进行 DOM 选中和操作。
   • 小程序逻辑层和渲染层是分开的，逻辑层运行在 jsCore 中，并没有一个完整的浏览器对象，因而缺少 DOM API 和 BOM API。（这一缺点导致了前端非常熟悉的一些库在小程序中无法运行。如 jQuery、Zepto）

3. 运行环境不同

   • 网页开发运行环境是浏览器
   • 小程序开发运行环境是 JSCore ，与 NODEJS 环境不尽相同，所以一些 npm 包在小程序中也无法运行。

4. 兼容问题不一样

   • 网页开发需要面对的环境是各式各样的浏览器，PC 端 需要面对 IE、Chrome、QQ 等浏览器，在移动端要面对 Safari、Chrome 以及 iOS、Android系统中的各式 WebView。

   • 小程序开发过程中需要面对两大操作系统 iOS 和 Android 的微信客户端，以及用于辅助开发的小程序开发者工具，小程序中三大运行环境也是有所区别的。

     运行环境	逻辑层	渲染层
     iOS	JavaScriptCore	WKWebView
     安卓	V8	chromium定制内核
     小程序开发者工具	NWJS	Chrome WebView

5. 开发方式不同

   • 网页开发时只需要浏览器，并且搭配上一些辅助工具或者编辑器即可。
   • 小程序开发需要经过申请小程序账号、安装小程序开发者工具、配置项目等等方可完成。

二. 小程序的代码构成

1. JSON 配置

JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色

语法

• JSON文件都是被包裹在一个大括号中 {}，通过key-value的方式来表达数据。JSON的Key必须包裹在一个双引号中，在实践中，编写 JSON 的时候，忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。

• JSON的值只能是以下几种数据格式，其他任何格式都会触发报错，例如 JavaScript 中的 undefined。

  1. 数字，包含浮点数和整数
      

  2. 字符串，需要包裹在双引号中
      

  3. Bool 值，true 或者 false
      

  4. 数组，需要包裹在方括号中 []
      

  5. 对象，需要包裹在大括号中 {}
      

  6. Null
      

还需要注意的是 JSON 文件中无法使用注释，试图添加注释将会引发报错

(1). app.json

• 当前小程序的全局配置
• 包括了小程序的所有页面路径
• 界面表现
• 网络超时时间
• 底部 tab 

(2.) project.config.json

• 针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等

wx：key

列表数据发生改变重新触发页面渲染时,列表中的项目可以保持自身状态 比如在 input 组件输入内容后不希望 input 内容发生改变，在页面重新渲染的时候，确保带有 key 值的组件 会重新排列，而不是重新渲染，从而提高页面的渲染效率。

如果不提供 wx:key, 会报一个waring, 在明确列表是静态或者不必关心其顺序可以忽略警告。

Block 是一个包装元素，不是组件，渲染后页面无其dom节点

wx:if 与 hidden 的区别

• wx:if 是一个惰性的渲染,在其值为 false 时不进行 dom 节点渲染,切换消耗性能
• hidden 始终渲染，只有当值为 true 时才显示，可以用于控制视图的显隐。
• 对于频繁切换的操作可以使用 hidden，减少频繁切换对性能的消耗。

wxml 支持 import 导入

import: 只能引用我们定义的模板文件的模板内容块。

如 ./test.wxml

<view>我不作为模板,下面的兄弟才是</view>

<view>我不作为模板,下面的兄弟才是</view>
<template name="support">
    support import wxml
</template>
 

./index.wxml

<import src="../comp/test.wxml"></import>
<template is="support"></template>
 

• 作用域: 只能引用目标文件定义的template模板，如果目标文件内嵌套了其他模板，是不会被引用的，避免了引用模板死循环的问题
• include : 把目标 文件内除了模板代码块外的 所有代码都引入，相当于拷贝到了include位置这里

小程序运行机制

小程序两种启动方式: 冷启动、热启动

• 热启动：假如用户已经打开了某个小程序，在一定时间内再次打开小程序的话，这个时候我们就不再需要重新启动了，这需要把我们的后台打开的小程序切换到前台来使用。
• 冷启动：用户首次打开小程序或被微信主动销毁再次打开的情况，此时小程序需要重新加载启动。

小程序什么时候会主动销毁？

小程序在进入后台之后，客户端会帮我们在一定时间内维持我们的一个状态，超过五分钟后，会被微信主动销毁
当我们在短时间内连续两次收到系统告警的时候，微信就会主动销毁，短时间间隔是5s

小程序更新机制：

小程序在冷启动的时候遇到版本更新，小程序会异步加载，帮我们下载最新版本的代码包，并同时使用微信本地版本的代码包启动。

也就是说最新的代码包，将在小程序下次启动才去加载。如果偏要使用最新版本的代码包，我们可以使用api来处理

const updateManager = wx.getUpdateManager()
updateManager.onCheckForUpdate(function (res) {
  // 请求完新版本信息的回调
  console.log(res.hasUpdate)
})

updateManager.onUpdateReady(function () {
  wx.showModal({
    title: '更新提示',
    content: '新版本已经准备好，是否重启应用？',
    success(res) {
      if (res.confirm) {
        // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
        updateManager.applyUpdate()
      }
    }
  })
})

updateManager.onUpdateFailed(function () {
  // 新版本下载失败
})