前言

本文基于 HBuilderX 3.1.22 + 微信開發(fā)者工具 1.05.2106300為主要內(nèi)容進(jìn)行說明捧毛。

文檔版本：1.0.2

更新時(shí)間：2021-09-04 16:42; 2021-10-22 13:46;

一岖妄、準(zhǔn)備

uni-app 是一個(gè)使用 Vue.js 開發(fā)所有前端應(yīng)用的框架，開發(fā)者編寫一套代碼丸凭，可發(fā)布到iOS惜犀、Android虽界、Web（響應(yīng)式）莉御、以及各種小程序（微信/支付寶/百度/頭條/QQ/快手/釘釘/淘寶）礁叔、快應(yīng)用等多個(gè)平臺(tái)琅关。

1.1 軟件安裝

創(chuàng)建uni-app有兩種涣易，一個(gè)是通過 HBuilderX 可視化界面新症，另一個(gè)是通過vue-cli命令行戳护。本文檔以HbuilderX為創(chuàng)建說明腌且，以微信開發(fā)者工具進(jìn)行運(yùn)行項(xiàng)目和代碼說明铺董。

HbuilderX 下載地址：https://www.dcloud.io/hbuilderx.html

HbuilderX 文檔地址：https://hx.dcloud.net.cn/Tutorial/startup

微信開發(fā)者工具下載地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

HbuilderX安裝結(jié)束后精续，一般需要下載開發(fā)項(xiàng)目需要的插件重付，選擇工具-->插件安裝-->安裝或去市場(chǎng)插件查找下載确垫，然后放到目錄下的uni_modules文件夾（安裝時(shí)候自動(dòng)生成）删掀，如scss/sass編譯披泪，App真機(jī)運(yùn)行等款票。

微信開發(fā)者工具安裝結(jié)束后象颖，在工具欄上選擇 設(shè)置-->通用設(shè)置-->安全-->打開服務(wù)端口说订。

其次陶冷，在微信開發(fā)者平臺(tái)(https://open.weixin.qq.com/)注冊(cè)開發(fā)者賬號(hào)埂伦，找到自己的開發(fā)ID沾谜，AppId基跑，并記錄好媳否，為項(xiàng)目從HbuilderX運(yùn)行到微信開發(fā)者工具做準(zhǔn)備篱竭。

然后，在微信公眾平臺(tái)(https://mp.weixin.qq.com/)注冊(cè)對(duì)應(yīng)的賬號(hào)坪圾，比如本次注冊(cè)的是小程序兽泄，則微信開發(fā)者APPID如下圖中找到：

image.png

接著配置微信開發(fā)者工具的AppId，在微信開發(fā)者工具界面點(diǎn)擊右上角詳情->基本信息->AppId進(jìn)行配置蜓陌，如下圖：

image.png

開發(fā)環(huán)境下配置：點(diǎn)擊右上角詳情->本地設(shè)置->打鉤"不校驗(yàn)合法域名...."钮热，如下圖：

image.png

1.2 vue入門

由于uni-app是以vue為基礎(chǔ)的小程序開發(fā)，所以使用uni-app之前需要對(duì)vue有一定的了解仆潮。

vue 文檔地址：https://vuejs.bootcss.com/guide/

二性置、基于HbuilderX 的uni-app項(xiàng)目搭建

2.1 創(chuàng)建項(xiàng)目

1.在點(diǎn)擊工具欄里的文件 -> 新建 -> 項(xiàng)目：

image.png

2.選擇uni-app類型，輸入工程名隐砸，選擇模板凰萨，點(diǎn)擊創(chuàng)建，即可成功創(chuàng)建珊搀。

image.png

uni-app自帶的模板有 Hello uni-app 境析，是官方的組件和API示例劳淆。還有一個(gè)重要模板是 uni ui項(xiàng)目模板括勺，日常開發(fā)可以參考該模板疾捍，畢竟這個(gè)模板已內(nèi)置大量常用組件乱豆。

然后在HBuilder X內(nèi)工具欄點(diǎn)擊 運(yùn)行—>運(yùn)行到小程序模擬器 -->微信開發(fā)者工具宛裕，便能初步看到運(yùn)行成效。

2.2 目錄補(bǔ)充搭建

本次創(chuàng)建使用默認(rèn)版本疲酌，創(chuàng)建后的目錄如下：

image.png

1 根據(jù)需要給項(xiàng)目搭建相應(yīng)的目錄結(jié)構(gòu)。尚未下載依賴和市場(chǎng)插件之前粥诫，創(chuàng)建需要的文件夾和文件：

image.png

2 如果要下載vue，vuex等依賴执赡，在之前需要先安裝node.js沙合，并且安裝好node的包管理器（npm,cnpm,yarn等首懈，一個(gè)即可究履，本文檔以npm為例）

node相關(guān)地址：http://nodejs.cn/

安裝教程：https://www.runoob.com/nodejs/nodejs-install-setup.html

A. 初始化package.json文件

image.png

B.使用代碼顽聂，其中注意最好加上--save

<pre style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background, font-size, border-color, border-radius, border-width, padding, margin, color; overflow: auto; font-family: "Courier New", serif; font-size: 12px; overflow-wrap: break-word;">　　npm install vue --save
　　npm install vuex --save
　　npm install uview-ui --save</pre>

下載vue和uview依賴蜜葱。其中牵囤，vue是開發(fā)uni-app必要的依賴，uview則是uni-app生態(tài)的一個(gè)優(yōu)秀的UI框架揭鳞，本文檔以u(píng)view作為前端UI開發(fā)框架為基礎(chǔ)進(jìn)行開發(fā)搭建炕贵。執(zhí)行下載后，項(xiàng)目會(huì)自動(dòng)把依賴放進(jìn)node_modules文件夾內(nèi)野崇，可在node_modules文件夾進(jìn)行查看称开。然后下載開發(fā)項(xiàng)目需要的市場(chǎng)插件，市場(chǎng)插件默認(rèn)自行創(chuàng)建插件所在文件夾uni_modules乓梨，并存放插件于此鳖轰。

vue相關(guān)地址：https://vuejs.bootcss.com/guide/

vuex相關(guān)地址：https://vuex.vuejs.org/zh/installation.html

uview相關(guān)地址：https://www.uviewui.com/components/intro.html

image.png

最后扶镀，創(chuàng)建頁面和對(duì)應(yīng)頁面的api文件（本文檔僅以登錄頁面蕴侣、主頁面和登錄api文件為例），這樣一個(gè)基本的結(jié)構(gòu)接搭建好了臭觉，最終結(jié)構(gòu)目錄大體如下：

image.png

其中.hbuilderx昆雀，unpackage文件夾是自動(dòng)生成，不必自主創(chuàng)建蝠筑。node_modules狞膘，uni_modules文件夾里的文件最好不必去改動(dòng)。

C.目錄結(jié)構(gòu)說明如下：

1.鎖定包的版本遭笋，確保再次下載時(shí)不會(huì)因?yàn)榘姹静煌a(chǎn)生問題

2.加快下載速度，因?yàn)樵撐募幸呀?jīng)記錄了項(xiàng)目所依賴第三方包的樹狀結(jié)構(gòu)和包的下載地址,重新安裝時(shí)只需下載即可徒探，不需要做額外的工作

|
| pages.json | | | 配置頁面路由瓦呼、導(dǎo)航條、選項(xiàng)卡等頁面類信息的文件 |
| uni.scss | | | 自帶的公共的css修飾文件 |
| README.md | | | 文檔說明测暗，可包含目錄文件名稱對(duì)比央串，注意事項(xiàng)，框架使用碗啄，技術(shù)架構(gòu)质和，Git或SVN地址，賬號(hào)密碼等 |

由于在pages創(chuàng)建了登錄頁面稚字，所以需要到pages.json去配置相關(guān)路徑饲宿。

pages.json

image.png

• 編譯到任意平臺(tái)時(shí)，static 目錄下的文件均會(huì)被完整打包進(jìn)去尉共，且不會(huì)編譯褒傅。

• 非 static 目錄下的文件（vue、js袄友、css 等）只有被引用到才會(huì)被打包編譯進(jìn)去殿托。static 目錄下的 js 文件不會(huì)被編譯，如果里面有 es6 的代碼剧蚣，不經(jīng)過轉(zhuǎn)換直接運(yùn)行支竹，在手機(jī)設(shè)備上會(huì)報(bào)錯(cuò)。

• css鸠按、less/scss 等資源不要放在 static 目錄下礼搁，建議這些公用的資源放在自建的 common 目錄下。

2.3 搭建目錄文件代碼

根據(jù)需要目尖，我們寫一個(gè)簡(jiǎn)單的登錄馒吴，使用登錄功能來闡述各個(gè)目錄文件之間的聯(lián)系。

首先，我們先把已創(chuàng)建的相關(guān)文件進(jìn)行掛載到全局饮戳，即在main.js或者App.vue寫相關(guān)代碼：

main.js

image.png

App.vue

image.png

然后在被引入的文件寫必要的內(nèi)容信息：

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()
        }　　　　　return Promise.reject(err)
    })
}

common.js

export default {
    BASE_URL:""
}

然后我們開始寫登錄頁面豪治。登錄頁面需要寫用戶名、密碼扯罐、登錄按鈕三個(gè)組件负拟，則需要使用uview創(chuàng)建。使用uview創(chuàng)建組件之前的幾個(gè)確保：

確保1 HBuilder X 是安裝了 scss/sass 編譯插件

image.png

確保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);

如果是不想書寫引入文件代碼，即我們每當(dāng)引入一個(gè)UI組件秸歧，就需要添加

import xxx from "uView-ui/components/u-xxx/u-xxx.vue";

等相關(guān)代碼厨姚。則需要確保5 在根目錄下pages.json文件中 ，配置easycom組件模式

// pages.json
{
"easycom": {
"^u-(.*)": "uview-ui/components/u-1.vue"
},

// 此為本身已有的內(nèi)容
"pages": [
    // ......
]

}

接著我們?cè)趐ages/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="請(qǐng)輸入用戶名" />
</view>
<view class="inp">
<u-input v-model="password" type="password" :border="true" placeholder="請(qǐng)輸入密碼" />
</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>

以上代碼為先進(jìn)行獲取用戶登錄憑證code，然后才正式登錄纱耻。因?yàn)殚_發(fā)者需要在開發(fā)者服務(wù)器后臺(tái)，使用 code 換取 openid 和 session_key 等信息险耀。然后使用得到的code弄喘，和用戶名密碼一起作為參數(shù)進(jìn)行真正的登錄請(qǐng)求。其中甩牺，樣式最好內(nèi)聚在組件內(nèi)蘑志，組件內(nèi)部使用的樣式，盡量在`style`中添加`scoped`贬派，編譯時(shí)會(huì)增加組件`hash`前綴來防止樣式污染急但。

***login頁面*** 有請(qǐng)求數(shù)據(jù)，則需要寫login.js請(qǐng)求接口：

#### 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
    })
}

login頁面 有使用 this.$store.state搞乏，則需要對(duì)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: {

    }
})

到此波桩，直接點(diǎn)擊工具欄上的運(yùn)行-->運(yùn)行到小程序模擬器-->微信開發(fā)者工具，結(jié)果如下圖所示：

image.png

然后如果要進(jìn)行調(diào)試请敦，則需要打開調(diào)試器镐躲，點(diǎn)擊調(diào)試器界面的source選項(xiàng)，找到對(duì)應(yīng)的代碼文件侍筛，進(jìn)行斷點(diǎn)調(diào)試萤皂，比如：

image.png

或者直接使用H5模式運(yùn)行到瀏覽器，在移除相關(guān)會(huì)影響代碼調(diào)試的微信開發(fā)者工具方法或?qū)傩院笙灰诰W(wǎng)頁上打開控制臺(tái)進(jìn)行調(diào)試代碼裆熙。需要注意的是，部分樣式在H5和微信小程序中顯示有區(qū)別，盡量以小程序顯示為主入录。

三齐媒、打包發(fā)行

使用hbuilderx進(jìn)行打包發(fā)行小程序，點(diǎn)擊工具欄的發(fā)行 --> 小程序-微信纷跛，然后它會(huì)自主打開微信開發(fā)者工具界面喻括，這時(shí)候我們點(diǎn)擊右上角的上傳按鈕，填寫版本號(hào)贫奠、描述相關(guān)信息 - 確定即可唬血。

四、注意事項(xiàng)

事項(xiàng)1

@import "uview-ui/index.scss";

如果引入在除了App.vue之外的文件唤崭，而App.vue本身沒有引入拷恨，可能會(huì)引起樣式不全修飾等問題，比如登錄的密碼輸入框谢肾，當(dāng)輸入密碼時(shí)候顯示清空按鈕腕侄，此時(shí)會(huì)讓密碼框下移。

事項(xiàng)2

打包微信小程序只有包小于2MB才能上傳芦疏。

PS : 原文檔地址：uni-app 小程序從零開始的開發(fā)流程 - 烈霧風(fēng)雨城 - 博客園 (cnblogs.com)