小程序开发笔记

Question

起步

WeixinJSBridge 最初是微信提供给腾讯内部业务使用的API，后被外部开发者使用，进一步包装成​对公的 JS-SDK。

小程序和普通网页开发的区别在于：

• 网页开发，渲染线程和脚本线程互斥；小程序，二者是可以运行在不同的线程中。
• 网页开发，可以使用浏览器暴露出来的 DOM API；小程序，逻辑层运行在 JSCore 中，没有 DOM API 和 BOM API，导致一些熟悉的 JS库无法运行，同时一些NPM的包也无法运行。
• 网页开发，开发环境是浏览器、WebView；小程序，环境是微信客户端、辅助开发工具。
• 网页开发，使用浏览器和辅助工具或编辑器；小程序，申请账号、安装开发者工具、配置项目。

示例源码

目录结构

• 小程序主体，在根目录下，包含 app.js/json/wxss
• 小程序页面，包含 js/wxml/json/wxss

配置小程序

全局配置 app.json 可以配置页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

小程序页面也可以使用同名 .json 页面配置覆盖 app.json 的 window 中相同的配置项。

sitemap 配置：根目录下的 sitemap.json 文件用来配置小程序及其页面是否允许被微信索引。

小程序框架

场景值

用来描述用户进入小程序的路径。可以在 App 的 onLaunch 和 onShow，或wx.getLaunchOptionsSync 中获取。

逻辑层

逻辑层 JavaScript 代码层面。

• 注册小程序：在 app.js 中调用 App 方法注册小程序示例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。
• 注册页面：每个页面，都需要在页面对应的 js 文件中调用 Page 方法注册页面示例，指定页面的初始数据、生命周期回调、事件处理函数等。
• 页面生命周期：大概以后会用得上
• 页面路由：介绍了路由的概念和操作的一些方法
• 模块化：将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。
• API：分为事件监听 API、同步 API、异步 API

视图层

• WXML(WeiXin Markup language) 用于描述页面的结构。
• WXS(WeiXin Script) 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
• WXSS(WeiXin Style Sheet) 用于描述页面的样式。
• 组件(Component)是视图的基本组成单元。
• 事件的使用方式
• 基础组件：框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。
• 获取界面上的节点信息：提供了响应的API可以调用
• 响应显示区域变化：默认情况下，小程序显示区域的尺寸自页面初始化起就不会发生变化。但以下两种方式都可以改变这一默认行为。
• 动画：动画的常见方式

小程序运行时

运行环境

微信小程序运行在三端：iOS（iPhone/iPad）、Android 和 用于调试的开发者工具。

三端的脚本执行环境以及用于渲染非原生组件的环境是各不相同的。尽管三端的环境是十分相似的，但是还是有些许区别，比如JavaScript 语法和 API 支持不一致。

开发者工具仅供调试使用，最终的表现以客户端为准。

JavaScript 支持情况

表格参阅

运行机制

小程序分为冷、热启动两种方式，不同的操作决定；在后台持续的时间长短和性能开销等因素，会决定在后台时是否被销毁。

更新机制

冷启动是会自动加载最新的小程序包，在其他若干个时机微信也会去检查小程序的版本更新。