使用vant
- 在项目根目录下新建 wxcomponents 目录 ，此目录应该与components 目录同级。
- 直接通过 git 下载 vant-weapp 最新源代码，并将dist目录拷贝到新建的wxcomponents目录下，并重命名dist为vant-weapp。https://github.com/youzan/vant-weapp
- 在pages.json的globalStyle中 引入所需要的组件
- vant-weapp文档(有些地方和vant不同)：https://vant-contrib.gitee.io/vant-weapp/#/intro
单位px转为rpx
参考//www.greatytc.com/p/2296f308888b
使用less,引入全局变量文件mixin.less
- 通过HBuilder 工具-插件安装 插件市场安装less
- 根目录新建
vue.config.js
let path = require('path');
let stylePath = path.resolve(__dirname, 'common/css/mixin.less') // common/common.less是less的路径
module.exports = {
css: {
loaderOptions: {
less: {
globalVars: {
"hack": `true; @import "${stylePath}"`
}
}
}
},
}
问题记录
- 图片
onerror不会生效img class="main-pic" src="@/static/images/main.png" alt :onerror="defaultImg"> - uniapp Vant Weapp使用van-dropdown 下拉菜单时，关闭后遮罩下面的盒子无法触发点击
是 uni-app 底层的问题，可以将 @vant/weapp/dropdown-item/index.wxml 里面的 van-popup 的事件改成驼峰写法afterEnter和 `afterLeave 就可以了
image.png
使用体会
- uni-app需要在HBuilderX上开发较好
- vue h5页面转换为uni-app，需要一个页面一个页面修改，问题较多，解决的时间不如直接重写，且目前H5端运行报错
https://github.com/SmaVivian/h5-to-uniapp - uni-app开源项目案例：https://uniapp.dcloud.io/casecode
