mpvue采坑

1.mpvue不支持ElmentUI和Vue-router

2.安装一些依赖不用写webpack配置文件,vue-cli webpack自动配置;

比如说你安装sass-lodaer node-sass,修改配置文件就会报错,需要重写卸载再安装,并且不要动配置文件。

3.安装node-sass失败 需要安装淘宝镜像,进行装部分依赖 npm install -g cnpm --registry=https://registry.npm.taobao.org 这样之后用cnpm就超级快了

4.相对路径的图片不显示,图片要放到static目录

5.图片处理不能等比缩放拉伸或压缩,处理图片使用小程序给的image组件 设置mode有效值

6.eslint代码严查严格 安装模板可以不安装eslint依赖

7.小程序一些绑定元素 换成vue写法,小程序提供的组件方法可以继续使用,换成vue语法就可以使用

8.小程序添加新页面要重新npm run dev

9.生命周期不要用created,用了created即使你没有打开那个页面,也会触发里面的内容。用mounted来做一些页面初始化的事情(师傅告诉我的)。

10.利用a标签跳转传参,参数被编译成字符串。需要加点 击事件,使用 wx.navigateTo({ url })

11.全局引用scss不生效,语法报错,需要单文件引入。但是css可以全局引用

12.微信小程序不显示html格式的内容,但是通过接口读取出来的是富文本内容。百度解决方法 使用wxParse然而这个方法对mpvue并不能更好的支持。 后来想到了 v-html ,突然发现了mpvue强大之处。但是官网提出不支持v-html。。。直接被编译成rich-text

但是微信提供的rich-text组件,不能修改内部标签样式 ,图片超出很大,直接可以横向滑动,所以问题待解决,此方法也不可行。

无奈之下请教一下别人给我指教了一下mpvue-wxparse

方法:1.装依赖cnpm install mpvue-wxparse -D

2.在需要用到的页面引用 import wxParse from "mpvue-wxparse";

components: {

wxParse

},

3.语法





这样问题就成功解决了!!!

13.渲染部分会转成 wxml ,wxml 不支持过滤器,所以这部分功能不支持。

14.template 中所以无法支持复杂的 JavaScript 表达式。if else 可换成三目运算,只支持简单的.

15.遇到过微信小程序wx.navigateTo不起作用的原因:

(1).app.json里tabBar里面的list使用的pagePath跟wx.navigateTo路径一样的话不起作用,实现不了跳转。

(2).可以使用wx.switchTab和和wx.redirectTo来代替,但是有一定的不同;

(3).wx.switchTab是唯一能跳转到 tabBar 页面,而wx.switchTab却只能设置tabBar相同的路径

(4).wx.redirectTo关闭当前页面,用wx.navigateTo时,能用wx.navigateBack

(5).wx.navigateTo能跳转下一页面还能有返回上一页面的功能

this.$mp.query去获取url的参数
引用原文 https://zhuanlan.zhihu.com/p/37397384

你可能感兴趣的:(mpvue采坑)