mpvue开发小程序（三）官方推荐以及开发遇到的问题

àì夳堔傛蜴生んèń 2022-04-12 13:13 174阅读 0赞

一，官方推荐

前面的fly.js也是官方推荐的

mpvue-weui    ui库，相当方便轻量好使  
mpvue-toast  一个基于mpvue的简单弹窗组件  
因为mpvue目前还不支持全局的组件，所以没有办法像vue组件引入一次就能在所有页面使用，但是mpvue团队已经在考虑新增全局组件功能了  
sass  不多介绍  
全局安装：npm install sass-loader node-sass --save-dev  
在style节点加上lang=”scss”，这样就可以愉快地使用sass进行开发了  
mpvue-router-patch   在mpvue 中使用 vue-router 兼容的路由写法

mpvue-echarts    适用于 Mpvue 的 ECharts 组件

二，mpvue开发中遇到的问题

1.路由跳转  
vue中 使用 vue-router 来进行路由跳转的。mpvue中只需要用 a 标签就行了。  
<a href="/page/counter/main?text=123">  
同时也可以使用小程序自身提供的api完成页面跳转  
wx.navigateTo(\{  
   url: \`/pages/counter/main?text=$\{this.text\}\`  
 \});  
或者引入mpvue-router-patach，以便在mpvue小程序中能使用vue-router的写法  
2.created生命周期  
created是vue的生命周期在mpvue里所有页面的created函数会在项目加载的时候被一起调用，可用性不大，可以使用onShow()代替，但是onShow()只有在隐藏又显示后才会显示,也就是第一次加载不会执行  
3.新增页面需要npm run dev重启一下。  
4.模板语法  
小程序里所有的 BOM／DOM 都不能用，也就是说v-html指令不能用。  
5.生命周期  
支持vue.js的生命周期部分，并且兼容了小程序的生命周期。  
6.不支持部分复杂的 JavaScript 渲染表达式  
mpvue会把 template 中的 \{ \{\}\} 双花括号的部分，直接编码到 wxml 文件中，由于微信小程序的能力限制(数据绑定)，所以无法支持复杂的 JavaScript 表达式  
目前可以使用的有+ - \* % ?: ! == === > < \[\] .。  
不支持\{ \{\}\}里写函数并传值的写法,需要注意。  
7.Class 与 Style 绑定  
基本全支持，不支持classObj和styleObj形式，  
8.条件渲染、列表渲染、计算属性全支持  
9.组件  
  暂不支持在组件引用时，在组件上定义 click 等原生事件、v-show（可用 v-if 代替）和 class style 等样式属性(例：<card class="class-name"> </card> 样式是不会生效的)  
  支持小程序原生组件，原生组件上的事件绑定，需要以 vue 的事件绑定语法来绑定，如 bindchange="eventName" 事件，需要写成 @change="eventName"，例如：  
10.  
模板中的img标签url指向相对路径时不能正确解析例如：  
<img src="~assets/images/home/header.png" />  
<img src="./assets/images/home/header.png" />  
暂时的解决方法是可以将静态资源放入static文件夹中，然后img标签用绝对路径引入：  
<img src="/static/images/home/header.png" />  
带来的副作用是不能享受url-loader的处理（小图片转base64）。  
另外，css中却是可以通过相对路径引入图片的，例如：  
.icon \{    background-image: url(‘./assets/images/home/header.png‘);\}  
11.  
通过this.$root.$mp.query进行获取小程序在 page onLoad 时候传递的 options。通过this.$root.$mp.appOptions进行获取小程序在 app onLaunch/onShow 时候传递的 options。  
使用this.$root.$mp.query获取参数需要在monted中获取，在created中会报Cannot read property 'query' of undefined 。  
12.  
引入echarts 打包后文件过大  
项目中需要引入echarts,直接引入后，打包完体积超过 2M了，没办法提交。echarts提供的有精简版本，我们可以导入精简的版本。  
import echarts from "echarts/dist/echarts.simple.min";  
import mpvueEcharts from "mpvue-echarts";  
具体的 echarts 使用，请看文档，有详细的介绍。

[mpvue开发小程序（四）项目展示与细节][mpvue]

[mpvue]: https://blog.csdn.net/tan9374/article/details/84770522