前言

從16年微信小程序內測的時候至今，微信小程序用實踐證明了自己的創新和價值，微信小程序的規則也在社區的影響下變得更加完善。

但是不得不說，用慣了VSCode，官方的開發工具確實不怎么好用。之前沒有接觸過小程序開發，這次用了一兩個星期的時間，大致熟悉了開發模式和流行的開發框架：Vue規范的uni-app、類Vue規范的wepy、近Vue寫法的mpvue、O2實驗室遵循React規范的Taro。

因為個人比較熟悉React和TypeScript，最后選擇了Taro。不得不說使用框架開發小程序真的太爽了，感謝下Taro的開發者們。他能解決以下幾個問題，編輯器、語言、調試、UI：

能使用VSCode編輯器開發，不用去適應小程序的編輯器，配合格式化插件Prettier，能有效控制團隊代碼規范。以及各種其他插件，各種方便。偷懶是程序員進步的根本動力。

React+TypeScript能大大的提高開發效率和降低Bug率。真的是大大的提高，能使用jsx寫模版和TypeScript的智能提示。如果你熟悉React的話，能輕松無痛過渡到小程序開發。

調試，還是要吐槽一下原生的開發工具，UI調試的時候真的太難用了：元素選擇慢；直接寫css沒有代碼提示；而且無法查看偽元素（after、before）但是css中是可以寫的。平時用慣了Chrome DevTools，對這種降低效率的工具有點無法接受。好在Taro可以編譯H5和微信小程序，這樣可以同時開啟微信小程序調試和Chrome DevTools，兩端一起預覽，雖然會有一些差別，但是能及時發現以做好兼容小程序。

UI框架，其他的UI框架沒有怎么了解，主要說一些Taro-UI，他包含了大部分交互所需組件。通過覆蓋scss，基本上可以只保留交互效果，完全定制屬于自己的主題，除了官方說的定制方法，完全可以自己定制到 類名 級別，原理就是選擇器優先級覆蓋，但是會有一些問題，比如升級UI框架版本的話，可能有影響。同時因為微信組件樣式作用域的關系，覆蓋代碼要放在pages層級。

---

Demo

Taro 框架(v1.2.17)，React+TypeScript 語法，Mobx 管理數據，Taro UI 框架。

Mobx 管理數據，這是 React 流行的數據管理方案之一，簡單、可擴展的狀態管理。需要注意是Taro使用的是 Mobx 4 版本，在對象動態寫入等地方有些坑。
同時項目使用 TypeScript 。可能大部分前端開發人員沒有接觸過強類型語言，自從我使用之后就放不下了，也一直在團隊中安利。TypeScript 的學習難度不算太高，但是收獲絕對很值。

Taro 框架支持TypeScript，所以在調用wx的api的時候會有類型提示，接口規范也基本支持Promise方式。可能社區用TypeScript+Mobx開發的還是比較少，所以有一些框架上的問題，項目過程中也提了幾個issue和PR。將demo分享出來也是希望更多的人在選擇的時候有個參考，同時也能對社區有些貢獻。

leidenglai/weapp-taro-typescript?github.com

目錄結構

— config/ // 構建配置，Taro默認生成 — dist/ // 小程序構建緩存和輸出目錄 — src/ // 項目文件assets/ // 所有資源文件 如圖片、字體、樣式文件components/// 組件目錄interface/// 公共接口libs // 手動導入的庫，此目錄不會進行代碼檢查和壓縮編譯pages/ // 項目頁面目錄，對應微信小程序的pages services/// 與后端交互的接口請求文件stores/ // mobx數據管理utils/ // 一些中間件、插件方法等app.scss// 項目的配置app.tsx// 應用入口 - .eslintrc.json // eslint配置 - .stylelintrc.json // stylelint配置 - tsconfig.json // ts語言的配置 — package.json // 項目描述文件 — README.md // 項目文檔 - project.config.json // 小程序配置文件

Taro 框架

Taro 介紹 · Taro

Taro是一套遵循React語法規范的多端開發解決方案。現如今市面上端的形態多種多樣，Web、React-Native、微信小程序等各種端大行其道，當業務要求同時在不同的端都要求有所表現的時候，針對不同的端去編寫多套代碼的成本顯然非常高，這時候只編寫一套代碼就能夠適配到多端的能力就顯得極為需要。
使用Taro，我們可以只書寫一套代碼，再通過Taro的編譯工具，將源代碼分別編譯出可以在不同端（微信/百度/支付寶/字節跳動小程序、H5、React-Native 等）運行的代碼。

開發環境

進入項目根目錄，安裝依賴包：

## 安裝依賴包 yarn## 小程序調試模式 yarn dev:weapp## h5 yarn dev:h5

開發時可以先在 h5 模式下完成大部分業務邏輯和 UI 調試，然后同時開啟小程序和 H5 模式，對照查看效果，調試頁面。

構建發布和問題多看看Taro官方文檔，有問題上github看看issue。

注意事項

Taro只是React語法糖，并不是真正的React框架

Taro 的生命周期/路由 和setState在小程序端其實是包裝成 React API 的一層語法糖，我們把這層包裝稱之為 Taro 運行時框架。幾乎所有 Taro 提供的 API 和語法糖最終都是通過小程序本身提供的 API 實現的。

2. 開發之前一定要多看幾遍Taro官方文檔的注意事項和進階指南

3. Taro官方對Mobx的引入的例子漏了一點。其實多頁面的應用，只需在入口文件的render函數導入全部store即可，不需要引入Page組件。這樣在全局所有頁面中都可以注入store。

const store = {commonStore: new CommonStore(),userStore: new UserStore() }class App extends Component {// ...render () {return <Provider store={store} />} }

4. （自1.3.6后已支持）框架使用的是React語法糖，所有關于組件的props，使用的是小程序的Component構造器properties屬性，但是properties是Object類型，所以組件的props不能是Mobx的Observable，否則會被轉化為普通的對象或者值。解決方法是傳入關鍵信息如key字段，然后在子組件中注入Store，獲取Observable數據。

---

資源

• 項目配置 解釋 package.json 文件 — JavaScript 標準參考教程（alpha）
• Taro 中文文檔：Taro 介紹 · Taro
  Taro UI：Taro UI | O2Team
• React 官方中文文檔：React 是一個用于構建用戶界面的 JavaScript 庫
• Mobx 中文文檔：MobX 介紹 · MobX 中文文檔
• TypeScript 中文文檔：文檔簡介 · TypeScript中文網 · TypeScript——JavaScript的超集
• Lodash.js 中文文檔： https://www.html.cn/doc/lodash/
• scss：Sass 參考手冊 | Sass 中文文檔

---

總結

以上是生活随笔為你收集整理的小程序和vue语法对比_React语法开发微信小程序 Demo的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。