最近工作正好有閒暇時間，根據公司安排先前期學習調研一下“微信小程式”，以供後期解決相關的運營需求，而本篇文章就是我對此次學習的一次總結。

• 什麼是小程式 ？
• 如何全面具體的學習？
• 註冊與新建小程式
• 認識開發工具
• 目錄結構與程式碼構成
  • JSON 配置檔案
  • WXML 模版檔案
  • WXSS 樣式檔案
  • JS 指令碼檔案
• 小程式的執行流程
• 小程式知識體系導圖
• 小程式開發的重要說明
  • WXSS
  • 模版語法
  • 自定義模版
  • 資料繫結
  • 事件處理
  • 自定義元件
  • 行為 - Behaviors
  • 生命週期函式
  • 作用域
  • 多頁面資料共享
  • 版本庫相容性
  • 使用者許可權
  • WXS
• 開源專案參考
• 下一步計劃

什麼是小程式 ？

個人認為在樣式、功能、使用方式上接近傳統APP並依賴於微信執行環境的 H5頁面就是所謂的“微信小程式”。
微信小程式對比傳統的 APP，它無需安裝，在微信環境中可直接執行，並且依附於微信的生態圈，所以可以被更快速，方便，高效的推廣。

如何全面具體的學習？

學習“微信小程式”，可以開啟“微信公眾平臺·小程式”平臺，裡面有非常詳細的講解。

https://developers.weixin.qq.com/miniprogram/dev/複製程式碼

在這個頁面中，你可以從“介紹”、“設計”、“開發”、“運營”、“資料”等各個方面對小程式進行一個全面整體的認知。

若你是位“開發者”，那麼應該專注學習“設計”，“開發”這兩個方面。在“設計”方面你將學會小程式的互動和更棒的使用者體驗方面。而在“開發”中你將從“簡易教程”、“框架”、“元件”、“API”、“工具”等全方面學習如何開發一款小程式應用。

如果有其它疑問，也可以在 社群 中進行反饋交流。

• 設計
• 開發
  • 簡易教程
  • 框架
  • 元件
  • API
  • 工具

註冊與新建小程式

首先，你需要有一個“微信小程式”的賬號。通過下面的連結，開啟“微信公眾平臺”，然後點選最上面的“立即註冊”，接著選擇“小程式”。

https://mp.weixin.qq.com/複製程式碼

目前小程式的開放範圍主要有“個人”、“企業”、“政府”、“媒體”、“其它組織”這幾個。
如果你是企業級應用，可以直接在企業的微信公眾號中直接新增“微信小程式”，從而無需註冊。
有了小程式賬號後，就可以登入“微信公眾平臺”，進入“微公眾信平臺·小程式”後臺。

在“微公眾信平臺·小程式”後臺中我們便可以根據流程提示開始新建一個小程式專案，小程式專案新建完成後，可以通過左側欄目中的 “設定” - “開發設定” 拿到該小程式的 “AppID”，這一步至關重要，因為我們後面通過開發者工具新建的專案就需要填入 “AppID”。

“AppID” 相當於小程式平臺的一個身份證 ，後續建立小程式專案，或者騰訊雲服務都會使用到它，如果沒有 “appID”，也可以使用開發工具上的測試號。

認識開發工具

“微信小程式”的開發需要特定的開發工具，通過“微信開發者工具”我們可以編譯、除錯、預覽、上傳、釋出小程式頁面，同時還可以管理微信小程式的授權狀態等。

下載 > 微信開發中工具

“微信開發者工具”分為 “beta版” 與 正式版。一般我們使用的都是正式版，而像Git，NPM 之類新功能目前只有“beta版“才支援。
“微信開發者工具”下載安裝完成後，可以選擇建立“小程式專案”，然後輸入小程式的名稱，路徑以及 “appID”，然後點選“確定”即可。
“微信開發者工具”不僅可以開發小程式專案，還可以開發“外掛”、“程式碼片段”等。
“微信開發者工具”主要有以下幾個重要功能點：

• 模擬器：可以設定網路、解析度、縮放以及選擇裝置型別。
• 編輯器：與傳統的編輯器相同，進行程式碼的編輯。
• 偵錯程式：瀏覽器控制檯，與Chrome基本相同主要新增了 appData、WXML、sensor等小程式專屬的選項。
• 編譯、預覽、除錯、遠端除錯。
• 詳情：可以進行“專案設定”，“域名資訊”、“騰訊雲狀態”。
• 其它常用功能：社群、上傳、快取管理、場景值、騰訊雲（提供了一套完整的小程式解決方案，方便新手練習）。

https://developers.weixin.qq.com/miniprogram/dev/devtools/debug.html (更多開發工具的介紹)

“微信開發者工具”常用快捷鍵：

目錄結構與程式碼構成

下面是一個小程式完整的目錄結構圖 (請右擊檢視大圖)。

通過觀察上圖的目錄與檔案，你會發現小程式的程式碼主要有以下幾個檔案型別構成：

• .json
• .WXML
• .wxss
• .js

JSON 配置檔案

.json 檔案是小程式的配置檔案。
在小程式中配置檔案按照應用範圍又分為以下主要四種：

• project.config.json
• app.json
• pages.json
• component.json`

project.config.json
它是開發者工具和小程式專案的共同配置檔案，它可以在多個開發者中維護統一的開發設定和開發環境。例如編輯器的顏色、ES6轉ES5、上傳程式碼時自動壓縮、是否校驗不合法域名、版本庫等等。
當新的開發者下載了開發者工具後，只需要將團隊中的 project.config.json 檔案拷貝到本地小程式的根目錄中即可。

https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html (更多關於project.config.json)

app.json
它是整個小程式應用的全域性配置檔案，可以設定小程式的頁面、視窗、tab欄、網路超時、debug、外掛、分包、多執行緒等。
其中常用到的欄位是 pages、window以及 tabBar。
pages用於配置小程式的頁面路徑，其值是一個陣列，陣列中的第一個元素就是小程式的主頁，並且在開發工具中新增一個路徑時，編輯器會自動建立對應頁面的目錄以及檔案。

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ]
}複製程式碼

PS：路徑中的檔名 "index" 與 "logs" 不要加副檔名，小程式的編譯工具會自動尋找對應的檔案型別進行處理。

window 用於配置視窗的樣式以及標題等。

tabBar也是比較常用的配置，用於設定 tab欄的位置（上、下）以及按鈕的文字，樣式和 icon。

https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE (更多關於app.json)

pages.json
每個頁面都有自己的 pages.json 檔案。
pages.json 檔案可以在全域性配置 app.json 的基礎上對頁面進一步的進行設定。例如導航欄的顏色，標題文字等。
另外 pages.json 還可以通過 usingComponents 欄位來宣告當前頁面引用了那些自定義元件。

https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E9%A1%B5%E9%9D%A2%E9%85%8D%E7%BD%AE (更多pages.json)

componet.json

componet.json 是自定義元件的配置檔案。

{
  "component": true,        // 自定義元件宣告
  "usingComponents": {}     // 可選項，用於引用別的元件
}複製程式碼

WXML 模版檔案

你可以將 WXML 等同於傳統 WEB開發時用到的 html，他們都是用來描述頁面的結構骨架，不同的是 HTML檔案由一個個html標記(Tag)組成，而 WXML則是有與之類似的“元件”組成。
除了在結構特性上與 HTML一致外，WXML 檔案還支援特定的模版語法，資料繫結，事件處理、自定義模版等等。
同樣的 WXML也可以分為頁面的 WXML檔案，自定義模版的 WXML檔案以及自定義元件中的 WXML檔案。

WXSS 樣式檔案

wxss 具有大部分 CSS的功能，所以你可以像 CSS一樣去編寫小程式的樣式檔案。
對於整個小程式公用的樣式，可以放置在 app.wxss 檔案中，而對於頁面專用的樣式，則寫到對應頁面的 pages.wxss檔案中，其次便是自定義元件也會含有自己的 component.wxss檔案。

JS 指令碼檔案

在小程式的指令碼檔案中，我們可以處理事件，響應使用者請求，獲取介面資料，改變資料狀態...並且小程式的指令碼檔案預設支援commonJS規範，可以直接通過 require() 來匯入模組，module.exports 匯出模組，就編碼的角度而言，與我們普通編寫指令碼檔案並沒有什麼太大的區別，如果非要說區別的話，就是小程式中的指令碼可以呼叫小程式內建的一些API介面，例如授權，支付等。

同樣的app.js用於存放全域性的資料和方法，而 pages.js 則存放每個頁面自己的資料和方法，對於元件中的指令碼檔案而言，它儲存的則是元件自己的資料和方法

小程式的執行流程

(請右擊檢視大圖)

當微信客戶端開啟一個小程式的時候，會將整個小程式的程式碼包下載到本地，然後通過讀取 app.json檔案獲取頁面的路徑，並將第一條路徑作為首頁，並根據 app.json 中的配置來初始化小程式視窗的樣式。

緊接著，微信客戶端再將 app.js 裝載進來，執行其中的 App() 方法，例項化一個小程式物件（整個微信小程式也只有一個這樣的例項物件，並且全部頁面共享該物件，你可以在每個頁面使用 getApp()方法來獲取）。

當小程式例項物件建立完成後，會觸發生命週期中的 onLaunch() 函式，然後繼續裝載小程式中的每個頁面（預設便是首頁），在裝載頁面的時候，同樣的會先裝載 pages.json的程式碼，用來初始化頁面與視窗的樣式，然後再裝載 WXML檔案以及其使用到的資源（wxs，模版、元件）來生成頁面結構，一切就緒再載入 wxss獲取頁面樣式，最後再去裝載 .js的指令碼檔案。

當最後的 .js檔案也被裝載進來後， 就會呼叫指令碼中的Page()建構函式，還回一個頁面的例項物件，頁面例項物件建立好後，就會根據其中的 data 資料與 WXML檔案中的內容 一起渲染出最終的頁面，最後頁面渲染完成後，並且在這一過程中，頁面例項會根據不同時期的狀態觸發不同的頁面生命週期函式。

明白小程式的基本執行流程，對後面瞭解小程式執行的生命週期非常有幫助。

小程式知識體系導圖

(請右擊檢視大圖)

小程式開發的重要說明

小程式開發還是很簡單的，像一些 API介面以及元件的使用，在開發手冊上都有詳細列舉，所以這裡我就將我個人認為小程式中比較常用或者是比較重要（跟傳統web開發有點區別）的地方單獨記錄下來。

WXSS

WXSS 是基於 CSS 改進而來的，所以大部分的 CSS寫法也可以套用在 WXSS 上，這裡主要對這兩者重點的區別加以說明。

rpx
新增的相對單位，rpx 預設將螢幕劃分為750個單位。
注意的是：px 在小程式中依然也可以用。

選擇器
WXSS 支援的選擇器相比 CSS要少一些，但是主流的：類、ID、元素，分組、偽類（after，before）、偽元素（:hover 這裡表示元素選中）等選擇器都支援。

模組化樣式
支援 @import "path" 匯入樣式。

內嵌樣式
小程式中元件支援通過 style 屬性來內嵌內聯樣式，並且還可以通過表示式來接收繫結的資料。

<view style="font-size:{{fontSize}}pt"></view>複製程式碼

背景圖
wxss 不支援本地圖片（相對路徑圖片）作為背景圖，對於需要內嵌在 wxss檔案中的圖片，請使用 base64 或者是網上的圖片。
不過，image 元件支援本地圖片

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html (更多關於WXSS)

模版語法

WXML檔案也稱之為“WXML模版”檔案，它與 HTML檔案結構相同，都是有許多結構標記組成，只是在小程式中，這些標記被稱之為“元件”。
WXML檔案與 HTML檔案的不同在於WXML模版支援特定的模版語法，可以直接再模版中進行運算處理。

表示式
WXML支援通過 {{variant}} 表示式來獲取對應頁面指令碼中 data 定義的資料。

#page.wxml
<view>{{names}}</view>複製程式碼

#page.js
Page({
    data:{
        names:"xiaoming"
    }
})複製程式碼

{{}} 表示式不僅可以讀取變數的值，還支援一些常規的運算操作，比如“算數運算”、“三元運算”、“比較運算”、“字串運算”等，另外還可以在表示式中定義陣列、物件等型別的值。

{{a + b}} + {{c}}
{{flag ? true : false}}
{{length > 5}}
{{"hellow" + name}}
{{[zero, 1, 2, 3, 4]}}
{{for: a, bar: b}} | {{...obj1, ...obj2, e: 5}} | {{name,age}}複製程式碼

條件判斷
微信小程式支援在WXML模版檔案中進行條件判斷。

<view wx:if="{{variant > 70 && variant >=90}}">...</view>
<view wx:elif="{{variant <70 && variant >=30}}">...</view>
<view wx:else="{{variant < 30}}">...</view>複製程式碼

迴圈遍歷

WXML模板同樣還支援迴圈遍歷。

<view wx:for="{{arrs}}">
    {{item}} - {{index}}
</view>複製程式碼

其中 arrs 是頁面指令碼 data 中定義的一個陣列，而 item 與 index 都是迴圈體中固定的寫法，分別表示了每次迴圈“項”和每次迴圈的“索引”。

列表渲染

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i"  wx:for-index="a">
  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j" wx:for-index="b">
    <view wx:if="{{i <= j}}">
      {{i}} * {{j}} = {{i * j}}
    </view>
  </view>
</view>複製程式碼

wx:for-item 與 wx:for-index 用來解決多層迴圈巢狀item 與 index 重複的問題。

另外，還有一個 wx:key 的控制屬性，它的取值有 String 與 *this 兩種。
String 可以是 for迴圈中每個 item自身的 property 的名稱，這個 property 的值要保證在整個迴圈遍歷中，相對其它的 item property的值都是唯一的。
*this 則是代表每次迴圈的 item本身，這種表示需要 item 本身是一個唯一的字串或者是數值。

wx:key 要求唯一的原因是當資料改變觸發渲染時，列表中通過 wx:key 指定的選項，不會被重新渲染只會改變位置順序，也就是說不會被移出重新插入，從而能夠保持一種固定的狀態。這樣也更加的節省效能。當然如果你非常確定你的列表是靜態的並且不會發生改變，那麼也無需使用該屬性。

block
當我們在模版中使用控制屬性，總需要將其掛載到一個元件上，這往往就會讓不需要元件加入到頁面渲染中。
為了解決這個問題，小程式提供了另一個特殊的元件：<block> </block>，使用 block 以作為控制屬性的載體，並切不會被渲染到頁面上。

<block wx:for="" >
    <view wx:if=""  ></view>
</block>複製程式碼

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/ (更多關於模版以及模版語法)

自定義模版

WXML支援兩種模版型別，一種是通過 <template> 元件定義的“動態模版”，我們可以向“動態模版”中傳入資料，並運用表示式、模版語法、控制屬性等進行運算。另一中就是“靜態模版”，通過 <include> 元件將靜態的 wxml 檔案引入到指定的位置中。

動態模版

定義模版

<template name="example-tem">
    <view wx:for="{{arrs}}"></view>
</template>複製程式碼

呼叫模版

<template is="example-tem" data="{{arrs:[1,2,3]}}"複製程式碼

外部匯入模版並呼叫

<import src="template/example-tem" /> #引入外部模版
<template is="example-tem" data="{{arrs:[1,2,3]}}" #使用模版複製程式碼

靜態模版

總結
對比 import ,include 只是單純的將一個模版中的所有元件內容拷貝到你使用 include 的位置處(需要注意的是模版中的 template 與 wxs不能被拷貝)。除此之外，import 有自己的作用域，如果要傳遞資料到對應的 template內，須要藉助 data 屬性。

資料繫結

微信小程式支援類似 vue的MVVM模式，即資料（邏輯層）與檢視（渲染層）相互分離，當資料發生改變的時候，可自動的重新整理檢視。
使用起來也非常簡單，通過模版的表示式結合邏輯層的 setData 方法既可以使用。
示例:

<view>{{names}}</view>複製程式碼

Page({
    data:{
        names:"xiaoming"
    },
    onLoad:function(){
        this.setData({names:"xiaohong"});
    }
})複製程式碼

事件處理

事件繫結(支援事件冒泡)

bind:eventName複製程式碼

事件繫結(不支援事件冒泡)

catch:eventName複製程式碼

事件捕獲(可以再冒泡)

capture-bind:eventName複製程式碼

事件捕獲(不會冒泡)

capture-catch複製程式碼

自定義元件

“自定義元件”可以認為是具有特定可複用功能的最小型頁面，“自定義元件”與小程式內建元件一樣可以定製自己的功能，資料還有屬性。
“自定義元件”的目錄結構以及程式碼構成與普通頁面完全一致，其中 *.js是自定義元件的資料方法檔案，*.json是配置檔案。*.wxml是自定義元件的結構模版檔案，*.wxss是自定義元件的樣式檔案。

首先建立元件的目錄，然後建立以下幾個檔案（比如這裡以assambley）為例：

assembly:
    - assembly.wxml
    - assembly.wxss
    - assembly.js
    - assembly.json複製程式碼

接著在 assembly.wxml、assembly.wxss中編寫好你的結構與樣式程式碼，在你的JS檔案中呼叫 Component()建構函式，來例項化一個元件例項：

Component({
    //行為
    behaviors:[],
    //資料
    data: {
        names: Math.random()
    },
    //屬性
    properties: {
        nowIn: String
    },
    //方法
    methods: {
        showData: function(e) {
            let radomNumber = Math.random();
            this.setData({ names: radomNumber });
            //自定義觸發的事件
            this.triggerEvent('assmbleySignal', this.data.names);
        }
    },
    //生命週期函式
    attached: function() {
        this.triggerEvent('assmbleySignal', this.data.names);
    }
});複製程式碼

最後在 assembly.json 中進行元件的宣告。

{
    "component":true
}複製程式碼

這樣一個元件就定義完成了，使用的時候，只需要在用到的頁面或者是其它元件中，對它們的配置檔案新增以下配置即可（例如這裡以index頁面為例）

#index.json
"usingComponents": {
    "assembly": "/pages/component/assembly/assembly"
}複製程式碼

需要注意的是，在 properties 中自定義屬性的時候要用駝峰命名，但是應用在元件上的時候要記得用小寫並且採用 “-” 分割，例如：

properties:{
    nowIn:String
}複製程式碼

使用：

<assembley now-in="index" bind:assmbleySignal="onAssmbleySignal"></assembly>複製程式碼

PS:自定義事件方法 onAssmbleySignal 在index.js中定義。

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component (更多關於元件)

行為 - Behaviors

通過 behaviors（行為）可以讓多個元件之間的“屬性”、“資料”、“方法”、“生命週期”實現共享。
並且 behavior 中還可以引用其它的 behaviors。 屬性會按照先後進行覆蓋，而資料雖然也會覆蓋，但是如果型別是物件則會進行合併，生命週期函式也會順序觸發，多個元件呼叫同一個 behaviors 則生命週期函式也只會執行一次。

module.exports = Behavior({
  behaviors:[],
  properties: {
    behavior_attr: String
  },
  data: {
    behavior_data: {}
  },
  methods: {
    behavior_method: function() {
      console.log('behavior_method')
    }
  },
  attached: function() {
    console.log('behavior-attached');
  }
});複製程式碼

元件中呼叫：

var myBehavior = require('./behavior');

Component({
  behaviors: [myBehavior],
  data: {
    names: Math.random()
  },
  properties: {
    nowIn: String
  },
  methods: {
    showData: function(e) {
        console.log('component showData');
    }
  },
  lifetimes: {
    attached: function() {
      console.log('component attached');

    }
  }
});複製程式碼

behaviors 除了自定義的還有內建的 behaviors

var myBehavior = require('./behavior');

Component({
  behaviors: ['wx://form-field'],
  data: {
    names: Math.random()
  },
  properties: {
    nowIn: String
  }
});複製程式碼

生命週期函式

小程式中的生命週期函式主要有以下幾類：

• 應用例項
• 頁面例項
• 元件例項

小程式應用的生命週期

頁面的生命週期

PS:需要注意的是小程式中tab切換隻是多個頁面的顯示隱藏切換，而不會重新載入，如果使用 navigator等跳轉則每次都會重新載入，顯示，渲染。

元件的生命週期

生命週期函式的預設流程

假設一個小程式（含有頁面，元件）被開啟並且正常執行，那麼它一般都會經過以下生命週期的改變流程：

實際上小程式中還存在另一種生命週期：“行為 Behaviors 的生命週期，不過其常用的也就 attached，因此可以再需要的時候自己去查閱文件。

作用域

在小程式中，JS檔案，模版檔案（動態模板），wxs檔案都有自己的獨立作用域，模組的匯入匯出遵循 CommonJS 規範。

多頁面資料共享

如果想實現多頁面資料共享或者是跨頁面資料互動，可以採用以下方式：

• app.js 定義 golbalData 物件
• 利用 Storage 實現
• 利用頁面傳參來實現頁面間的資料互動。

版本庫相容性

通過 canIUse 可以判斷小程式的API，回撥，引數，元件等是否在當前版本可用。
返回值一般而言都是布林值。

wx.canIUse('openBluetoothAdapter')
wx.canIUse('getSystemInfoSync.return.screenWidth')
wx.canIUse('getSystemInfo.success.screenWidth')
wx.canIUse('showToast.object.image')
wx.canIUse('onCompassChange.callback.direction')
wx.canIUse('request.object.method.GET')複製程式碼

或者你也可以基於能力去判斷：

if(this.setData) //....複製程式碼

使用者許可權

開發者通常向使用者發起許可權授權主要是通過 wx.authorize這個介面實現，但需要注意的是如果呼叫的是“使用者資訊”，則需要使用特定的按鈕元件來引導使用者操作，單純的使用 scope:scope.userinfo 是無法彈出授權彈窗。

<button open-type="getUserInfo">允許獲取個人資訊</button>複製程式碼

另外，每個許可權都有對應的 API介面可以獲取該許可權的的狀態以及詳情，例如：wx.getUserInfo、wx.getLocation等..
如果想檢視全部許可權的狀態，可以通過另一個 API介面獲取當前的許可權列表：wx.getSetting。
對於使用者拒絕授權的介面並且短時間無法再次開啟，我們可以呼叫 wx.openSetting 來讓使用者自己手動操作。

WXS

WXS 程式碼可以編寫在 WXML 檔案中的 <wxs> 標籤內，或者儲存在以 .wxs 為字尾的檔案裡。
WXS 可以看作成小程式自己定義的一套指令碼，它的語法非常類似於原生 JS，但是執行環境並不相同，所以有些 JS的物件或方法無法使用，也不能呼叫小程式的內部 API，其主要目的還是為增強 WXML的模版資料處理能力。
不論是 WXML中的 wxs內的程式碼，還是獨立的 *.wxs檔案中的程式碼，它們都有獨立的作用域。
例項：

<wxs module="mthodName">
    function methodName(value){ return value.split(','); }
    module.exports = methodName; //需要匯出
</wxs>複製程式碼

呼叫模組中的方法

<view wx:for="{{methodName(names)}}"> //names是頁面JS中的data配置的。
    <text>{{item}}</text>
</view>複製程式碼

或者你可以單獨將wxs中的指令碼單獨的儲存在一個檔案中，然後使用wxs引入。

<wxs src="methodName.wxs" module="methodName"></wxs>
<view wx:for="{{methodName(names)}}"> </view>複製程式碼

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/ (更多關於WXS)

開源專案參考

https://github.com/tumobi/nideshop-mini-program (NideShop：基於Node.js+MySQL開發的開源微信小程式商城（微信小程式)
https://github.com/EastWorld/wechat-app-mall (微信小程式商城，微信小程式微店)
https://github.com/ecomfe/echarts-for-weixin (ECharts 的微信小程式版本)
https://github.com/sqaiyan/NeteaseMusicWxMiniApp (仿網易雲音樂APP的微信小程式)
https://github.com/zce/weapp-demo (仿豆瓣電影微信小程式)
https://github.com/myvin/juejin (掘金小程式)
https://github.com/xiehui999/SmallAppForQQ (高仿手機QQ應用程式
https://github.com/liuxuanqiang/wechat-weapp-mall (微信小程式-移動端商城)
https://github.com/web-Marker/wechat-Development (微信小應用-小程式-demo-仿芒果TV)
https://github.com/lanshan-studio/wecqupt (We重郵 - 微信小程式 )
https://github.com/RebeccaHanjw/weapp-wechat-zhihu (微信中的知乎--微信小程式 demo)
https://github.com/eyasliu/wechat-app-music (微信小程式：音樂播放器 )
https://github.com/skyvow/m-mall (微信小程式-小商城前臺（基於 WeUI.wxss、ES6 前端技術開發...）
https://github.com/sesine/wechat-weapp-movie (電影推薦 - 微信小程式)
https://github.com/ahonn/weapp-one (仿 「ONE · 一個」 的微信小程式)
https://github.com/kraaas/timer (小程式版番茄時鐘)
https://github.com/hijiangtao/weapp-newsapp (微信小程式-公眾號熱門文章資訊流)
https://github.com/zhengxiaowai/weapp-github (微信小程式--github)
https://github.com/vace/wechatapp-news-reader (微信小程式 —— 新聞閱讀器)
https://github.com/natee/wxapp-2048 (微信小程式2048)

下一步計劃

在掌握小程式開發的基礎知識後，後面我將會多做小程式的實戰專案，掌握小程式的開發框架、收集小程式常用的外掛、樣式UI庫，以及彙總小程式開發過程的問題收穫。
最後，如果文章中存在錯誤或者是歧義的地方，也或者您有更好的建議，請務必跟我聯絡或者給我留言。
感謝您的批評指正！