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