微信小程序香不香（上）

疫情期間騰訊推出了很多針對疫情的小程序，好比這個 2 億資金池計劃，後面騰訊雲又開發了關於疫情管理的小程序，那麼小程序開發簡單嗎？有哪些須要注意的問題？vue

本文介紹微信小程序開發的基本框架選擇和注意事項。react

基本框架

小程序開發框架目前有官方的，也有其餘大廠的框架，這裏我嘗試過了 wepy、uni-app、tarojs，最終選擇了 tarojs，wepy 是官方推出的，保留了原來小程序開發的基本特色，我我的無法接受這種框架，主要是太原生了，管理起來不統一，維護麻煩。uni-app 和 tarojs 都是在原生的基礎上封裝的，uni-app 是 vue 家族的，而 tarojs 是 react 家族的，相對來講我更加喜歡 tarojs 的簡潔，雖而後面開發過程當中發現了很多坑，可是我以爲它依舊是不錯的選擇。git

TaroJS 基本

tarojs 是京東團隊負責維護和開發的，文檔比較完善，可是最近也不怎麼活躍，除了 tarojs 還有 taro-ui 是一套完整的 web 開發框架，小程序開發直接使用 tarojs 便可，目前支持編譯的平臺還挺多的：github

微信小程序web
百度小程序shell
支付寶小程序npm
H5redux
Native(IOS Andriod)小程序

TaroJS Mobx

tarojs 使用 mobx 實現跨組件的通訊機制，對比 redux 和 dva，我對 mobx 是一見傾心，數據流向很是透明、易理解，以前學習 react 以爲比較難的就是跨組件通訊，十分難理解，可是 mobx 讓我感受跨組件通訊並不那麼難，10 分鐘便可上手，那麼在 tarojs 中使用 mobx 的話，你須要安裝：windows

npm i -S mobx@4.8.0 @tarojs/mobx

mobx 基本教程使用說明：戳這裏

強烈建議使用這樣的 inject 注入：

@inject((stores, props) => ({
    counterStore: stores.counterStore
}))

// 相對於 @inject("counterStore") 更好

使用比較顯示的注入 store 的辦法更加有利於後續開發維護。

TaroJS 基本使用

tarojs 自己使用比較簡單，命令也很是的簡潔：

taro init my-project # 建立項目
taro doctor # 診斷項目
npm run dev:weapp # 編譯微信小程序

編譯完成以後直接使用微信小程序開發工具打開項目文件夾便可預覽，也能夠推送到微信上面預覽。

底端菜單導航

使用 tarojs 開發配置小程序最重要的一個配置是 config，目前 config 中能夠配置的見連接。

這裏比較常見的有：pages、windows、tabBar。每個菜單能夠理解成一個 SPA 的容器，那麼若是你有三個菜單的話，那麼就須要註冊三個 pages，樣例以下：

[
    'pages/mechanism/index',
    'pages/equipments/index',
    'pages/team/index',
]

相應的菜單以下：

{
    color: "#666",
    selectedColor: "#b4282d",
    backgroundColor: "#fafafa",
    borderStyle: 'black',
    list: [
        {
            pagePath: "pages/mechanism/index",
            iconPath: "./assets/tab-bar/mechanism.png",
            selectedIconPath: "./assets/tab-bar/mechanism-active.png",
            text: "雲頂之弈"
        },
        {
            pagePath: "pages/team/index",
            iconPath: "./assets/tab-bar/team.png",
            selectedIconPath: "./assets/tab-bar/team-active.png",
            text: "陣容"
        },
        {
            pagePath: "pages/equipments/index",
            iconPath: "./assets/tab-bar/equipment.png",
            selectedIconPath: "./assets/tab-bar/equipment-active.png",
            text: "裝備"
        }]
    }

這裏配置了 page 的地址 pagePath ，圖標，還有包括點擊事後的圖標狀態。

設計原則

設計原則目前參照騰訊官方的說明便可，和微信的配色字體保持一致，官方戳這裏。

針對不一樣的內容給出了不一樣的字體樣式大小：

顏色參照：

小程序註冊注意事項

小程序開發須要結合 tarojs 和微信開發工具聯合使用，另外註冊微信小程序相對比較麻煩，這裏提幾點坑：

一個郵箱只能註冊一個公衆號或者小程序
小程序服務類型一旦肯定，不能改變，好比一旦註冊了小遊戲，那麼不能再更改
須要我的手持身份證
tarojs 不支持原生的 Model 組件

demo 項目參照：https://github.com/smileboywtu/yundingbanlv

下期介紹小程序靈活的內容排版方式。

本文分享自微信公衆號 - 茶歇小棧（smilehackerboy）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。