小程序從入門到實戰系列（一）

時間 2019-11-17

標籤程序入門實戰系列简体版

原文原文鏈接

前言

隨着小程序日漸火熱，扇貝在近一年投入了大量的精力來作小程序的相關業務，小程序相比於 APP 更容易傳播，由於小程序是基於強大的社交平臺微信的基礎上的，這使其具備極強的傳播能力，甚至能夠在微信朋友圈產生病毒性傳播，一晚上爆紅。javascript

在看到頭腦王者小程序幾乎一晚上爆紅以後，其日活最好時期達到了百萬級別，咱們開始着手開發了單詞大師，以前沒有任何小程序的開發經驗，幾乎是零基礎，而後就開始了小程序的採坑之路。在單詞大師的功能迭代完成後，咱們又開發了另外一個小程序扇貝每日英語，接下來我會主要跟你們分享在這兩個小程序的開發過程當中遇到一些問題以及解決的辦法。由於準備寫一個小的系列文章，因此會從小程序的入門進行講解，後面逐步深刻，最後會有一個開源我的項目的實戰講解，敬請期待。css

準備工做

在此，咱們默認讀者具備必定的前端開發經驗，掌握 css、html、javascript、以及熟悉流行的 MVVM 框架，熟悉打包構建工具。html

微信官方提供了小程序的開發文檔，你能夠點擊這裏前往查看小程序的官方文檔，首先，你須要按照指引，建立一個微信小程序帳號，而後登錄公衆平臺能夠看到你的 appId，而後下載微信開發者工具，就能夠預覽一個微信官方提供的小 demo 了，而後須要用一個下午或者更多的時間去看一遍小程序文檔中的框架、組件、API。前端

至此，你應該能夠經過讀文檔完成如下任務：vue

能夠讀懂 demo 的代碼了。
熟悉小程序的框架、配置、頁面的生命週期事件、小程序數據綁定機制（邏輯層與視圖層的交互、setDate）。
熟悉經常使用組件的使用：view、image、scroll-view、swiper、button、form、textarea、navigater、canvas 等等。
熟悉全部的 api,特別是界面方面的 api 要先比較熟悉。

若是你尚未讀完一遍微信的官方文檔，我建議你先別往下看了，找個時間熟悉了小程序的官方文檔中的框架、組件、api 後，再繼續往下瀏覽吧。java

若是看完了文檔，對於 demo 的代碼還不是很懂，那我簡單帶你看一下 demo 的代碼吧。node

demo 源碼分析

首先看代碼的結構：webpack

├── app.js
├── app.json
├── app.wxss
├── pages
│   ├── index
│   │   ├── index.js
│   │   ├── index.wxml
│   │   └── index.wxss
│   └── logs
│       ├── logs.js
│       ├── logs.json
│       ├── logs.wxml
│       └── logs.wxss
├── project.config.json
└── utils
    └── util.js
複製代碼

這個 demo 的代碼結果很簡單清晰，咱們主要看三個部分：git

項目配置文件 project.config.json

這個文件記錄了你的小程序項目在在開發者工具上的一些配置信息，具體配置參考配置,好比：項目名稱，小程序 appid,基礎庫版本，開發者工具的項目設置，若是你使用了小程序的雲服務，就須要在這裏面配置小程序的 miniprogramRoot 和 qcloudRoot，若是項目有一些自定義的編譯條件，這邊編譯信息也會被記錄到condition:miniprogram 下面。github

小程序的全局 app

app 就是描述小程序總體的一個容器，它會先於頁面被初始化，它主要由三個文件構成：app.js、app.json、app.wxss。demo 代碼裏面 app.js 使用到了 app 生命週期函數 onLaunch，和全局數據容器 globalData。小程序初始化的時候會觸發 app 的 onLaunch 事件，這個方法也會先於 page 的 onLoad 事件被執行。所以，咱們能夠在 onLaunch 方法裏面執行一些小程序初始化時須要完成的事情，好比 demo 裏面作的事情:獲取用戶信息。

由於每一個 page 有屬於本身獨立的 data,若是咱們須要維護一些多個頁面共享的數據，這時候就可使用 globalData,固然你也可使用一些數據管理的庫，好比 redux,vuex.最新的小程序原生開發已經支持 npm 了。這使得引入依賴庫變得很方便了。

app.json 文件用來對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 tab 等,具體查看配置。

小程序頁面 page

小程序的每一個頁面最多由四個文件構成：page.js、page.wxml、page.json、page.wxss。

js 文件用來寫頁面邏輯，wxml 文件相似 html,是小程序的模板文件，json 文件是頁面的配置文件，wxss 是頁面的樣式文件，相似 css 文件。

//index.js
//獲取應用實例
const app = getApp();

Page({
    data: {
        motto: 'Hello World',
        userInfo: {},
        hasUserInfo: false,
        canIUse: wx.canIUse('button.open-type.getUserInfo'),
    },
    //事件處理函數
    bindViewTap: function() {
        wx.navigateTo({
            url: '../logs/logs',
        });
    },
    onLoad: function() {
        if (app.globalData.userInfo) {
            this.setData({
                userInfo: app.globalData.userInfo,
                hasUserInfo: true,
            });
        } else if (this.data.canIUse) {
            // 因爲 getUserInfo 是網絡請求，可能會在 Page.onLoad 以後才返回
            // 因此此處加入 callback 以防止這種狀況
            app.userInfoReadyCallback = res => {
                this.setData({
                    userInfo: res.userInfo,
                    hasUserInfo: true,
                });
            };
        } else {
            // 在沒有 open-type=getUserInfo 版本的兼容處理
            wx.getUserInfo({
                success: res => {
                    app.globalData.userInfo = res.userInfo;
                    this.setData({
                        userInfo: res.userInfo,
                        hasUserInfo: true,
                    });
                },
            });
        }
    },
    getUserInfo: function(e) {
        console.log(e);
        app.globalData.userInfo = e.detail.userInfo;
        this.setData({
            userInfo: e.detail.userInfo,
            hasUserInfo: true,
        });
    },
});
複製代碼

咱們分析一下 index.js 的代碼，經過 getAPP()，獲取全局 app 對象，從而能夠調用 app 裏面的方法，使用 globalData 裏的全局數據。data 裏放着頁面的內部數據，經過 setData()去改變數據，從而改變視圖。這與 MVVM 框架的設計是一致的。與視圖無關的頁面數據不要放在 data 裏面，由於邏輯層和渲染層傳輸數據(經 JSON.stringify 序列化爲字符串)的是比較佔用進程資源的。onLoad 是頁面的初始化生命週期函數，咱們在這個函數裏初始化頁面數據。另外 page 裏剩下的是頁面的點擊事件和自定義函數。

再來看看 index.js 中使用到的 api，首先wx.canIUse用來判斷小程序的 API，回調，參數，組件等是否在當前版本可用。由於小程序的基礎庫隨着微信客戶端版本升級，若是有些用戶沒有升級微信客戶端，那麼一些新的 api、組件特性就沒法使用，這時候咱們可使用 canIUse 作兼容處理。wx.getUserInfo,這個接口用戶獲取用戶的信息，若是用戶未受權過，調用該接口將直接進入 fail 回調，更詳細的入參、返回值、使用場景請查看文檔。wx.navigateTo保留當前頁面，跳轉到應用內的某個頁面，使用 wx.navigateBack 能夠返回到原頁面。這兒涉及到小程序的頁面路由，小程序的頁面間有哪幾種路由跳轉方式，此時的頁面棧是什麼樣的，以及分別觸發了兩個頁面的那些生命週期，具體參加路由文檔

demo 中 index 頁面並無配置 index.json 文件，頁面的配置只能設置 app.json 中部分 window 配置項的內容，頁面中配置項會覆蓋 app.json 的 window 中相同的配置項。具體參見配置。

小程序框架選擇

因爲小程序的原生開發存在太多的不方便：不支持 npm(現已經支持)，蹩腳的模板語法、文件過於分散、request 併發問題、api 非 promise、缺乏配套的狀態管理庫。咱們最早接觸的是wepy 框架，這個框架解決了大部分原生開發存在的問題，採用類 Vue.js 的語法，減少開發小程序的語法學習成本，支持組件化，支持 npm,支持 promise,支持一些通用的 css、js 編譯器和圖片壓縮插件。因此，咱們的單詞大師小程序就使用了 wepy 框架。

可是很快美團的mpvue 框架橫空出世，它給咱們帶來了什麼呢？

完全的組件化開發能力：提升代碼複用性

完整的 Vue.js 開發體驗

方便的 Vuex 數據管理方案：方便構建複雜應用

快捷的 webpack 構建機制：自定義構建策略、開發階段 hotReload

支持使用 npm 外部依賴

使用 Vue.js 命令行工具 vue-cli 快速初始化項目

H5 代碼轉換編譯成小程序目標代碼的能力

是否是很驚喜，是否是很震撼？這徹底就是 Vue 開發 web 應用的那一套啊，對於熟悉 Vue 的開發者來講基本就是零學習成本開發微信小程序。mpvue 相比於 wepy 的優點立馬顯現出來，首先，mpvue 擁有完整的 vue 語法規範（雖然小部分語法不能用），配套的數據管理 Vuex，集成 webpack 打包構建工具（wepy 使用本身的一個打包構建工具，顯然沒有 webpack 強大），還有方便 h5 和小程序複用項目代碼。

最後在對比一下兩個框架：

	mpvue	wepy
語法	vuejs	類 vuejs
標籤	html+小程序	小程序
組件化	Vue 規範	自定義組件規範
自動構建	webpack	框架內置
學習成本	vue+小程序	vue+wepy+小程序
數據管理	vuex	redux

wepy 項目建立和使用

安裝最新的 wepy-cli，並使用標準的模板初始化項目：

npm install -g wepy-cli
wepy init standard myproject
複製代碼

初始化項目會須要你在終端輸入項目名稱，小程序 appid，描述，是否啓用 redux,是否使用 eslint.

使用wepy list能夠列出能夠選擇的其餘初始化項目模板。

切換至項目目錄

cd myproject
複製代碼

安裝依賴

npm install
複製代碼

開啓實時編譯

npm run dev
複製代碼

wepy 項目的目錄結構

.
├── package.json
├── project.config.json
├── src
│   ├── app.wpy
│   ├── components
│   │   ├── counter.wpy
│   │   ├── group.wpy
│   │   ├── groupitem.wpy
│   │   ├── list.wpy
│   │   ├── panel.wpy
│   │   └── wepy-list.wpy
│   ├── index.template.html
│   ├── mixins
│   │   └── test.js
│   ├── pages
│   │   └── index.wpy
│   └── store
│       ├── actions
│       │   ├── counter.js
│       │   └── index.js
│       ├── index.js
│       ├── reducers
│       │   ├── counter.js
│       │   └── index.js
│       └── types
│           ├── counter.js
│           └── index.js
└── wepy.config.js
複製代碼

爲了方便咱們開發，咱們還要在模板的基礎上改造一下。由於產品開發至少會有一個開發環境，一個生產環境，因此，咱們能夠新建一個 config 目錄，添加兩個環境的配置文件。

首先 package.json 中指定 NODE_ENV 環境變量值：

"scripts": {
        "start": "cross-env NODE_ENV=local npm run dev",
        "preview": "cross-env NODE_ENV=preview wepy build --no-cache",
        "dev": "wepy build --watch",
        "build": "cross-env NODE_ENV=production wepy build --no-cache",
        "clean": "find ./dist -maxdepth 1 -not -name 'project.config.json' -not -name 'dist' | xargs rm -rf",
        "test": "echo \"Error: no test specified\" && exit 1"
    },
複製代碼

而後在 wepy.config.js 中配置 resolve：alias:

const env = process.env.NODE_ENV || 'production';
//
module.exports = {
 resolve: {
        alias: {
            ... //other alias
            '@config': path.join(__dirname, `src/config/config.${env}.js`),
        },
        modules: ['node_modules'],
    },
}
複製代碼

這樣你 import * from '@config',就會根據當前的環境加載不一樣的 config 了。

詳細指引參考wepy 官方文檔;