uni-app体验-vue H5项目转换为uni-app

使用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

参考https://www.jianshu.com/p/2296f308888b

使用less,引入全局变量文件mixin.less

1. 通过HBuilder 工具-插件安装 插件市场安装less
2. 根目录新建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