小程序简要知识点

我心飞翔 分类:微信小程序

小程序

小程序的主要开发语言是 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 () {
  // 新版本下载失败
})

 

作者:掘金-小程序简要知识点

回复

我来回复
  • 暂无回复内容