一、注冊

網址： 微信注冊，根據指引填寫信息

二、登錄設置

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

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

工具安裝：

微信開發(fā)者工具

HBuilderX

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

四、項目開發(fā)

1、新建一個uni-app項目

2、項目結構

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

Tips:

static 目錄下的 js 文件不會被編譯，如果里面有 es6 的代碼，不經過轉換直接運行，在手機設備上會報錯。

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

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

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

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

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

接下來就可以運行項目了

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

4.源碼請參考項目地址
該項目搭建了相關模塊的框架，并實現了分享，接口的封裝調用，路由跳轉，表單，彈框，聯系客服等模塊。
接口地址自行修改后就可使用。

vuex狀態(tài)管理

uni-app 內置了 vuex。但是vuex是不支持持久化存儲的，所以需要結合第三方來一起協作。

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

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