1. 程式人生 > >微信小程序學習

微信小程序學習

第一個 let 專用 png pro names 功能點 behaviors 掌握

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


  • 什麽是小程序 ?
  • 如何全面具體的學習?
  • 註冊與新建小程序
  • 認識開發工具
  • 目錄結構與代碼構成
    • 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版” 與 正式版。一般我們使用的都是正式版,而像GitNPM 之類新功能目前只有“beta版“才支持。
“微信開發者工具”下載安裝完成後,可以選擇建立“小程序項目”,然後輸入小程序的名稱,路徑以及 “appID”,然後點擊“確定”即可。
“微信開發者工具”不僅可以開發小程序項目,還可以開發“插件”、“代碼片段”等。
“微信開發者工具”主要有以下幾個重要功能點:

  • 模擬器:可以設置網絡、分辨率、縮放以及選擇設備類型。
  • 編輯器:與傳統的編輯器相同,進行代碼的編輯。
  • 調試器:瀏覽器控制臺,與Chrome基本相同主要新增了 appData、WXML、sensor等小程序專屬的選項。
  • 編譯、預覽、調試、遠程調試。
  • 詳情:可以進行“項目設置”,“域名信息”、“騰訊雲狀態”。
  • 其它常用功能:社區、上傳、緩存管理、場景值、騰訊雲(提供了一套完整的小程序解決方案,方便新手練習)。

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

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

鍵名 說明
Ctrl+B 編譯項目(焦點在開發工具中)
Ctrl+R 編譯項目(焦點不在開發工具中)
Ctrl+Shift+P 預覽項目
Shift+Alt+F 格式化代碼

目錄結構與代碼構成

下面是一個小程序完整的目錄結構圖 (請右擊查看大圖)。

技術分享圖片

通過觀察上圖的目錄與文件,你會發現小程序的代碼主要有以下幾個文件類型構成:

  • .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、插件、分包、多線程等。
其中常用到的字段是 pageswindow以及 tabBar
pages用於配置小程序的頁面路徑,其值是一個數組,數組中的第一個元素就是小程序的主頁,並且在開發工具中新增一個路徑時,編輯器會自動創建對應頁面的目錄以及文件。

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ]
}

PS:路徑中的文件名 "index" 與 "logs" 不要加擴展名,小程序的編譯工具會自動尋找對應的文件類型進行處理。

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

屬性 說明 取值
navigationBarBackgroundColor 導航欄背景顏色 HEX
navigationBarTextStyle black / white
navigationBarTitleText 導航欄標題文字內容 text
backgroundColor 窗口的背景色 HEX

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 中定義的一個數組,而 itemindex 都是循環體中固定的寫法,分別表示了每次循環“項”和每次循環的“索引”。

列表渲染

<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-itemwx:for-index 用來解決多層循環嵌套itemindex 重復的問題。

另外,還有一個 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 的位置處(需要註意的是模版中的 templatewxs不能被拷貝)。除此之外,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.wxmlassembly.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
  }
});

生命周期函數

小程序中的生命周期函數主要有以下幾類:

  • 應用實例
  • 頁面實例
  • 組件實例

小程序應用的生命周期

狀態名 說明
onLuanch 小程序實例初始化
onShow 小程序啟動,或從後臺進入前臺顯示
onHide 小程序隱藏,或從前臺進入後臺
onError 當小程序發生腳本錯誤,或者 api 調用失敗時
onPageNotFound 當小程序出現要打開的頁面不存在的情況

頁面的生命周期

狀態名 說明
onLoad 頁面資源加載完畢
onShow 頁面顯示(但不代表頁面已經繪制完畢)
onReady 頁面初次渲染完成
onHide 頁面隱藏
onUnload 頁面被卸載

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

組件的生命周期

狀態名 說明
created 創建組件實例,註意此時無法使用 this.setData 方法
attached 組件實例進入頁面節點樹時執行
ready 組件布局完成後執行,此時可以獲取節點信息(使用 SelectorQuery
moved 組件實例被移動到節點樹另一個位置時執行
detached 組件實例被從頁面節點樹移除時執行

生命周期函數的默認流程

假設一個小程序(含有頁面,組件)被打開並且正常運行,那麽它一般都會經過以下生命周期的改變流程:

技術分享圖片

實際上小程序中還存在另一種生命周期:“行為 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 可以看作成小程序自己定義的一套腳本,它的語法非常類似於原生 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庫,以及匯總小程序開發過程的問題收獲。
最後,如果文章中存在錯誤或者是歧義的地方,也或者您有更好的建議,請務必跟我聯系或者給我留言。
感謝您的批評指正!

微信小程序學習