我的小程序應用開發指南

做者：HerryLo

原文永久連接： https://github.com/AttemptWeb/Record...

小程序依附於各大平臺，支付寶、微信、頭條、百度等小程序，都是在平臺上進行開發，平臺提供對應的技術支持和用戶環境。對於我的開發者，這個仍是蠻方便的，它自己帶有流量屬性，易於傳播。

便捷開發

最近在弄本身的小程序，因此整一篇文章總結一下。若是你已經開發太小程序，這篇文章能夠不用看了。

小程序開發至關的便捷，配合官方文檔，微信小程序文檔、支付寶小程序文檔，便可在本地運行起來，若是隻是單純的展現，那隻須要開發完以後上傳，等待審覈了。只須要一點前端基礎，就可開發一個本身的小程序，有想法的同窗能夠行動起來。

若是在開發中出現問題，也能夠在小程序社區求助，微信小程序社區。

不是在給官方推廣。若是你但願開發屬於本身的應用，小程序是一個能夠快速入手的方案，便捷開發，快速發佈，自帶傳播功能。下面我選中微信小程序講解。

微信原生小程序開發

微信小程序文檔

<!-- 項目目錄結構 -->

|—— component               組件目錄
|—— pages                   page頁面目錄
|   ......more dir           
|   |—— index               index頁面
|   |  |—— index.js         index.js- js邏輯文件     
|   |  |—— index.json       index.json- json配置文件
|   |  |—— index.wxml       index.wxml- wxml頁面結構
|   |  |—— index.wxss       index.wxss- wxss頁面樣式
|—— app.js                  全局js文件
|—— app.json                全局json配置文件
|—— app.wxss                全局樣式文件
|—— project.config.json     項目配置
|—— sitemap.json            爬蟲文件複製代碼

將項目導入到小程序開發工具中，就能夠開始開發了。添加頁面，直接在pages目錄添加新的文件目錄。具體細節參考微信小程序文檔

語法支持：

• 目前最新版本庫已經 支持Es6 / Es7，async/await 和 Promise；
• 開發工具會將代碼轉換成Es5 語法，保證各類機型的樣式適配；
• 部分語法相似於vue和react；

組件支持：

• 提供 template 模板支持, 微信小程序 template模版；
• Component自定義組件支持，組件內部存在生命週期, Component自定義組件；

API支持：

• 能夠調用封裝過的系統原生方法，好比藍牙、網絡信息、掃碼等API方法；
• 常規的方法如：Storage、Reqeuest、Animation、Canvas等，更多能夠查看微信小程序 API；

除小程序原生開發外，固然也可使用框架了，我我的以爲 Taro框架不錯，支持多端小程序開發。

Taro開發

Taro開發文檔，Taro 支持多端開發，包括微信/百度/支付寶/頭條小程序、H五、React-Native，目前我只使用開發過微信小程序和支付寶小程序、H5，其餘的尚未嘗試過。

|—— config                              開發配置文件
|—— dist                                目標文件目錄
|—— src                                 開發目錄
|   |—— actions                         redux action文件
|   |—— constants                       常量文件
|   |—— pages                           page頁面目錄
        ......more dir
|   |   |—— index
|   |   |   |—— index.scss
|   |   |   |—— index.txs
|   |—— reducers                        redux reducers文件
|   |—— store                           redux store文件
|   |—— app.scss                        app全局樣式
|   |—— app.tsx                         app全局js
|   |—— index.html                      html文件
|—— .editorconfig                       editor配置文件         
|—— .eslintrc                           eslint配置文件
|—— global.d.ts                         global配置
|—— tsconfig.json                       ts配置文件
|—— package.json
|—— project.config.json
|—— readme.md複製代碼

語法支持：

• ts 語法支持；
• React語法規範；
• 支持使用 CSS 預編譯器；
• Es6/Es7 語法支持，若是須要更新的語法，能夠在配置config配置；

組件支持：

• react組件式開發，不過最後仍是會編譯成原生小程序；

npm包：

• 支持使用 npm/yarn 管理；
• 可使用 Redux 進行狀態管理；

API：

• 對小程序API、H5 API進行一次封裝，更加方便；

react + ts + npm包，基本就是前端開發正常節奏。不論你開發的那個小程序，只須要運行對應的命令，同時，將dist目錄文件導入到開發工具中，便可看見效果。

taro和原生小程序

原生小程序：上手快，對於接觸過前端開發的同窗，能夠立刻上手，基本不存在技術壁壘。面向微信小程序文檔編程。

Taro開發：react語法規範，react組件開發，ts語法支持，支持redux。對於react有偏好的同窗，強烈推薦。若是你喜歡react，建議使用Taro開發。(易於團隊協做)。

小程序開發問題

• 微信小程序 不可使用cookie

• 微信小程序 非HTTPS的域名不被支持

• 微信小程序 分享API是同步操做，同時回調成功失敗被沒法監聽

• 微信小程序 wx.setStorageSync和wx.getStorageSync的API會頻繁報錯

• 微信小程序 setData數據的1M限制，經過數據數據拆分能夠解決

• 微信小程序 主包的限制2M，致使沒法引入過多的外部文件（使用Taro會依賴npm包）

• 微信小程序 微信開發工具佔用CPU太高，致使電腦卡頓

固然問題確定不止這些，還有微信小程序原生組件、API、官方插件等問題，這裏不一一細講了，對於想作本身小程序的同窗，這些基本夠用。

不過可能會有人問，框架不是尚未講嘛？其實使用Tora開發小程序，你只是在使用不一樣的語法，在編寫小程序，最後，命令工具都會將文件轉換成原生小程序的文件格式。

我的應用

不論你使用哪種方式，開發你的我的應用，最後都會迴歸到產品自己上。經過技術完成本身心目中的我的應用，將應用提供給用戶，這個纔是終極目標。（技術只是手段，產品纔是目標）不過我我的使用Taro開發，算是嚐嚐鮮。

廢話很少說，但願我的項目源碼能夠幫助到你們

github: wxSapp 我的小程序源碼

目前正在整 github: flutter 我的應用 ，有興趣能夠看看。

ps: 順便推一下本身的我的公衆號：Yopai，有興趣的能夠關注，每週不按期更新，分享能夠增長世界的快樂