这个mpvue大大安装大家肯定都没问题的。
但安装预览的时候,不是用浏览器打开输入:localhost:8080。
而是打开微信开发者工具,把项目根目录导入进去。
坑一:不支持ElmentUI和Vue-router
不支持ElmentUI和诸如类似框架,穷开心的少年们,以为是把之前vue项目直接移入即可,同步生成小程序。
哦买噶,不惜这样啊!
包括Vue-Router我滴个神呀,也是要改为a标签然后写熟悉的微信小程序路径。
不过呢,就是可以写基础的vue和脚本比直接写view要来的爽。
让我先吹吹风外面凉快一会。
坑二:eslint连vue和js后缀文件都有严格校验
二话不说,直接找到build目录的webpack.base.conf.js把器rule注释掉。
// {
// test: /\.(js|vue)$/,
// loader: 'eslint-loader',
// enforce: 'pre',
// include: [resolve('src'), resolve('test')],
// options: {
// formatter: require('eslint-friendly-formatter')
// }
// },
注释我吧,否则你没中饭吃
哈哈,坑终归是要填的,谁叫我写vue两三年了呢。
因为发ajax请求需要使用微信小程序里的wx.request这种api,不兼容得改一下。
4,css有一些hack报错得改一下。
5,脚手架目录结构不一样,需要手工调整一下。
6,初始化组件的方式不一致,需要简单的修改下,入口必须放到page里,之前我们的入口也是components。
7,最坑的是有这么一个bug,搞了我好久:components引用大小写导致组件失效 · Issue #9 · Meituan-Dianping/mpvue
8,静态资源的限制,属于小程序的,所以这里需要对静态资源,比如图片,font字体做一些特殊的webpack配置,这不属于mpvue的问题,自己配置下解决就好了。
9,项目是ts写的,自己加个loader就好。
其他的不涉及DOM,BOM的,该删的也要删一会,整体转了有3,4个小时吧,以上这些问题。最后效果还是不错的,帮team的趟一下坑。
总结一下,mpvue对组件的转换支持真的很棒,只要注意了文档和我上面说的几点,稍加改造一个vue应用转小程序就实现了。
大坑三.Cannot assign to read only property 'exports' of object '#<Object>'
编译报错
这是因为引用第三方插件的时候,带入了module.exports
的写法,webpack可以使用require和export ,但是不能混合使用import 和module.exports
,你需要做的是更新根目录下的.babelrc
文件配置
vue引入插件Cannot assign to read only property 'exports' of object
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": [
["transform-runtime", {
"polyfill": false,
"regenerator": true
}]
],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["istanbul"]
}
}
}
大坑四.挂载在Vue.prototype上的属性,在模板语法里面是undefined,必须经过computed计算过一下才能用。via@noahlam
import config from './config'
Vue.prototype.$serverPath = config.serverPath
在页面中这样使用
<img :src="$serverPath + 'logo.png'" />
编译之后会变成这样的情况
<image src="undefinedlogo.png" ></image>
你需要做的是,在每个使用的页面computed里面返回this.$serverPath
大坑五.相对路径的图片不显示,比如
<img src="../../images/LOGO.png">
解决是:把路径import
进来,或者是把图片放在static
目录下引用,然而作为css background-image
引用时,只能选择引用远程图片,或者相对目录小于8k(webpck配置有关)的图片,不然编译器会报错
<template>
<div>
<div class="test"></div>
<img :src="imgUrl">
</div>
</template>
<style>
.test{
width: 48rpx;
height: 48rpx;
background-image: url("../../img/a.png");
}
</style>
<script>
import imgUrl from '@/img/a.png'
export default {
data() {
return {
imgUrl
}
}
</script>
大坑六.子组件数据检测的问题
比如我在某个页面引用了这样的一个组件,绑定数据myOrderList
,同时我引入了vuex来做状态管理,管理myOrderList
对象
### A页面中
<order :isEnd="isEnd" :orderList="myOrderList"></order>
### B页面中更新"myOrderList"对象
this.$store.commit('updateList', {data: this.orderList});
当A页面再次显示的时候,子组件的数据流没有更新,打印myOrderList
对象都有更新.我的解决办法是,先把myOrderList赋值为空,然后再次赋值store.state中的对象,问题就解决了.估计是mpvue的数据检测机制有问题,说得不对的地方希望大佬们斧正.
大坑七.原生组件引入的问题,参考在mpvue 使用 echarts 小程序组件,官方的文档已经很详细了,我这边说几个要点:
- ready 为异步获取数据。
- 为 init 添加接收 options 传参
- page目录下main.js需要添加
usingComponents: {'ec-canvas': '../../../static/ec-canvas/ec-canvas'}
- 需要放在static目录下
第一条和第二条尤为重要,大家切记
常见问题
如果这篇文档没找到您想要的内容,请到 mpvue/issues 进行查找。
vue-router 支持吗?
路由是不能支持的,因为小程序无法动态的插入和控制节点,几乎无法实现。而且小程序对页面的切换性能做了很多优化,页面切换体验也好了很多,所以使用 vue-router 也不那么必要
为什么我新增了页面,没有反应?
因为 webpack 编译的文件使用配置的 entry 决定的,新增的页面并没用添加进 entry,所以需要手动 npm run dev
一下,考虑不是高频操作,所以还可以忍受
能不能引用第三方的 UI 库?
原理上是可以的,但是要去掉 Dom 和 Bom 相关的 API 操作,还要去掉 mpvue 不支持的一些 vue 特性,小程序不支持的 css 选择器等,去掉这些就可以使用了,欢迎大家贡献 mpvue 的 UI 组件库。
能否使用 echarts 等小程序原生组件?
可以,可以看下demo
如何获取小程序在 page onLoad 时候传递的 options
在所有 页面 的组件内可以通过 this.$root.$mp.query
进行获取。
如何获取小程序在 app onLaunch/onShow 时候传递的 options
在所有的组件内可以通过 this.$root.$mp.appOptions
进行获取。
如何捕获 app 的 onError
由于 onError 并不是完整意义的生命周期,所以只提供一个捕获错误的方法,在 app 的根组件上添加名为 onError 的回调函数即可。如下:
export default {
// 只有 app 才会有 onLaunch 的生命周期
onLaunch () {
// ...
},
// 捕获 app error
onError (err) {
console.log(err)
}
}