使用vant
- 在項(xiàng)目根目錄下新建 wxcomponents 目錄 植酥，此目錄應(yīng)該與components 目錄同級(jí)镀岛。
- 直接通過 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轉(zhuǎn)為rpx
參考http://www.reibang.com/p/2296f308888b
使用less,引入全局變量文件mixin.less
- 通過HBuilder 工具-插件安裝 插件市場(chǎng)安裝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不會(huì)生效img class="main-pic" src="@/static/images/main.png" alt :onerror="defaultImg"> - uniapp Vant Weapp使用van-dropdown 下拉菜單時(shí)，關(guān)閉后遮罩下面的盒子無法觸發(fā)點(diǎn)擊
是 uni-app 底層的問題卸留，可以將 @vant/weapp/dropdown-item/index.wxml 里面的 van-popup 的事件改成駝峰寫法afterEnter和 `afterLeave 就可以了
image.png
使用體會(huì)
- uni-app需要在HBuilderX上開發(fā)較好
- vue h5頁(yè)面轉(zhuǎn)換為uni-app走越，需要一個(gè)頁(yè)面一個(gè)頁(yè)面修改，問題較多耻瑟，解決的時(shí)間不如直接重寫旨指，且目前H5端運(yùn)行報(bào)錯(cuò)
https://github.com/SmaVivian/h5-to-uniapp - uni-app開源項(xiàng)目案例：https://uniapp.dcloud.io/casecode
