一、簡單説説準備工作：

創建項目

• 工具： HBuilder最新穩定版， uni-app官網可下載
• 菜單欄：文件-> 新建 -> 項目，創建一個空白的基於vue3版本的模板目錄即可

調試

• 工具：預先下載安裝 微信開發者工具
• HBuilder中選中當前項目的任何一個文件
• 
• 菜單欄：運行-> 運行到小程序模擬器 ->微信開發者工具
• 運行成功會自動啟動微信開發者工具，等待編譯完成會看到測試界面
• 

【坑】開發模式進行真機調試會白屏，需要在發行模式下進行真機調試

【坑】如出現微信開發者工具console裏面爆紅，可以試試點一下微信開發者工具上方菜單裏面的重新編譯，説不定就好了(*￣︶￣)

發佈

• 菜單欄：發行-> 小程序-微信
• 此時需要一個小程序AppId，需在微信公眾平台上開通

二、一些技巧和坑

1.引用vant組件

引入組件目錄

1. 與 /pages 同級創建 /wxcomponents/vant 目錄
2. 下載微信小程序版本的vant代碼
3. 解壓代碼，把/dist目錄內的文件拷貝進去新建的/wxcomponents/vant目錄中
4. 開發過程中應參考對應版本的文檔：https://vant-contrib.gitee.io/vant-weapp 但需要把對應的引用語法改成vue的語法，如：

js <van-cell-group> <van-field value="{{ value }}" placeholder="請輸入用户名" border="{{ false }}" bind:change="onChange" /> </van-cell-group> 改為：

js <van-cell-group> <van-field :value="value" placeholder="請輸入用户名" :border="false" @change="onChange" /> </van-cell-group>

引用

修改pages.json文件

全局引用

在"globalStyle":{} 屬性下加入以下片段，可按需引入具體需要全局引入的組件，引入規則如下： js "usingComponents": { "van-cell-group": "/wxcomponents/vant/cell-group/index", "van-field": "/wxcomponents/vant/field/index", //... }

單頁引用

把上述的代碼放在對應的頁面配置內，如：

【坑】報錯？？

js 頁面【wxcomponents/vant/info/index]錯誤: Error: module 'wxcomponents/vant/info/index.js' is not defined, require args is 'wxcomponents/vant/info/index.js' js WAServiceMainContext.js?t=wechat&s=1666746784000&v=2.27.0:1 SyntaxError: Cannot use import statement outside a module(env: Windows,mp,1.06.2209190; lib: 2.27.0)

【填坑】

這是因為微信開發者工具沒有啟用ES6轉ES5功能而報錯

在微信開發者工具右上角：詳情-> 本地設置 -> 勾選“將JS編譯成ES5”即可

但可能重新編譯或熱重載後，該選項“將JS編譯成ES5”又不勾選了，此時可以直接去修改項目文件manifest.json, 勾選微信小程序配置-> ES6轉ES5 即可

如打開的是manifest.json的源碼，可以在對應的位置增加以下配置：

【坑】引用van-toast組件無效或報錯

1.未找到van-toast 節點，請確認 selector 及 context 是否正確

組件內引用切記參考官方文檔，需要給頁面引入一個van-toast組件，才能在script內使用 Toast() 的方法

js <van-toast id="van-toast" /> 注意：只要可能會調用Toast()的界面，都需要插入該組件

2.在非組件的js文件中引用Toast()，正常使用可能會像如下的方式：

開發模式下是可以正常調用，但是在發行模式下，會報錯

js vendor.js? [sm]:1 TypeError: s.Toast is not a function

或 js TypeError: Cannot read property 'success' of undefined

如果把Toast打印出來，會發現為null, 原因是Toast並未正常引入

理由揭祕：

打開/wxcomponents/vant/toast/toast.js，你會發現，最後一句代碼為：

js export default Toast; 開發模式下，初次編譯，在微信開發者工具打開這個文件，發現這句話沒有變，編譯過程並沒有把它進行處理

而當回去修改了一下代碼，熱重載後，這句話就變成了： js exports.Toast = Toast;

估計就是微信開發者工具進行了再次編譯，把一些組件目錄的代碼進行轉換了，而uni-app沒有對這些代碼進行處理

發佈模式下，不存在熱重載，在微信開發者工具打開這個文件，就會發現它一直是

js export default Toast;

而編譯後引用這個文件的代碼始終是一樣的：

都是通過[module].Toast()來進行引用。

這就會導致一個問題，我們什麼都不改直接引用的話，會出現熱重載後是能正常,初始加載和發佈都不能正常使用，因為 exports.Toast和export default Toast我們引入後的內容是不一樣的

詳細原理可參考這個地址

【填坑】

把/wxcomponents/vant/toast/toast.js的最後一句導出語句修改為：

js exports.Toast = Toast; 引入語句修改為：

```js const Toast = require('../wxcomponents/vant/toast/toast.js').Toast

export function loadInfo() { Toast('加載成功') } ``` 大功告成！😀

若有更優美的解決方案歡迎交流~

2.自定義頂部導航欄，以便於修改頂欄樣式（還原UI設計圖；加背景圖、Logo之類..）

修改pages.json文件

```js { ..., "globalStyle": { "navigationStyle": "custom", ... } }

`` 創建對應的自定義組件:components/commonHeader/commonHeader.vue`, 在界面中引入即可（可按下方第4點的方式進行按需引入的設置）

私人tips：

獲取系統狀態欄和菜單高度，用於設置自定義頂部導航欄的高度

修改App.vue文件

```js onLaunch: function() { console.log('App Launch') uni.getSystemInfo({ success: function(e) { // #ifdef MP-WEIXIN uni.$StatusBarHeight = e.statusBarHeight; // getMenuButtonBoundingClientRect 用於獲取頁面右上角圓角按鈕的位置信息 let custom = wx.getMenuButtonBoundingClientRect(); uni.$CustomBarHeight = custom.bottom - e.statusBarHeight + 8 // #endif

        //uni 為全局對象,可以掛載全局參數,在其他組件可以直接使用
    }
})

} ```

私人tips2： 監聽頁面滾動動態修改頂部導航欄樣式

場景：可用於全屏背景圖，滾動後需要修改頂部導航欄的背景和文字顏色的場景

```js // page代碼 onPageScroll(e) { const { scrollTop } = e // pageTop 可指定滾動高度 const pageTop = 100 if (scrollTop > pageTop) { // headerBg, headerColor 可以是自定義導航欄的一些props, 按需使用 this.headerBg = '#fff' this.headerColor = 'black'

            // 修改狀態欄樣式(頂部的時間日期等內容)
            uni.setNavigationBarColor({
                    frontColor: '#000000',
                    backgroundColor: '' // 必填項,不能不傳,但可以為空字符串
            })
    } else {
            this.headerBg = 'transparent'
            this.headerColor = 'white'
            uni.setNavigationBarColor({
                    frontColor: '#ffffff',
                    backgroundColor: ''
            })
    }

} ```

3.自定義底部菜單欄tabbar

修改pages.json文件

js { ..., "tabBar": { "custom": true, "list": [{ "pagePath": "pages/index/index", "text": "首頁" }, { "pagePath": "pages/passed/index", "text": "主頁面1" }, { "pagePath": "pages/my/index", "text": "個人中心" }， ... ] } } 創建對應的自定義組件: components/commonTabbar/commonTabbar.vue, 在對應主界面中引入即可，可以使用vant的tabbar組件，可參考如下：

```js