微信小程序开发 个人总结(2018.03)

什么是微信小程序？

介绍：

百度百科链接

image.png
微信小程序是一种运行在微信上的不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。
小程序在微信里能被便捷地获取与传播，借助微信庞大的用户群，可以给一些优质服务提供一个宽广开放的平台；
构建微信生态圈的一个重要环节，小程序、订阅号、服务号、企业号是微信中并行的体系。
小程序能够依托微信实现音频拍照等媒体操作、位置地图、消息通知、线下扫码、微信支付、公众号关联等众多的功能。其中，通过公众号关联，用户可以实现公众号与小程序之间相互跳转。

对于开发者而言，小程序开发门槛相对较低，难度不及原生APP开发和h5开发，能够满足简单的基础应用，适合生活服务类线下商铺以及非刚需低频应用。

特点：

  • 不用安装那么多APP，省流量，省安装时间，不占用桌面；
  • 无需安装卸载，体现了“用完即走”的理念；它可以抛开操作系统的限制，做到了在一个应用（微信）中能够获得类似打开一个本地APP的体验。小程序真正做到了小巧，不用安装，不用卸载的先进用户体验。
  • 微信提供了健全的文档，开发门槛低
  • 操作原生API的接口；
  • 发布维护方便
  • 对于用户来说，相较于各种APP，微信小程序UI和操作流程会更统一。
  • 开发成本更低，他们可以更多财力，人力，精力放在如何运营好产品，做好内容本身；原生APP，推广更容易更简单，更省成本。
  • 小程序应该是做好人与服务的连接，低频、非刚需场景的长尾服务提供者最适合来做微信小程序。

局限 差异

  • 暂不支持小程序和外界项目的直接交互，本身局限于微信及提供的服务，无法移植到其他平台；
  • 体验上没法完全媲美原生APP；，从操作路径来看，小程序的进入路径比打开APP更长，它是一个更偏向于线下和场景的一个个轻应用，不能完全去替代APP， 因为很多更丰富、更复杂、个性化的功能还是需要在APP上去承载。
  • 大量小程序出现也容易扰乱用户的选择，减低用户体验。

发展历程：

2016年1月11日，微信之父张小龙解读了微信的四大价值观，并提出正在研究新的形态-「微信小程序」;

_四大价值观：_1.一切以用户价值为依归；1.让创造发挥价值；3.一个好的东西(或者工具)是用完即走的；4.尽可能的让商业化存在于无形之中。

2016年9月21日，微信小程序正式开启内测，腾讯云正式上线微信小程序解决方案，提供小程序在云端服务器的技术方案;

2017年1月9日，历时一年，第一批小程序正式上线;

2017年12月28日，微信更新的 6.6.1 版本开放了小游戏，微信启动页面还重点推荐了小游戏「跳一跳」,并在首页下拉中可查看自己最近访问的小程序。

开发前需要知道的事项

1.官方微信公众平台有涉及开发各阶段的比较健全的文档。是开发者最好的学习途径；
2.微信开发者工具；
3.微信承载着小程序的整个流程。包括 接入 + 开发 + 调试 + 编译 + 测试 + 上传发布 + 推广运行等。
4.小程序并不等同于h5项目；两者有明显的区别；

接入流程

官网对使用接入流程及使用有详细的介绍。

注册小程序

根据指引填写信息和提交相应的资料，在微信公众平台注册小程序。快速跳转

小程序信息完善

填写小程序基本信息，包括名称、头像、服务范围等。设置
管理员设置、项目成员及权限配置
小程序ID及秘钥
服务器域名配置
腾讯云配置
开发者工具

开发小程序阶段

完成小程序开发配置后，开发者可下载开发者工具参考开发文档进行小程序的开发和调试。

提交审核和发布

完成小程序开发后，提交代码至微信团队审核，审核通过后即可发布。
云真机测试

工具：

微信开发者工具

区别于H5移动端开发时的开发工具+浏览器Device Mode预览的模式，小程序的开发有基于自己的开发者工具。微信官方推出的微信开发者工具，集成了公众号网页调试和小程序调试两种开发模式。

  • 使用公众号网页调试，开发者可以调试微信网页授权和微信JS-SDK；
  • 使用小程序调试，开发者可以完成小程序的 API 和页面的开发调试、代码查看和编辑、小程序预览和发布等功能。
  • 开发者工具（1.01.1711300版本）界面：

image.png
基于微信开发者工具可以实现 同步本地文件 + 开发 + 调试 + 编译 + 预览 + 测试 + 模拟场景 + 上传 + 发布 等一整套流程；要了解各个菜单的功能，官网有详细的菜单功能介绍。

其他开发工具

我们已经习惯于在webstorm等IDE工具上快捷开发，微信开发者工具上编码总感觉不是那么流畅。
当然小程序编码完全可以在这些编辑器上进行，但目前各IDE工具还没有比较全方位的插件来替代快速开发，只有一些不太完整的插件。且就算在其他工具开发代码，还是离不开微信开发者工具的配合。查看效果、调试页面等目前还需在开发者工具进行。

在webstorm编写代码，首先要识别.wxss和.wxml需配置文件类型：如：image.png
其次配置小程序代码提示：例：借助wecharCode.jar查看

小程序与H5区别

我们接触使用过好几种前端MVVM框架或者前端模板引擎，可以把小程序理解为类似vue的h5前端框架，不过也存在着明显的差异。

小程序不是HTML5，本质上是HyBrid技术的应用。Hybrid App（混合模式移动应用）是介于Native App（原生）、以 HTML5 为代表的 Web App（基于Web的系统和应用）两者之间的app，它就是Native结合Web混合开发，因此兼具了Native App的大部分优势，也兼具Web App使用H5跨平台开发低成本的特点。
当然微信小程序的整体开发语法偏向H5,但编译运行等则差异明显。

  1. 开发框架区别；
    区别于h5项目编码配合各框架进行标准的HTML + CSS + JS 的开发组合，小程序开发了自己的一套WXML标签语言和WXSS样式语言进行视图层开发，以及基于ES规范的 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统。
  2. 开发工具差异；
    小程序依赖微信开发者工具；
  3. 运行环境、内核；
    小程序并非运行在浏览器中，页面的脚本逻辑是在JsCore中运行，JsCore是一个没有窗口对象的环境，所以不能在脚本中使用window、document，zepto/jquery 会使用到window对象和document对象，所以也无法使用；也无法在脚本中操作组件。
    微信小程序运行在三端：iOS、Android 和 用于调试的开发者工具。三端的脚本执行环境以及用于渲染非原生组件的环境是各不相同的：
  • 在 iOS 上，小程序的 javascript 代码是运行在 JavaScriptCore 中，是由 WKWebView 来渲染的，环境有 iOS8、iOS9、iOS10；
  • 在 Android 上，小程序的 javascript 代码是通过 X5 JSCore来解析，是由 X5 基于 Mobile Chrome 53/57 内核来渲染的；
  • 在 开发工具 上，小程序的 javascript 代码是运行在 nwjs 中，是由 Chrome Webview 来渲染的；
  1. 文件结构
    一般前端框架项目除了要求基本的h5语法结构外，一般没有严格的文件结构要求，但小程序要求文件结构符合一些规范，否则无法正常运行启动。比如：小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。一个小程序主体部分由三个文件组成，必须放在项目的根目录。小程序文件结构
    image.png
  2. 语法区别
    编码语法上存在不少差异点(比如下方的页面标签)，有些点是必须要求符合小程序的规范，而有一些语法则能用但微信不推荐使用；这个需要在项目开发中总结。
  3. H5和小程序的页面标签(组件)的区别
    所有的HTML标签都不要用(经试验发现某些如div、span等基本标签可以使用，但无语义和样式;官方也不推荐使用)，取而代之的是小程序提供的一套标签(组件)。
    image.png
  4. 页面执行顺序
    页面加载渲染顺序：image.png
  • 传统HTML5在加载的时候受限于网络环境，需要顺序加载HTML、CSS、JS，然后返回数据，最后渲染页面显 示在浏览器中。用户经常需要等待很长时间，体验会受到影响。
  • 相比之下，小程序的两个线程：Appservice Thread和View Thread会同时进行、并行加载，甚至Appservice Thread会更早执行，当视图线程加载完，通知Appservice，Appservice 会把准备好的数据用setData的方法返回给视图线程。

小程序的这种优化策略，可以减少用户的等待时间、加快小程序的响应速度。
参考文档

此外开发的具体区别见下文。

开发概要

微信小程序开发门槛低，除了基于javaScript的语法入门简单的特点，还归功于官网提供了整个开发流程详尽的参考文档，减少自行摸石头过河的时间；官方开发者社区也提供了开发者互相交流、分享经验、反馈bug,快速解决问题的开放平台(目前帖子不多-.-!)。

快速入口：接入指南、设计规范、开发指南、框架设计、基础组件、微信原生API、开发者工具、运营规范、数据分析； 开发者社区； 微信小游戏开放中…微信小游戏文档链接(临时)

有h5开发、vue框架等开发经验，大概看一下文档，进行微信开发毫无障碍。具体开发
网上有基于小程序的开发框架及UI组件， 同时可借助网上已有开源项目熟悉具体项目开发。 作为参考：微信小程序开源项目库集合、微信小程序资源整理(比较老旧)；

项目开发

具体开发前最好先熟悉一下微信开发者工具！

新建项目

在小程序默认的项目模板基础上开发。
image.png
项目目录只能选择空目录或符合微信文件结构的已有项目目录。选择空目录时通过建立普通快速启动模板选项可以快速建立一个dome项目结构。
AppID不填写时，部分功能会受限。
目前只支持同时运行打开一个项目。
###项目构成
项目里主要有四种类型的文件：

  1. json 后缀的 JSON 配置文件
  2. wxml 后缀的 WXML 模板文件
  3. wxss 后缀的 WXSS 样式文件
  4. js 后缀的 JS 脚本逻辑文件
  5. .wxs 后缀的 小程序 脚本文件

其中根目录下的app.json、app.js是必须的，文件名不能修改。(app.json作为入口文件，缺失直接导致项目无法运行;缺失app.js会导致无法预览、无法上传)。
具体每个页面中四种类型文件名保持一致，小程序加载页面时，会根据页面路径，读取该路径下同名的其他几个文件类型。

JSON 配置

在项目的根目录有一个 app.json 和 project.config.json配置文件

小程序配置 app.json

app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

  1. "pages": [ // 当前小程序所有页面路径配置 *小程序中新增/减少页面，都需要对 pages 数组进行修改*
  2.     "pages/index/index", // 数组第一项会被指定为程序的首页
  3.     "pages/logs/logs"
  4.   ],
  5.   "window": { // 全局样式配置，设置小程序的状态栏、导航条、标题、窗口背景色
  6.     "backgroundTextStyle": "light",
  7.     "navigationBarBackgroundColor": "#fff",
  8.     "navigationBarTitleText": "微信小程序",
  9.     "navigationBarTextStyle": "black"
  10.   },
  11.   "tabBar": { // 底部或顶部的 tab 栏配置，可配置颜色、点击表现等，点击可以切换页面
  12.     "color": "#6e6d6b",
  13.     "selectedColor": "#e64340",
  14.     "borderStyle": "black",
  15.     "backgroundColor": "#D2F2A1",
  16.     "list": [ // tab栏只能配置最少2个、最多5个，tab 按数组的顺序排序。
  17.       {
  18.         "pagePath": "pages/index/index",
  19.         "iconPath": "images/nav/home-off.png",
  20.         "selectedIconPath": "images/nav/home-on.png",
  21.         "text": "首页"
  22.       },
  23.       {
  24.         "pagePath": "pages/my/index",
  25.         "iconPath": "images/nav/my-off.png",
  26.         "selectedIconPath": "images/nav/my-on.png",
  27.         "text": "我的"
  28.       }
  29.     ]
  30.   },
  31.   "networkTimeout": { // 可以设置各种网络请求的超时时间
  32.     "request": 10000,
  33.     "downloadFile": 10000
  34.   },
  35.   "debug": true  // 是否在开发者工具中开启 debug 模式，方便调试

配置项细节可以参考文档 小程序的配置app.json；

工具配置 project.config.json

工具的一些个性化配置，例如界面颜色、编译配置等。
配置项细节可以参考文档 开发者工具的配置 %E7%8A%B6%E6%80%81%E5%B1%95%E7%A4%BA)。

页面配置 page.json

可以对本页面的窗口表现、属性进行配置，例如具体页面顶部颜色、是否允许下拉刷新等等。页面中配置项会覆盖 app.json 的 window 中相同的配置项。
配置项细节可以参考文档

页面路由

[官方文档]
在小程序中所有页面的路由全部由框架进行管理。需要在app.json中配置好页面路径信息，多tab栏应用同样设置好页面路径。
快速新建路由及页面的两种方法：
1.开发者工具编辑器中新建目录后新建page；
2.app.json文件中pages下直接增加目录页面路径，保存后自动生成页面目录。

页面栈

小程序以页面栈的形式维护了当前的所有页面，表现为路由页面切换的规则，当发生路由切换的时候，内部维护出入栈数据。入栈则是相当于是 缓存了页面加载的路径，出栈则相当于是清除了页面加载路径，当清除后，点击返回按钮时，则不会返回，或则就不存在返回按钮。

不同的路由切换方式，页面栈的表现不同，如下图：image.png

getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。 不要尝试修改页面栈，会导致路由以及页面状态错误。
可直接调用查看当前页面栈，看下图，包含的信息比较丰富。image.png

路由触发方式

跳转的页面必须要在app.json中注册。
路由触发方式有 API 调用(5种方法)、navigator 组件跳转[文档] 和 Tab 切换三种方式；

对于路由的触发方式以及页面生命周期函数如下：
image.png
tab切换对应的生命周期：
image.png

api接口说明，配合页面栈的表现理解：

  1. wx.navigateTo，原页面保留,可使用wx.navigateBack返回到原页面，只能打开非 tabBar 的页面的路径。
  2. wx.redirectTo 页面重定向，关闭当前页面，只能打开非 tabBar 的页面的路径。
  3. wx.navigateBack，关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈，决定需要返回几层。
  4. wx.switchTab，跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面，只能打开 tabBar 页面。
  5. wx.reLaunch，关闭所有页面，重新打开到应用内的某个页面，重启动，可以打开任意页面。
  6. 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
    调用页面路由带的参数可以在目标页面的onLoad中获取。

navigator组件内的open-type属性值与api对应，调用效果一致。

运行机制

[官方文档]

启动机制

小程序启动会有两种情况，一种是「冷启动」，一种是「热启动」。
假如用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时无需重新启动，只需将后台态的小程序切换到前台，这个过程就是热启动；
冷启动指的是用户首次打开或小程序被微信主动销毁后再次打开的情况，此时小程序需要重新加载启动。

当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。需要注意的是：只有当小程序进入后台一定时间，或者系统资源占用过高，才会被真正的销毁。

销毁机制

小程序没有重启的概念，当小程序进入后台，客户端会维持一段时间的运行状态，超过一定时间后（目前是5分钟）会被微信主动销毁；
置顶的小程序不会被微信主动销毁；
当收到系统内存告警也会进行小程序的销毁；

再次打开逻辑(待理解)

更新机制

小程序冷启动时如果发现有新版本，将会异步下载新版本的代码包，并同时用客户端本地的包进行启动，即新版本的小程序需要等下一次冷启动才会应用上。

逻辑层 js脚本

小程序中的javaScript脚本支持大部分ES6语法(部分特性受运行内核影响，支持程度不同)；也支持模块化；可以调用微信特有的API。
但没有操作DOM的能力(Js语言本身就是不包括DOM操作的，DOM操作是浏览器环境为JS做的扩展)。

页面JS

负责与WXHL进行交互，包括用户操作事件、页面组件的配置参数变动。调用微信原生API,实现丰富的手机端操作功能。

注册程序

[官方文档]

注册程序函数及参数

小程序app.js中使用 App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。 (多个app()注册都会执行)
image.png

例子：

  1. App({
  2.   /**
  3.    * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
  4.    */
  5.   onLaunch: function () {
  6.     // 展示本地存储能力
  7.     var logs = wx.getStorageSync('logs') || []
  8.     logs.unshift(Date.now())
  9.     wx.setStorageSync('logs', logs)
  10.     // 登录
  11.     wx.login({
  12.       success: res => {
  13.         // 发送 res.code 到后台换取 openId, sessionKey, unionId
  14.       }
  15.     })
  16.     // 获取用户信息
  17.     wx.getSetting({
  18.       success: res => {
  19.         if (res.authSetting['scope.userInfo']) {
  20.           // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
  21.           wx.getUserInfo({
  22.             success: res => {
  23.               // 可以将 res 发送给后台解码出 unionId
  24.               this.globalData.userInfo = res.userInfo
  25.               // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
  26.               // 所以此处加入 callback 以防止这种情况
  27.               if (this.userInfoReadyCallback) {
  28.                 this.userInfoReadyCallback(res)
  29.               }
  30.             }
  31.           })
  32.         }
  33.       }
  34.     })
  35.   },
  36.   /**
  37.    * 当小程序启动，或从后台进入前台显示，会触发 onShow
  38.    */
  39.   onShow: function (options) {   
  40.   },
  41.   /**
  42.    * 当小程序从前台进入后台，会触发 onHide
  43.    */
  44.   onHide: function () {  
  45.   },
  47.   /**
  48.    * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
  49.    */
  50.   onError: function (msg) { 
  51.   },
  52.   globalData: { // 全局变量
  53.     userInfo: null
  54.   }
  55. })

设置全局变量

约定 在app()函数的globalData对象中设置全局变量。其他逻辑层中通过getApp()获取实例后读取全局变量。

注意点
  • 官方指出App() 必须在 app.js 中注册，且不能注册多个。(自行测试发现可以注册多个，都会执行)
  • 在别的js中，调用全局的 getApp() 函数可以用来获取到小程序实例，但不要在定义于 App() 内的函数中调用 getApp()。
  • 通过 getApp() 获取实例之后，不要私自调用生命周期函数。
  • 不要在 onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成。

注册页面

[官方文档]
页面事件处理函数、生命周期、setData()函数更新页面数据等查看文档。

Page() 函数用来注册一个页面。

1. object 参数概要

Page函数接受一个 object 参数，用以指定页面的初始数据、生命周期函数、事件处理函数等。
object 参数内容在页面加载时会进行一次深拷贝，需考虑数据大小对页面加载的开销，下图为参数概要：
image.png

2. data参数对象

把data对象称为初始数据，是因为在页面第一次渲染时，data对象会以 JSON 的形式由逻辑层传至渲染层，渲染层通过 WXML 对数据进行绑定。 而后续直接更改data对象值，将无法改变页面的状态，会造成数据不一致(这不同于Vue、angular的数据双向绑定)。
其数据必须是可以转成 JSON 的格式：字符串，数字，布尔值，对象，数组。

逻辑层更新视图层页面数据，需要调用setData 函数。他是Page原型上添加的方法Page.prototype.setData()。
setData 函数调用时改变对应的 this.data 的值（同步），将数据从逻辑层发送到视图层（异步）。
image.png
第一个参数Object(必填项) 以 key，value 的形式表示将 this.data 中的 key 对应的值改变成 value。 key值不需要在this.data 中预先定义。

第二个参数callback(选填) 是一个回调函数，在这次setData对界面渲染完毕后调用。

  1. * 1.5.0基础库后才支持callback;
  2. * 单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。
  3. * 请不要把 data 中任何一项的 value 设为 undefined ，否则这一项将不被设置并可能遗留一些潜在问题。

setData实现原理及优化建议。

3. 生命周期函数

生命周期函数的调用详见页面路由中
onLoad: 页面加载

  1. 一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数。

onShow: 页面显示

  1. 每次打开页面都会调用一次

onReady: 页面初次渲染完成

  1. 一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
  2. 对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。详见生命周期

onHide: 页面隐藏

  1. 当navigateTo或底部tab切换时调用。

onUnload: 页面卸载

  1. 当redirectTo或navigateBack的时候调用。

4. 页面相关事件处理函数

onPullDownRefresh: 下拉刷新

  1. 监听用户下拉刷新事件。
  2. 需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。
  3. 当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

onReachBottom: 上拉触底

  1. 监听用户上拉触底事件。
  2. 可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。
  3. 在触发距离内滑动期间，本事件只会被触发一次。

onPageScroll: 页面滚动

  1. 监听用户滑动页面事件。
  2. 参数为 Object，包含以下字段：scrollTop(页面在垂直方向已滚动的距离（单位px）)

onShareAppMessage: 用户转发

  1. 只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮。
  2. 用户点击转发按钮的时候会调用。
  3. 此事件需要 return 一个 Object，用于自定义转发内容。
  4. 自定义转发字段Object，包含两个字段title和path:
  5. {
  6.   title: '自定义转发标题',
  7.   path: '/page/user?id=123'
  8. }

5. 事件处理函数

除了初始化数据和生命周期函数，Page 中还可以定义自定义一些特殊的函数：事件处理函数。在渲染层可以在组件中加入事件绑定，当达到触发事件时，就会执行 Page 中定义的事件处理函数。
实例代码：

  1. <!--WXML-->
  2. <view bindtap="viewTap"> click me </view>
  1. // js
  2. Page({
  3.   viewTap: function() {
  4.     console.log('view tap')
  5.   }
  6. })

模块化机制

小程序秉承了JavaScript模块化的机制，采用CommonJS规范，通过module.exports暴露对象，通过require来获取对象。

可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。

  1. function sayHello(name) {
  2.   console.log(`Hello ${name} !`)
  3. }
  4. function sayGoodbye(name) {
  5.   console.log(`Goodbye ${name} !`)
  6. }
  8. module.exports.sayHello = sayHello
  9. exports.sayGoodbye = sayGoodbye

在需要使用这些模块的文件中，使用 require(path) 将公共代码引入。

  1. Page({
  2.   helloMINA: function() {
  3.     common.sayHello('MINA')
  4.   },
  5.   goodbyeMINA: function() {
  6.     common.sayGoodbye('MINA')
  7.   }
  8. })
  1. require 暂时不支持绝对路径；
  2. 小程序目前不支持直接引入 node_modules ,使用第三方模块时，无法通过require直接导入模块，需要对第三方模块强制导出后才能正常导入。

WXS脚本

[官方文档]
WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

差异点：
  1. wxs 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
  2. wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致。
  3. wxs 的运行环境和其他 javascript 代码是隔离的，wxs 中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的API。
  4. wxs 函数不能作为组件的事件回调。
  5. 由于运行环境的差异，在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。

使用方式：

微信为我们提供了两个使用 WXS 方法：直接插入 WXS 代码，以及引用 WXS 文件。

  1. <!--wxml中直接插入WXS标签的代码-->
  2. <wxs module="m1">
  3. var msg = "hello world";
  4. module.exports.message = msg;
  5. </wxs>
  6. <view> {{m1.message}} </view>
  8. <!--wxml中引用对应路径下的WXS文件-->
  9. <wxs module='hello' src='./test.wxs'>

每一个 WXS 模块，都需要用 module 标签进行命名。命名模块后，开发者工具才能正常进行编译、在 WXML 中引用模块中的变量与函数。

语法：

WXS有自己的语法，并不与JS完全一致

WXML 模板开发 (与HTML区别)

[官方文档]

  1. <view class="container">
  2.   <view class="userinfo">
  3.     <button wx:if="{{!hasUserInfo && canIUse}}"> 获取头像昵称 </button>
  4.     <block wx:else>
  5.       <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
  6.       <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  7.     </block>
  8.   </view>
  9.   <view class="usermotto">
  10.     <text class="user-motto">{{motto}}</text>
  11.   </view>
  12. </view>
  1. 与其他前端MVVM框架或者前端模板引擎类似，WXML中可以进行数据绑定、列表渲染、条件渲染、模板、事件、引用等操作；
  2. 所有的HTML标签都不能用，取而代之的是小程序提供的一套标签。官方文档上叫组件，这个组件的写法和HTML标签、模板语言中组件是一样的，由标签名，属性，内容组成，也可以通过class，id，style来添加样式，只不过小程序组件相对来说拥有更强大的功能，自带UI样式也更丰富,一般的组件支持嵌套，有些嵌套则无效。
    div、p、script等标签经过编译后，会保留，但无语义，内容被当成了普通文本处理，属性及style样式同样生效；h1等则报错。
  3. 事件系统
    需要学习的是 事件绑定的写法bind/catch(冒泡与捕获的区别)，事件类型+组件自定义事件，事件对象的内容有区别。
    官方文档-事件
  4. 文件引入
    WXML提供两种文件引入方式，import和include。区别在于：import可以引入定义好的template模板，模板是有作用域的；而include就是拷贝一个公用的代码片段到目标文件中，适合做公共页面片的拆分。
  1. <!--import-->
  2. <import src="../template/a.wxml"/>
  3. <!--include-->
  4. <include src="../include/footer.wxml"/>

文件引入在小程序做模块化拆分的过程中非常重要。

5.可插入 wxs 标签的小程序脚本语言。

WXSS 样式开发(附WXSS与CSS的区别)

[官方文档-WXSS]
WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改；

  1. 增加了rpx（responsive pixel）尺寸单位
    规则是1rpx = 屏幕宽度/750，类似于h5中的vw单位(1vw = 屏幕宽度/100)。这样不但可以免去换算的烦恼，还可以根据屏幕宽度进行自适应。(设计时推荐用 iPhone6 作为视觉稿的标准)
  2. WXSS支持的选择器类型有限
    目前只支持.class, #id, element, ele,ele, ::before, ::after。官方文档上暂并未说明支持后代选择器。即使支持也不要使用，以免出现不必要的bug。
  3. 全局样式与局部样式
    定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。
    这样每个单独页面里的class可以尽量不嵌套，提升渲染速度。
  4. 导入外联样式
    使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。
  5. 内联样式
    image.png

6.background-image 只能用网络url或者base64 . 本地图片要用image标签才行。

微信小程序框架本身也是一个UI框架，基础实用的样式在组件里就提供了，大大减少开发者设置样式的时间。

组件

[官方文档]
快速查看效果：[小程序官方demo]

什么是组件？
组件是视图层的基本组成单元，与HTML页面标签一样，一个组件通常包括开始标签和结束标签，`属性用来修饰这个组件，内容`在两个标签之内。

框架为开发者提供了一系列基础组件，它们自带一些微信风格的样式。开发者可以通过组合这些基础组件进行快速开发。
基础组件根据使用场景，分为以下七大类：

视图容器、 基础内容、 表单组件、 表单、导航、 多媒体、 地图、 画布、 客服。

自定义组件
[官方文档]

从小程序基础库版本1.6.3开始，小程序支持简洁的组件化编程。 开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。

自定义组件的写法与用法有些不同。一个例子

API

[官方文档]
快速查看效果：[小程序官方demo]

小程序开发框架提供丰富的微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。
说明：

  • 功能API都调用wx对象，直接使用，无需引用。
  • wx.on 开头的 API 是监听某个事件发生的API接口，接受一个 CALLBACK 函数作为参数。当该事件触发时，会调用 CALLBACK 函数。
  • 如未特殊约定，其他 API 接口都接受一个OBJECT作为参数。
  • OBJECT中可以指定success, fail, complete来接收接口调用结果。

注意事项

[官方优化建议文档]

游戏开发

官方最新说明：开发者论坛贴
[官方教程]

后续

云测试

数据分析

运营、维护等知识

开发要点（草稿）：
1.页面路由说明、跳转、与其他路由方式对比、函数api；
2.WXML写法区别，组件、模板、class。交互、数据驱动原理；
3.WXSS写法区别、 动画写法
4.页面js写法、生命周期函数。 全局变量、模块化；setData()同步页面数据
5.微信Api。
6.网络请求，与服务器的前后端交互。
7.es6写法的体现，promise ;
8.小程序与外部应用的交互
9.微信canvas，小游戏；
10.真机测试、上传发布、 腾讯云的应用。
11.常用第三方组件；
12.场景值
13.运行原理、底层实现
14.优化
15. 利用第三方框架 开发小程序和h5页面 等多端应用

扩展

小程序官方体验，包含各个组件和接口演示下载体验

>>小程序扫一扫与长按识别的原理

移动app开发三种技术及优劣势；

微信小程序的编译过程，开发者工具的本质；一个见解切入点

小程序实现原理解析：http://blog.csdn.net/xiangzhihong8/article/details/66521459

小程序解读

小程序应用场景解读

api工厂