uni-app+vue3+vant開發微信小程式探路...

語言: CN / TW / HK

一、簡單說說準備工作:

建立專案

  • 工具: HBuilder最新穩定版, uni-app官網可下載
  • 選單欄:檔案-> 新建 -> 專案,建立一個空白的基於vue3版本的模板目錄即可 image.png

除錯

  • 工具:預先下載安裝 微信開發者工具
  • HBuilder中選中當前專案的任何一個檔案
  • image.png
  • 選單欄:執行-> 執行到小程式模擬器 ->微信開發者工具
  • 執行成功會自動啟動微信開發者工具,等待編譯完成會看到測試介面
  • image.png

【坑】開發模式進行真機除錯會白屏,需要在發行模式下進行真機除錯

【坑】如出現微信開發者工具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", //... }

image.png

單頁引用

把上述的程式碼放在對應的頁面配置內,如:

image.png

【坑】報錯??

js 頁面【wxcomponents/vant/info/index]錯誤: Error: module 'wxcomponents/vant/info/index.js' is not defined, require args is 'wxcomponents/vant/info/index.js' image.png 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)

image.png

【填坑】

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

微信開發者工具右上角:詳情-> 本地設定 -> 勾選“將JS編譯成ES5”即可 image.png

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

image.png

如開啟的是manifest.json的原始碼,可以在對應的位置增加以下配置:

image.png

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

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

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

js <van-toast id="van-toast" /> 注意:只要可能會呼叫Toast()的介面,都需要插入該元件

2.在非元件的js檔案中引用Toast(),正常使用可能會像如下的方式:

image.png

開發模式下是可以正常呼叫,但是在發行模式下,會報錯

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

image.pngjs TypeError: Cannot read property 'success' of undefined image.png

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

理由揭祕:

開啟/wxcomponents/vant/toast/toast.js,你會發現,最後一句程式碼為:

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

而當回去修改了一下程式碼,熱過載後,這句話就變成了: js exports.Toast = Toast;

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

釋出模式下,不存在熱過載,在微信開發者工具開啟這個檔案,就會發現它一直是

js export default Toast;

而編譯後引用這個檔案的程式碼始終是一樣的:

image.png

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

這就會導致一個問題,我們什麼都不改直接引用的話,會出現熱過載後是能正常,初始載入和釋出都不能正常使用,因為 exports.Toastexport 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, 在對應主介面中引入即可,可以使用vanttabbar元件,可參考如下:

```js