微信小程序香不香（上）

疫情期间腾讯推出了很多针对疫情的小程序，好比这个 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源创计划”，欢迎正在阅读的你也加入，一块儿分享。