前言
本文基於 HBuilderX 3.1.22 + 微信開發者工具 1.05.2106300為主要內容進行說明。
文檔版本：1.0.2
一、准備
uni-app 是一個使用 Vue.js 開發所有前端應用的框架，開發者編寫一套代碼，可發布到iOS、Android、Web（響應式）、以及各種小程序（微信/支付寶/百度/頭條/QQ/快手/釘釘/淘寶）、快應用等多個平台。
1.1 軟件安裝
創建uni-app有兩種，一個是通過 HBuilderX 可視化界面，另一個是通過vue-cli命令行。本文檔以HbuilderX為創建說明，以微信開發者工具進行運行項目和代碼說明。
HbuilderX 下載地址：https://www.dcloud.io/hbuilderx.html
HbuilderX 文檔地址：https://hx.dcloud.net.cn/Tutorial/startup
微信開發者工具下載地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
HbuilderX安裝結束后，一般需要下載開發項目需要的插件，選擇工具-->插件安裝-->安裝或去市場插件查找下載，然后放到目錄下的uni_modules文件夾（安裝時候自動生成），如scss/sass編譯，App真機運行等。
微信開發者工具安裝結束后，在工具欄上選擇 設置-->通用設置-->安全-->打開服務端口。
其次，在微信開發者平台(https://open.weixin.qq.com/)注冊開發者賬號，找到自己的開發ID，AppId，並記錄好，為項目從HbuilderX運行到微信開發者工具做准備。
然后，在微信公眾平台(https://mp.weixin.qq.com/)注冊對應的賬號，比如本次注冊的是小程序，則微信開發者APPID如下圖中找到：
接着配置微信開發者工具的AppId，在微信開發者工具界面點擊右上角詳情->基本信息->AppId進行配置，如下圖：
開發環境下配置：點擊右上角詳情->本地設置->打鈎"不校驗合法域名...."，如下圖：
1.2 vue入門
由於uni-app是以vue為基礎的小程序開發，所以使用uni-app之前需要對vue有一定的了解。
vue 文檔地址：https://vuejs.bootcss.com/guide/
二、基於HbuilderX 的uni-app項目搭建
2.1 創建項目
1.在點擊工具欄里的文件 -> 新建 -> 項目：
2.選擇uni-app類型，輸入工程名，選擇模板，點擊創建，即可成功創建。
uni-app自帶的模板有 Hello uni-app ，是官方的組件和API示例。還有一個重要模板是 uni ui項目模板，日常開發可以參考該模板，畢竟這個模板已內置大量常用組件。
然后在HBuilder X內工具欄點擊 運行—>運行到小程序模擬器 -->微信開發者工具，便能初步看到運行成效。
2.2 目錄補充搭建
本次創建使用默認版本，創建后的目錄如下：
1 根據需要給項目搭建相應的目錄結構。尚未下載依賴和市場插件之前，創建需要的文件夾和文件：
2 如果要下載vue，vuex等依賴，在之前需要先安裝node.js，並且安裝好node的包管理器（npm,cnpm,yarn等，一個即可，本文檔以npm為例）
node相關地址：http://nodejs.cn/
安裝教程：https://www.runoob.com/nodejs/nodejs-install-setup.html
A. 初始化package.json文件
B.使用代碼，其中注意最好加上--save
npm install vue --save
npm install vuex --save
npm install uview-ui --save
下載vue和uview依賴。其中，vue是開發uni-app必要的依賴，uview則是uni-app生態的一個優秀的UI框架，本文檔以uview作為前端UI開發框架為基礎進行開發搭建。執行下載后，項目會自動把依賴放進node_modules文件夾內，可在node_modules文件夾進行查看。然后下載開發項目需要的市場插件，市場插件默認自行創建插件所在文件夾uni_modules，並存放插件於此。
vue相關地址：https://vuejs.bootcss.com/guide/
uview相關地址：https://www.uviewui.com/components/intro.html
最后，創建頁面和對應頁面的api文件（本文檔僅以登錄頁面、主頁面和登錄api文件為例），這樣一個基本的結構接搭建好了，最終結構目錄大體如下：
其中.hbuilderx，unpackage文件夾是自動生成，不必自主創建。node_modules，uni_modules文件夾里的文件最好不必去改動。
C.目錄結構說明如下：
| 層級1 | 層級2 | 層級3 | 描述 |
|---|---|---|---|
| api | 各個模塊接口文件夾 | ||
| login.js | 登錄模塊接口文件 | ||
| common | 公共模塊，包含公共基礎css等 | ||
| base.css | 公共基礎css | ||
| components | 符合vue組件規范的uni-app組件目錄 | ||
| node_modules | nodejs相關依賴包文件目錄 | ||
| pages | 業務頁面文件存放的目錄 | ||
| index | index文件夾 | ||
| index.vue | 主頁面 | ||
| login | login文件夾 | ||
| index.vue | 登錄主頁面 | ||
| static | 存放應用引用的本地靜態資源（如圖片、視頻等）的目錄，注意：靜態資源只能存放於此，不要放css文件 | ||
| store | vuex目錄，也是存放公共屬性方法的地方 | ||
| index.js | vuex的主文件 | ||
| uni_modules | 插件市場下載的第三方UI組件目錄，存放uni_module規范的插件。 | ||
| unpackage | 打包目錄，這里有各個平台的打包文件。 | ||
| utils | 全局公共方法目錄 | ||
| common.js | 封裝的公共可復用的方法屬性文件（針對當前項目） | ||
| request.js | 封裝的公共請求方法文件 | ||
| utils.js | 封裝的公共可復用的方法屬性文件（針對所有項目） | ||
| App.vue | 應用配置文件，用來配置App全局樣式以及監聽應用生命周期 | ||
| main.js | Vue初始化入口文件 | ||
| manifest.json | 配置應用名稱、appid、logo、版本等打包信息的文件 | ||
| package.json | 項目配置信息文件，依賴模塊的定義 | ||
| package-lock.json | 1.鎖定包的版本，確保再次下載時不會因為包版本不同而產生問題 2.加快下載速度，因為該文件中已經記錄了項目所依賴第三方包的樹狀結構和包的下載地址,重新安裝時只需下載即可，不需要做額外的工作 |
||
| pages.json | 配置頁面路由、導航條、選項卡等頁面類信息的文件 | ||
| uni.scss | 自帶的公共的css修飾文件 | ||
| README.md | 文檔說明，可包含目錄文件名稱對比，注意事項，框架使用，技術架構，Git或SVN地址，賬號密碼等 |
由於在pages創建了登錄頁面，所以需要到pages.json去配置相關路徑。
pages.json
"pages": [ { "path": "pages/login/index", "style": { "navigationBarTitleText": "登錄" } }, { "path": "pages/index/index", "style": { "navigationBarTitleText": "首頁" } } ]
<!--注意：-->
-
編譯到任意平台時，static 目錄下的文件均會被完整打包進去，且不會編譯。
-
非 static 目錄下的文件（vue、js、css 等）只有被引用到才會被打包編譯進去。static 目錄下的 js 文件不會被編譯，如果里面有 es6 的代碼，不經過轉換直接運行，在手機設備上會報錯。
-
css、less/scss 等資源不要放在 static 目錄下，建議這些公用的資源放在自建的 common 目錄下。
2.3 搭建目錄文件代碼
根據需要，我們寫一個簡單的登錄，使用登錄功能來闡述各個目錄文件之間的聯系。
首先，我們先把已創建的相關文件進行掛載到全局，即在main.js或者App.vue寫相關代碼：
main.js
App.vue
然后在被引入的文件寫必要的內容信息：
base.css
.clearfix:before{content:" ";display:table}
.clearfix:after{content:" ";display:table;clear:both}
.fl{float:left}
.fr{float:right}
request.js
export default function request({ url, method = "GET", params = {}, header, loadding = false, loaddingText = "加載中..." }) { return new Promise((resolve, reject) => { if (loadding) { uni.showLoading({ title: loaddingText }) } setTimeout(() => { uni.request({ url, method, data: params, header, success: (res) => { if (res) { resolve(res.data) } else { resolve(res) } if (loadding) { uni.hideLoading() } }, fail: (res) => { reject(res) } }) }, 1000) }).catch(err => { // 這里既可以捕獲throw的異常也可以捕獲reject的異常 console.log("[Promise catch]:", err) if (loadding) { uni.hideLoading() } }) }
common.js
export default { BASE_URL:"" }
然后我們開始寫登錄頁面。登錄頁面需要寫用戶名、密碼、登錄按鈕三個組件，則需要使用uview創建。使用uview創建組件之前的幾個確保：
確保1 HBuilder X 是安裝了 scss/sass 編譯插件
確保2 在根目錄下 uni.scss 文件中引入 uview-ui/theme.scss
@import 'uview-ui/theme.scss';
確保3 在根目錄下 App.vue 文件中的style代碼塊添加 lang="scss"屬性 和 引入 uview-ui/index.scss
<style lang="scss"> @import "uview-ui/index.scss"; </style>
確保4 在根目錄下main.js文件中 引入並使用uView的JS庫，注意這兩行要放在import Vue之后。
import uView from "uview-ui";
Vue.use(uView);
如果是不想書寫引入文件代碼，即我們每當引入一個UI組件，就需要添加
import xxx from "uView-ui/components/u-xxx/u-xxx.vue";
等相關代碼。則需要確保5 在根目錄下pages.json文件中 ，配置easycom組件模式
// pages.json { "easycom": { "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue" }, // 此為本身已有的內容 "pages": [ // ...... ] }
接着我們在pages/login/index.vue，即登錄頁面中，引入uview組件和書寫登錄代碼：
pages/login/index.vue
<template>
<view class="content">
<view class="inp">
<u-input v-model="username" type="text" :border="true" placeholder="請輸入用戶名" />
</view>
<view class="inp">
<u-input v-model="password" type="password" :border="true" placeholder="請輸入密碼" />
</view>
<view class="inp">
<u-button type="primary" shape="circle" style="margin-top: 40rpx;" @click="onLogin">登錄</u-button>
</view>
</view>
</template>
<script>
import {
login
} from '@/api/login.js'
export default {
data() {
return {
username: '',
password: ''
}
},
onLoad() {
},
methods: {
onLogin() {
// #ifdef MP-WEIXIN
uni.login({
success: res0 => {
login({
params: {
username: this.username,
password: this.password,
code: res0.code
},
loadding: true,
loaddingText: "登錄中..."
}).then(res => {
this.$store.state.userinfo = res
if (res) {
uni.reLaunch({
url: "../index/index"
})
} else {
uni.showToast({
title: "登錄失敗",
duration: 1000,
icon: "none"
})
}
})
},
fail: err => {
console.log("fail:", err)
}
})
// #endif
// #ifdef H5
uni.reLaunch({
url: "../index/index"
})
// #endif
}
}
}
</script>
<style scoped lang="scss">
.content {
padding: 20px;
.inp {
margin: 10px;
}
}
</style>
以上代碼為先進行獲取用戶登錄憑證code，然后才正式登錄。因為開發者需要在開發者服務器后台，使用 code 換取 openid 和 session_key 等信息。然后使用得到的code，和用戶名密碼一起作為參數進行真正的登錄請求。其中，樣式最好內聚在組件內，組件內部使用的樣式，盡量在style中添加scoped，編譯時會增加組件hash前綴來防止樣式污染。
login頁面 有請求數據，則需要寫login.js請求接口：
login.js
import common from '@/utils/common.js' import request from '@/utils/request.js' // 登錄 export async function login(payload) { return await request({ url: common.BASE_URL + "http://rap2api.taobao.org/app/mock/229799/http://login", method: "POST", params: payload.params, loadding: payload.loadding, loaddingText: payload.loaddingText }) }
接口文檔地址： https://cloud.udi-link.com/cps_qlimp/swagger-ui.html
login頁面 有使用 this.$store.state，則需要對store/index.js寫代碼：
store/index.js
import Vue from 'vue'; import Vuex from "vuex"; Vue.use(Vuex); export default new Vuex.Store({ state: { userinfo: "" }, actions: { }, mutations: { }, getters: { } })
到此，直接點擊工具欄上的運行-->運行到小程序模擬器-->微信開發者工具，結果如下圖所示：
然后如果要進行調試，則需要打開調試器，點擊調試器界面的source選項，找到對應的代碼文件，進行斷點調試，比如：
或者直接使用H5模式運行到瀏覽器，在移除相關會影響代碼調試的微信開發者工具方法或屬性后，在網頁上打開控制台進行調試代碼。需要注意的是，部分樣式在H5和微信小程序中顯示有區別，盡量以小程序顯示為主。
三、打包發行
使用hbuilderx進行打包發行小程序，點擊工具欄的發行 --> 小程序-微信，然后它會自主打開微信開發者工具界面，這時候我們點擊右上角的上傳按鈕，填寫版本號、描述相關信息 - 確定即可。
四、注意事項
事項1
@import "uview-ui/index.scss";
如果引入在除了App.vue之外的文件，而App.vue本身沒有引入，可能會引起樣式不全修飾等問題，比如登錄的密碼輸入框，當輸入密碼時候顯示清空按鈕，此時會讓密碼框下移。
事項2
打包微信小程序只有包小於2MB才能上傳。