微信小程序开发我的总结(2018.03)

时间 2019-11-07

标签微信程序开发我的总结 2018.03 繁體版

原文原文链接

什么是微信小程序？

介绍： >>百度百科连接

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

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

特色：

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

局限差别

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

发展历程：

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

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

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

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

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

开发前须要知道的事项

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

接入流程

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

注册小程序

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

小程序信息完善

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

开发小程序阶段

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

提交审核和发布

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

工具：

微信开发者工具

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

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

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

其余开发工具

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

在webstorm编写代码，首先要识别.wxss和.wxml需配置文件类型：如：

其次配置小程序代码提示：例：借助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,但编译运行等则差别明显。

开发框架区别；
区别于h5项目编码配合各框架进行标准的HTML + CSS + JS 的开发组合，小程序开发了本身的一套WXML标签语言和WXSS样式语言进行视图层开发，以及基于ES规范的 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统。
开发工具差别；
小程序依赖微信开发者工具；
运行环境、内核；
小程序并不是运行在浏览器中，页面的脚本逻辑是在JsCore中运行，JsCore是一个没有窗口对象的环境，因此不能在脚本中使用window、document，zepto/jquery 会使用到window对象和document对象，因此也没法使用；也没法在脚本中操做组件。
微信小程序运行在三端：iOS、Android 和用于调试的开发者工具。三端的脚本执行环境以及用于渲染非原生组件的环境是各不相同的：

在 iOS 上，小程序的 javascript 代码是运行在 JavaScriptCore 中，是由 WKWebView 来渲染的，环境有 iOS八、iOS九、iOS10；

在 Android 上，小程序的 javascript 代码是经过 X5 JSCore来解析，是由 X5 基于 Mobile Chrome 53/57 内核来渲染的；

在 开发工具 上，小程序的 javascript 代码是运行在 nwjs 中，是由 Chrome Webview 来渲染的；

文件结构
通常前端框架项目除了要求基本的h5语法结构外，通常没有严格的文件结构要求，但小程序要求文件结构符合一些规范，不然没法正常运行启动。好比：小程序包含一个描述总体程序的 app 和多个描述各自页面的 page。一个小程序主体部分由三个文件组成，必须放在项目的根目录。小程序文件结构
语法区别
编码语法上存在很多差别点(好比下方的页面标签)，有些点是必需要求符合小程序的规范，而有一些语法则能用但微信不推荐使用；这个须要在项目开发中总结。
H5和小程序的页面标签(组件)的区别
全部的HTML标签都不要用(经试验发现某些如div、span等基本标签可使用，但无语义和样式;官方也不推荐使用)，取而代之的是小程序提供的一套标签(组件)。
页面执行顺序
页面加载渲染顺序：

传统HTML5在加载的时候受限于网络环境，须要顺序加载HTML、CSS、JS，而后返回数据，最后渲染页面显示在浏览器中。用户常常须要等待很长时间，体验会受到影响。

相比之下，小程序的两个线程：Appservice Thread和View Thread会同时进行、并行加载，甚至Appservice Thread会更早执行，当视图线程加载完，通知Appservice，Appservice 会把准备好的数据用setData的方法返回给视图线程。

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

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

开发概要

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

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

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

项目开发

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

新建项目

在小程序默认的项目模板基础上开发。

项目目录只能选择空目录或符合微信文件结构的已有项目目录。选择空目录时经过 创建普通快速启动模板选项能够快速创建一个dome项目结构。
AppID不填写时，部分功能会受限。
目前只支持同时运行打开一个项目。
###项目构成
项目里主要有四种类型的文件：

json 后缀的 JSON 配置文件

wxml 后缀的 WXML 模板文件

wxss 后缀的 WXSS 样式文件

js 后缀的 JS 脚本逻辑文件

.wxs 后缀的小程序脚本文件

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

JSON 配置

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

小程序配置 `app.json`

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

"pages": [ // 当前小程序全部页面路径配置 *小程序中新增/减小页面，都须要对 pages 数组进行修改*
    "pages/index/index", // 数组第一项会被指定为程序的首页
    "pages/logs/logs"
  ],
  "window": { // 全局样式配置，设置小程序的状态栏、导航条、标题、窗口背景色
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "微信小程序",
    "navigationBarTextStyle": "black"
  },
  "tabBar": { // 底部或顶部的 tab 栏配置，可配置颜色、点击表现等，点击能够切换页面
    "color": "#6e6d6b",
    "selectedColor": "#e64340",
    "borderStyle": "black",
    "backgroundColor": "#D2F2A1",
    "list": [ // tab栏只能配置最少2个、最多5个，tab 按数组的顺序排序。
      {
        "pagePath": "pages/index/index",
        "iconPath": "images/nav/home-off.png",
        "selectedIconPath": "images/nav/home-on.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/my/index",
        "iconPath": "images/nav/my-off.png",
        "selectedIconPath": "images/nav/my-on.png",
        "text": "个人"
      }
    ]
  },
  "networkTimeout": { // 能够设置各类网络请求的超时时间
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true  // 是否在开发者工具中开启 debug 模式，方便调试
复制代码

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

工具配置 `project.config.json`

工具的一些个性化配置，例如界面颜色、编译配置等。
配置项细节能够参考文档 [开发者工具的配置](mp.weixin.qq.com/debug/wxado… %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下直接增长目录页面路径，保存后自动生成页面目录。

页面栈

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

不一样的路由切换方式，页面栈的表现不一样，以下图：

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

路由触发方式

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

对于路由的触发方式以及页面生命周期函数以下：

tab切换对应的生命周期：

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

wx.navigateTo，原页面保留,可以使用wx.navigateBack返回到原页面，只能打开非 tabBar 的页面的路径。
wx.redirectTo 页面重定向，关闭当前页面，只能打开非 tabBar 的页面的路径。
wx.navigateBack，关闭当前页面，返回上一页面或多级页面。可经过 getCurrentPages()) 获取当前的页面栈，决定须要返回几层。
wx.switchTab，跳转到 tabBar 页面，并关闭其余全部非 tabBar 页面，只能打开 tabBar 页面。
wx.reLaunch，关闭全部页面，从新打开到应用内的某个页面，重启动，能够打开任意页面。
页面底部的 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()注册都会执行)

例子：

App({
  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
    // 展现本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
    // 登陆
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经受权，能够直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 能够将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo
              // 因为 getUserInfo 是网络请求，可能会在 Page.onLoad 以后才返回
              // 因此此处加入 callback 以防止这种状况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {   
  },
  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {  
  },

  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) { 
  },
  globalData: { // 全局变量
    userInfo: null
  }
})
复制代码

设置全局变量

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

注意点

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

注册页面

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

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

1. object 参数概要

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

2. data参数对象

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

逻辑层更新视图层页面数据，须要调用setData 函数。他是Page原型上添加的方法Page.prototype.setData()。
setData 函数调用时改变对应的 this.data 的值（同步），将数据从逻辑层发送到视图层（异步）。

第一个参数 Object(必填项) 以 key，value 的形式表示将 this.data 中的 key 对应的值改变成 value。 key值不须要在this.data 中预先定义。

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

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

setData实现原理及优化建议。

3. 生命周期函数

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

一个页面只会调用一次，能够在 onLoad 中获取打开当前页面所调用的 query 参数。
复制代码

onShow: 页面显示

每次打开页面都会调用一次
复制代码

onReady: 页面初次渲染完成

一个页面只会调用一次，表明页面已经准备稳当，能够和视图层进行交互。
对界面的设置如wx.setNavigationBarTitle请在onReady以后设置。详见生命周期
复制代码

onHide: 页面隐藏

当navigateTo或底部tab切换时调用。
复制代码

onUnload: 页面卸载

当redirectTo或navigateBack的时候调用。
复制代码

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

onPullDownRefresh: 下拉刷新

监听用户下拉刷新事件。
须要在app.json的window选项中或页面配置中开启enablePullDownRefresh。
当处理完数据刷新后，wx.stopPullDownRefresh能够中止当前页面的下拉刷新。
复制代码

onReachBottom: 上拉触底

监听用户上拉触底事件。
能够在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。
在触发距离内滑动期间，本事件只会被触发一次。
复制代码

onPageScroll: 页面滚动

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

onShareAppMessage: 用户转发

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

5. 事件处理函数

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

<!--WXML-->
<view bindtap="viewTap"> click me </view>
复制代码

// js
Page({
  viewTap: function() {
    console.log('view tap')
  }
})
复制代码

模块化机制

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

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

function sayHello(name) {
  console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
  console.log(`Goodbye ${name} !`)
}

module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye
复制代码

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

Page({
  helloMINA: function() {
    common.sayHello('MINA')
  },
  goodbyeMINA: function() {
    common.sayGoodbye('MINA')
  }
})
复制代码

require 暂时不支持绝对路径；
小程序目前不支持直接引入 node_modules ,使用第三方模块时，没法经过require直接导入模块，须要对第三方模块强制导出后才能正常导入。
复制代码

WXS脚本

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

差别点：

wxs 不依赖于运行时的基础库版本，能够在全部版本的小程序中运行。

wxs 与 javascript 是不一样的语言，有本身的语法，并不和 javascript 一致。

wxs 的运行环境和其余 javascript 代码是隔离的，wxs 中不能调用其余 javascript 文件中定义的函数，也不能调用小程序提供的API。

wxs 函数不能做为组件的事件回调。

因为运行环境的差别，在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上两者运行效率无差别。

使用方式：

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

<!--wxml中直接插入WXS标签的代码-->
<wxs module="m1">
var msg = "hello world";
module.exports.message = msg;
</wxs>
<view> {{m1.message}} </view>

<!--wxml中引用对应路径下的WXS文件-->
<wxs module='hello' src='./test.wxs'>
复制代码

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

语法：

WXS有本身的语法，并不与JS彻底一致

变量：[官方文档]
语句：[官方文档]
运算符：[官方文档]
数据类型：[官方文档]
模块：[官方文档]
基础类库：[官方文档]
注释：三种注释 // 1.单行注释; 2.多行注释; 3.结尾注释,即从 /* 开始日后的全部 WXS 代码均被注释

WXML 模板开发 `(与HTML区别)`

[官方文档]

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}"> 获取头像昵称 </button>
    <block wx:else>
      <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>
复制代码

与其余前端MVVM框架或者前端模板引擎相似，WXML中能够进行数据绑定、列表渲染、条件渲染、模板、事件、引用等操做；
全部的HTML标签都不能用，取而代之的是小程序提供的一套标签。官方文档上叫组件，这个组件的写法和HTML标签、模板语言中组件是同样的，由标签名，属性，内容组成，也能够经过class，id，style来添加样式，只不太小程序组件相对来讲拥有更强大的功能，自带UI样式也更丰富,通常的组件支持嵌套，有些嵌套则无效。
div、p、script等标签通过编译后，会保留，但无语义，内容被当成了普通文本处理，属性及style样式一样生效；h1等则报错。
事件系统
须要学习的是事件绑定的写法bind/catch(冒泡与捕获的区别)，事件类型+组件自定义事件，事件对象的内容有区别。
官方文档-事件
文件引入
WXML提供两种文件引入方式，import和include。区别在于：import能够引入定义好的template模板，模板是有做用域的；而include就是拷贝一个公用的代码片断到目标文件中，适合作公共页面片的拆分。

<!--import-->
<import src="../template/a.wxml"/>
<!--include-->
<include src="../include/footer.wxml"/>
复制代码

文件引入在小程序作模块化拆分的过程当中很是重要。

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

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

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

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

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开发三种技术及优劣势；
微信小程序的编译过程，开发者工具的本质；一个看法切入点
小程序实现原理解析：blog.csdn.net/xiangzhihon…
小程序解读
小程序应用场景解读
api工厂

微信小程序开发 我的总结(2018.03)

什么是微信小程序？

介绍： >>百度百科连接

特色：

局限 差别

发展历程：

开发前须要知道的事项

接入流程

注册小程序

小程序信息完善

开发小程序阶段

提交审核和发布

工具：

微信开发者工具

其余开发工具

小程序与H5区别

开发概要

项目开发

新建项目

JSON 配置

小程序配置 app.json

工具配置 project.config.json

页面配置 page.json

页面路由

页面栈

路由触发方式

运行机制

启动机制

销毁机制

再次打开逻辑(待理解)

更新机制

逻辑层 js脚本

页面JS

注册程序

注册程序函数及参数

设置全局变量

注意点

注册页面

1. object 参数概要

2. data参数对象

3. 生命周期函数

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

5. 事件处理函数

模块化机制

WXS脚本

差别点：

使用方式：

语法：

WXML 模板开发 (与HTML区别)

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

组件

API

注意事项

游戏开发

后续

云测试

数据分析

运营、维护等知识

扩展

微信小程序开发我的总结(2018.03)

局限差别

小程序配置 `app.json`

工具配置 `project.config.json`

页面配置 `page.json`

WXML 模板开发 `(与HTML区别)`

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