一、注冊

網(wÇŽng)址： 微信注冊，根據(jù)指引填寫信息

二、登錄設(shè)置

登錄后找到設(shè)置模塊，在這里你可以設(shè)置一些小程序的主題信息，比較重要的就是這個AppID(小程序ID)，唯一的，相當(dāng)于微信小程序的敲門磚

三、選框架，安裝開發(fā)工具

工具安裝：

微信開發(fā)者工具

HBuilderX

工具安裝好開始進(jìn)入正式開發(fā)。

四、項目開發(fā)

1、新建一個uni-appé …ç›®

2、項目結(jié)構(gòu)

├─ common/              # 公用工具庫文件
├─ components/          # uni-app組件目錄
│  ├─ common/        # 公共組件
├─ models/              # 接口調(diào)取目錄
├─ hybrid/              # 存放本地網(wǎng)頁的目錄
├─ pages/               # 業(yè)務(wù)頁面文件存放的目錄
│  ├─ index/            
│  │  ├─ index.vue      # 首頁面
│  ├─ functions/            
│  │  ├─ functions.vue      # 組件列表頁面
│  ├─ mine/            
│  │  ├─ index.vue      # 個人中心頁面
├─ platforms/           # 存放各平臺專用頁面的目錄
├─ static               # 存放應(yÄ«ng)用引用靜態(tài)資源（如圖片、視頻等）的目錄，注意：靜態(tài)資源只能存放于此
├─ unpackage/           # 打包目錄
├─ utils/           # 工具目錄
├─ wxcomponents/        # 存放小程序組件的目錄
├─ App.vue              #  應(yÄ«ng)用配置，用來配置App全局樣式以及監(jiān)聽
├─ main.js              # Vue初始化入口文件
├─ manifest.json        # 配置應(yīng)用名稱、appid、logo、版本等打包信息
├─ package.json         # 增加uni-appæ“´(kuò)展節(jié)點(diÇŽn)，可實現(xiàn)自定義條件編譯平臺
├─ pages.json         # 全局配置，決定頁面文件的路徑、窗口樣式、原生的導(dÇŽo)航欄、底部的原生tabbar ç­‰。

Tips:

static 目錄下的 js 文件不會被編譯，如果里面有 es6 的代碼，不經(jÄ«ng)過轉(zhuÇŽn)換直接運(yùn)è¡Œ，在手機(jÄ«)設(shè)備上會報錯。

css、less/scss 等資源同樣不要放在 static 目錄下，建議這些公用的資源放在 common 目錄下。

3、項目運(yùn)行
小程序項目運(yùn)行前需要配置微信開發(fā)者工具的默認(rèn)路徑，以及配置小程序的AppID。
微信開發(fā)者工具的默認(rèn)路徑配置，在HBuilder的工具設(shè)置中找到運(yùn)行設(shè)ç½®

將微信開發(fā)者工具安裝的目錄復(fù)制到這里

小程序的AppID的配置需要登陸小程序管理后臺，在開發(fā)開發(fā)設(shè)置中找到AppID

將復(fù)制的AppID粘貼到項目目錄下的manifest.json文件中的小程序配置中。

接下來就可以運(yùn)行項目了

運(yùn)行以后會自動啟動微信開發(fā)者工具，如果不能自動啟動的話，需要手動啟動程序。

4.源碼請參考項目地址
該項目搭建了相關(guān)模塊的框架，并實現(xiàn)了分享，接口的封裝調(diào)用，路由跳轉(zhuÇŽn)，表單，彈框，聯(lián)系客服等模塊。
接口地址自行修改后就可使用。

vuex狀態(tài)管理

uni-app å…§(nèi)置了 vuex。但是vuex是不支持持久化存儲的，所以需要結(jié)合第三方來一起協(xié)作。

默認(rèn)的模板項目首先是沒有node-modules模塊依賴的，也就是說你沒法進(jìn)行一些第三方的擴(kuò)展，所以為了讓你的項目更加的靈活性，你需要執(zhí)行以下命令來搭配一些第三方來更隨心所欲的開發(fā)é …ç›®

npm init -y
npm install vuex-persistedstate --save