wxapp是基于uni-app，使用vue.js語(yǔ)法進(jìn)行開發(fā)的微信小程序項(xiàng)目。

• devtools：微信開發(fā)者工具。下載

  安裝完畢使用開發(fā)者賬號(hào)微信登陸微信開發(fā)者工具且到開發(fā)工具的安全設(shè)置中開放服務(wù)端口

• HBuilderX：由DCloud推出的web開發(fā)IDE。下載

  安裝完畢需要修改運(yùn)行配置中正確的微信開發(fā)者工具安裝路徑

  推薦插件：NPM，內(nèi)置終端，uni-app編譯，eslint-js，js壓縮，css壓縮，less編譯，scss/sass編譯

到微信公眾平臺(tái)注冊(cè)小程序賬號(hào)。

Node.js：下載并安裝Node.js及npm。參考文檔

vue-cli：全局安裝vue-cli腳手架。參考文檔

npm install -g @vue/cli
復(fù)制代碼

vue create -p dcloudio/uni-preset-vue wxapp
復(fù)制代碼

創(chuàng)建成功后修改manifest.json，配置已注冊(cè)的小程序appId

uni-ui是DCloud提供的基于vue組件，flex布局的跨端ui框架。

easycom組件模式：按照配置規(guī)則全局引入注冊(cè)組件，而不需要另外引入，注冊(cè)即可使用。

優(yōu)點(diǎn)：按需打包

1. uni-ui安裝（vue-cli + easycom）

   npm i @dcloudio/uni-ui --save
      
   npm i sass -D
      
   npm i sass-loader -D
   復(fù)制代碼

2. 編輯根目錄下的pages.json，添加easycom節(jié)點(diǎn)

   // pages.json
   {
     "easycom": {
     	"autoscan": true,
       "custom": {
         // uni-ui 配置規(guī)則
         "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
       }
     },
        
     // 其它配置
     pages: [
     	// ...
     ]
   }
   復(fù)制代碼

• api：restful請(qǐng)求目錄，使用Fly.js發(fā)送http請(qǐng)求。
• components：自定義全局組件目錄。
• i18n：國(guó)際化目錄。
• static：靜態(tài)資源目錄，由于小程序?qū)Π笮〉南拗?，需要考慮將必要的靜態(tài)資源遷移至oss服務(wù)器。
• store：vuex狀態(tài)管理目錄。參考文檔
• utils：自定義工具類目錄。
  • baseURLConfig.js：自定義環(huán)境配置文件。
• pages：主包頁(yè)面目錄。
• App.vue：主組件，所有頁(yè)面的入口文件，用來(lái)配置全局樣式及監(jiān)聽?wèi)?yīng)用生命周期。但本身不是頁(yè)面，不能編寫視圖元素。
• main.js：項(xiàng)目的入口文件，主要作用為初始化vue實(shí)例，定義全局組件。
• manifest.json：wxapp應(yīng)用的配置文件。
• package.json：wxapp應(yīng)用擴(kuò)展節(jié)點(diǎn)配置。
• pages.json：wxapp應(yīng)用頁(yè)面管理全局配置文件。

以下開發(fā)流程均以使用HBuilderX為例。

主包及子包頁(yè)面和組件開發(fā)流程相同。頁(yè)面開發(fā)使用pages目錄，組件開發(fā)使用components目錄。

5.1 組件開發(fā)

1. 選取components目錄下的目標(biāo)位置右鍵單擊選擇新建組件，推薦選擇使用scss模板頁(yè)面。
2. 組件邏輯代碼開發(fā)，可按需引入相關(guān)的工具類，Service，其它組件等。

5.2 頁(yè)面開發(fā)

1. 選取pages目錄下的目標(biāo)位置右鍵單擊選擇新建頁(yè)面，推薦選擇使用scss模板頁(yè)面。

2. 在pages.json的pages節(jié)點(diǎn)下添加頁(yè)面配置注冊(cè)頁(yè)面。若上一步已勾選在pages.json中注冊(cè)會(huì)在頁(yè)面創(chuàng)建時(shí)自動(dòng)添加配置，可省略手動(dòng)配置直接對(duì)其進(jìn)行編輯。參考文檔

   {
     // ...其它配置
        
     // 頁(yè)面配置，規(guī)定節(jié)點(diǎn)的第一項(xiàng)為應(yīng)用的入口頁(yè)面（即首頁(yè)）
     "pages": [
     	{
      		"path": "pages/xxx", // 頁(yè)面路徑
         "style": {}          // 頁(yè)面窗口表現(xiàn)
       }
     ]
   }
   復(fù)制代碼

3. 頁(yè)面邏輯代碼開發(fā)，可按需引入相關(guān)的工具類，Service，組件等。

不論是組件或頁(yè)面，大多數(shù)情況下需要在 復(fù)制代碼

6.2 tabBar配置

若希望在應(yīng)用底部添加tab進(jìn)行切換，推薦使用tabBar配置。在pages.json中提供了tabBar配置，方便快速開發(fā)及性能的提升。參考文檔

6.3 路由與頁(yè)面跳轉(zhuǎn)

uni-app提供了一系列路由與頁(yè)面跳轉(zhuǎn)的api與路由相關(guān)的個(gè)性化配置，方便開發(fā)人員進(jìn)行快速開發(fā)。參考文檔

6.4 分包優(yōu)化之subPackages和preloadRule

由于小程序的體積限制和資源加載限制，需要利用小程序的分包加載機(jī)制對(duì)應(yīng)用進(jìn)行拆分，配置分包加載規(guī)則。

當(dāng)小程序啟動(dòng)時(shí)，默認(rèn)會(huì)加載主包并打開主包內(nèi)的頁(yè)面，當(dāng)用戶進(jìn)入到分包的某個(gè)頁(yè)面時(shí)，自動(dòng)加載分包，完成后再進(jìn)行展示。分包配置可以有效減輕應(yīng)用啟動(dòng)時(shí)加載的js數(shù)量，提升應(yīng)用的啟動(dòng)速度。

subPackages為分包配置節(jié)點(diǎn)，它接收一個(gè)對(duì)象數(shù)組，數(shù)組的每一項(xiàng)都對(duì)應(yīng)應(yīng)用的一個(gè)子包，對(duì)象屬性配置如下表：

屬性名稱	類型	是否必填	描述
root	String	是	子包根目錄，相對(duì)路徑
pages	Array	是	子包頁(yè)面配置，同主包pages
name	String	是	子包名稱

preloadRule為分包預(yù)加載配置節(jié)點(diǎn)，當(dāng)打開小程序某個(gè)頁(yè)面時(shí)，自動(dòng)預(yù)加載需要的子包，提升進(jìn)入子包頁(yè)面時(shí)的啟動(dòng)速度。它接收一個(gè)對(duì)象，屬性名稱key是當(dāng)前頁(yè)面的路徑，屬性值value是子包預(yù)加載的配置。子包預(yù)加載配置如下表：

屬性名稱	類型	是否必填	默認(rèn)值	描述
network	String	否	wifi	指定預(yù)加載時(shí)的網(wǎng)絡(luò)類型 可選值：all（不限網(wǎng)絡(luò)），wifi（僅wifi）
packages	Array	是	無(wú)	字符串?dāng)?shù)組，進(jìn)入頁(yè)面時(shí)的子包的root或name屬性 APP表示主包

小程序分包操作步驟：

1. 在應(yīng)用的根目錄下新建子包，目錄結(jié)構(gòu)如下

   wxapp：

   • account_module：account子包目錄。
     • components：子包自定義組件目錄。
     • pages：子包頁(yè)面目錄。
     • static：子包靜態(tài)資源目錄。
   • order_module：order子包目錄。
     • components：子包自定義組件目錄。
     • pages：子包頁(yè)面目錄。
     • static：子包靜態(tài)資源目錄。

2. 修改pages.json分包配置

   {
     // ...
        
     // 分包配置
     "subPackages": [
     	{
       	"root": "account_module",
         "name": "account_module",
         "pages": [
         	{
           	"path": "pages/***",
             "style": {}
           }
           // ...
         ]
       },
       {
       	"root": "order_module",
         "name": "order_module",
         "pages": [
         	{
           	"path": "pages/***",
             "style": {}
           }
           // ...
         ]
       }
     ],
     // 子包預(yù)加載規(guī)則配置
     "preloadRule": {
     	"pages/***": {
       	"network": "all",
       	"packages": ["account_module"]
       },
       "pages/***": {
       	"network": "all",
       	"packages": ["order_module"]
       },
       "pages/***": {
       	"network": "all",
       	"packages": ["account_module", "order_module"]
       }
     }
   }
   復(fù)制代碼

7.預(yù)覽及發(fā)布

在小程序整個(gè)開發(fā)過(guò)程中支持實(shí)時(shí)預(yù)覽。通過(guò)打開微信開發(fā)者工具的模擬器進(jìn)行預(yù)覽，通過(guò)HBuilderX發(fā)布新的小程序體驗(yàn)版。

前提條件：按照要求（第二節(jié)及第三節(jié)）安裝及配置開發(fā)工具。

7.1 調(diào)試及預(yù)覽

點(diǎn)擊HBuilderX頂部導(dǎo)航欄的運(yùn)行->運(yùn)行到小程序模擬器->微信開發(fā)者工具或發(fā)行->小程序-微信，喚起微信開發(fā)者工具，并自動(dòng)打開小程序完成調(diào)試預(yù)覽。

運(yùn)行及發(fā)行區(qū)別：

• 發(fā)行模式會(huì)對(duì)項(xiàng)目進(jìn)行壓縮，完成后的應(yīng)用體積更小，運(yùn)行則不會(huì)。
• 運(yùn)行模式打開小程序，模擬器可以實(shí)時(shí)預(yù)覽，不必重復(fù)運(yùn)行，發(fā)行只會(huì)壓縮并打開當(dāng)前狀態(tài)的項(xiàng)目。

通常情況下，當(dāng)處在開發(fā)階段時(shí)多使用運(yùn)行模式，便于開發(fā)調(diào)試。開發(fā)完成后，使用發(fā)行模式打開微信開發(fā)者工具，并借助預(yù)覽及真機(jī)調(diào)試功能測(cè)試小程序功能及兼容性。

7.2 發(fā)行

1. 點(diǎn)擊HBuilderX頂部導(dǎo)航欄的發(fā)行->小程序-微信，打開微信開發(fā)者工具。
2. 點(diǎn)擊微信開發(fā)者工具右上角的上傳，輸入正確的版本號(hào)，完成小程序體驗(yàn)版的發(fā)布。