以下全文使用wxapp指代小程序應用
1.項目介紹
wxapp是基於uni-app，使用vue.js語法進行開發的微信小程序項目。
2.開發工具
devtools：微信開發者工具。安裝完畢使用開發者帳號微信登陸微信開發者工具且到開發工具的安全設置中開放服務埠HBuilderX：由DCloud推出的web開發IDE。安裝完畢需要修改運行配置中正確的微信開發者工具安裝路徑推薦插件：NPM，內置終端，uni-app編譯，eslint-js，js壓縮，css壓縮，less編譯，scss/sass編譯3.開發前的準備
3.1 小程序帳號註冊
到微信公眾平臺註冊小程序帳號。
3.1 開發環境搭建
Node.js：下載並安裝Node.js及npm。
vue-cli：全局安裝vue-cli腳手架。
npm install -g @vue/cli複製代碼3.2 創建uni-app應用
vue create -p dcloudio/uni-preset-vue wxapp複製代碼創建成功後修改manifest.json，配置已註冊的小程序appId
3.3 uni-ui庫
uni-ui是DCloud提供的基於vue組件，flex布局的跨端ui框架。
easycom組件模式：按照配置規則全局引入註冊組件，而不需要另外引入，註冊即可使用。優點：按需打包
uni-ui安裝（vue-cli + easycom）npm i @dcloudio/uni-ui --savenpm i sass -Dnpm i sass-loader -D複製代碼編輯根目錄下的pages.json，添加easycom節點// pages.json{ "easycom": { "autoscan": true, "custom": {// uni-ui 配置規則 "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue" } },// 其它配置 pages: [// ... ]}複製代碼4.項目文件目錄介紹
api：restful請求目錄，使用Fly.js發送http請求。components：自定義全局組件目錄。i18n：國際化目錄。static：靜態資源目錄，由於小程序對包大小的限制，需要考慮將必要的靜態資源遷移至oss伺服器。store：vuex狀態管理目錄。utils：自定義工具類目錄。baseURLConfig.js：自定義環境配置文件。pages：主包頁面目錄。App.vue：主組件，所有頁面的入口文件，用來配置全局樣式及監聽應用生命周期。但本身不是頁面，不能編寫視圖元素。main.js：項目的入口文件，主要作用為初始化vue實例，定義全局組件。manifest.json：wxapp應用的配置文件。package.json：wxapp應用擴展節點配置。pages.json：wxapp應用頁面管理全局配置文件。5.開發流程
以下開發流程均以使用HBuilderX為例。
主包及子包頁面和組件開發流程相同。頁面開發使用pages目錄，組件開發使用components目錄。
5.1 組件開發
選取components目錄下的目標位置右鍵單擊選擇新建組件，推薦選擇使用scss模板頁面。組件邏輯代碼開發，可按需引入相關的工具類，Service，其它組件等。5.2 頁面開發
選取pages目錄下的目標位置右鍵單擊選擇新建頁面，推薦選擇使用scss模板頁面。在pages.json的pages節點下添加頁面配置註冊頁面。若上一步已勾選在pages.json中註冊會在頁面創建時自動添加配置，可省略手動配置直接對其進行編輯。{// ...其它配置// 頁面配置，規定節點的第一項為應用的入口頁面（即首頁） "pages": [ { "path": "pages/xxx", // 頁面路徑 "style": {} // 頁面窗口表現 } ]}複製代碼頁面邏輯代碼開發，可按需引入相關的工具類，Service，組件等。不論是組件或頁面，大多數情況下需要在<style>標籤上添加scoped屬性，限制樣式僅應用到父元素及其子元素（即當前vue實例），解決樣式私有的問題，防止影響覆蓋全局的公共樣式。
6.補充
6.1 自定義組件引入及註冊
<template> // ...</template><script> // 1.引入組件 import xxx from '@/components/xxx' export default { // 2.組件註冊 components: { xxx }, // ... }</script><style lang="scss" scoped>/* * ... */</style>複製代碼6.2 tabBar配置
若希望在應用底部添加tab進行切換，推薦使用tabBar配置。在pages.json中提供了tabBar配置，方便快速開發及性能的提升。
6.3 路由與頁面跳轉
uni-app提供了一系列路由與頁面跳轉的api與路由相關的個性化配置，方便開發人員進行快速開發。
6.4 分包優化之subPackages和preloadRule
由於小程序的體積限制和資源加載限制，需要利用小程序的分包加載機制對應用進行拆分，配置分包加載規則。
當小程序啟動時，默認會加載主包並打開主包內的頁面，當用戶進入到分包的某個頁面時，自動加載分包，完成後再進行展示。分包配置可以有效減輕應用啟動時加載的js數量，提升應用的啟動速度。
subPackages為分包配置節點，它接收一個對象數組，數組的每一項都對應應用的一個子包，對象屬性配置如下表：
preloadRule為分包預加載配置節點，當打開小程序某個頁面時，自動預加載需要的子包，提升進入子包頁面時的啟動速度。它接收一個對象，屬性名稱key是當前頁面的路徑，屬性值value是子包預加載的配置。子包預加載配置如下表：
小程序分包操作步驟：
在應用的根目錄下新建子包，目錄結構如下wxapp：components：子包自定義組件目錄。pages：子包頁面目錄。static：子包靜態資源目錄。components：子包自定義組件目錄。pages：子包頁面目錄。static：子包靜態資源目錄。account_module：account子包目錄。order_module：order子包目錄。修改pages.json分包配置{// ...// 分包配置 "subPackages": [ { "root": "account_module", "name": "account_module", "pages": [ { "path": "pages/***", "style": {} }// ... ] }, { "root": "order_module", "name": "order_module", "pages": [ { "path": "pages/***", "style": {} }// ... ] } ],// 子包預加載規則配置 "preloadRule": { "pages/***": { "network": "all", "packages": ["account_module"] }, "pages/***": { "network": "all", "packages": ["order_module"] }, "pages/***": { "network": "all", "packages": ["account_module", "order_module"] } }}複製代碼7.預覽及發布
在小程序整個開發過程中支持實時預覽。通過打開微信開發者工具的模擬器進行預覽，通過HBuilderX發布新的小程序體驗版。
前提條件：按照要求（第二節及第三節）安裝及配置開發工具。
7.1 調試及預覽
點擊HBuilderX頂部導航欄的運行->運行到小程序模擬器->微信開發者工具或發行->小程序-微信，喚起微信開發者工具，並自動打開小程序完成調試預覽。
運行及發行區別：
發行模式會對項目進行壓縮，完成後的應用體積更小，運行則不會。運行模式打開小程序，模擬器可以實時預覽，不必重複運行，發行只會壓縮並打開當前狀態的項目。通常情況下，當處在開發階段時多使用運行模式，便於開發調試。開發完成後，使用發行模式打開微信開發者工具，並藉助預覽及真機調試功能測試小程序功能及兼容性。
7.2 發行
點擊HBuilderX頂部導航欄的發行->小程序-微信，打開微信開發者工具。點擊微信開發者工具右上角的上傳，輸入正確的版本號，完成小程序體驗版的發布。8.附錄
uni-app：https://uniapp.dcloud.net.cn/vue-cli：https://cli.vuejs.org/zh/guide/vue.js：https://cn.vuejs.org/v2/guide/vuex：https://vuex.vuejs.org/zh/node.js：https://nodejs.org/zh-cn/fly.js：https://github.com/wendux/fly