個人小程式應用程式開髮指南

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

便捷開發

---

最近在弄自己的小程序，所以整一篇文章總結一下。如果你已經開發過小程序，這篇文章可以不用看了。

小程式開發相當的便捷，配合官方文檔，微信小程式文檔、支付寶小程式文檔，即可在本地運行起來，如果只是單純的展示，那隻需要開發完之後上傳，等待審核了。只需要一點前端基礎，就可以開發一個自己的小程序，有想法的同學可以行動。

如果在開發中出現問題，也可以在小程式社群求助，微信小程式社群。

不是在給官方推廣。如果你希望開發屬於自己的應用，小程式是一個可以快速入手的方案，方便開發，快速發布，自備傳播功能。 下面我選取微信小程式講解。

微信原生小程式開發

<!-- 项目目录结构 -->

|—— 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 支援多端開發，包括微信/百度/支付寶/頭條小程式、H5、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元件開發，t​​s語法支持，支援redux。對於react有偏好的同學，強烈推薦。如果你喜歡react，建議使用Taro開發。 (易於團隊協作)。

小程式開發問題

微信小程式不可以使用cookie

微信小程式非HTTPS的網域不支援

微信小程式分享API是同步操作，同時回呼成功失敗被無法監聽

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

微信小程式setData資料的1M限制，透過資料資料分割可以解決

微信小程式主套件的限制2M，導致無法引入過多的外部檔案（使用Taro會依賴npm套件）

微信小程式微信開發工具佔用CPU過高，導致電腦卡頓

當然問題肯定不只這些，還有微信小程式原生元件、API、官方外掛程式等問題，這裡不一一細講了，對於想做自己小程式的同學，這些基本夠用。

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

個人應用程式

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

廢話不多說，希望個人專案原始碼可以幫助大家

github: wxSapp 個人小程式原始碼

推薦教學： 《微信小程式》

以上是個人小程式應用程式開髮指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！