奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > vue面试通 > 开源框架 >

mpvue菜鸟踩坑吃鸡篇一

时间:2018-03-16 14:54来源:未知 作者:admin
这个mpvue大大安装大家肯定都没问题的。 但安装预览的时候,不是用浏览器打开输入:localhost:8080。 而是打开微信开发者工具,把项目根目录导入进去。 坑一:不支持ElmentUI和Vue-router
这个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应用转小程序就实现了。


常见问题

如果这篇文档没找到您想要的内容,请到 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)
   }
}


(责任编辑:admin)
顶一下
(1)
100%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
小邱 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2017-11-26 17:11 最后登录:2018-04-02 21:04