微信小程序mpvue踩坑指南

最新推荐文章于 2024-10-12 22:26:57 发布

你慌什么呢

最新推荐文章于 2024-10-12 22:26:57 发布

阅读量1k

点赞数

分类专栏：项目踩坑经历文章标签：小程序 mpvue

本文链接：https://blog.csdn.net/qq_28940569/article/details/84876188

版权

项目踩坑经历专栏收录该内容

1 篇文章 0 订阅

订阅专栏

之前小程序几乎都是采用小程序原生方法组件，最近刚写完一个mpvue的小程序，遇到很多坑，所以想记录下来，不过没有对比就没有伤害，对比原生体验不要太好，既能熟练小程序api ，又能熟练vue，可以说是一举两得。
因为mpvue是一个使用 Vue.js 开发小程序的前端框架，他是将我们写的vue文件重新编译成wxml等文件，由于小程序还有很多方便的api，所以最好有一些小程序跟vue基础。

mpvue官方文档：http://mpvue.com/#_1

项目配置

使用官方的5分钟上手，生成一个基本框架，不再赘述。

mpvue-iview 一个基于mpvue的ui组件库

官网地址：https://weapp.iviewui.com/docs/guide/start

不过基本没有怎么用，因为小程序的原因，ui组件几乎都是以shadow-root的方式创建的DOM元素。虽然密封性好，但是无法通过常规的方法去修改样式，只能借用 /deep/ 深度选择器来添加样式。最后太麻烦还是放弃，全部手写了(┬＿┬)

less/sass 看自己爱好

全局安装：npm install sass-loader node-sass --save-dev

在style节点加上lang=”scss”，这样就可以愉快地使用sass进行开发了

mpvue-wxParse小程序富文本解析组件

github地址：https://github.com/F-loat/mpvue-wxParse

npm i mpvue-wxparse

import wxParse from "mpvue-wxparse";

<wx-parse :content="content"  @preview="preview" @navigate="navigate"></wx-parse>

components: {
  wxParse
},
methods:{
	preview(src, e) {
    // do something
    console.log(src)
  },
	navigate(href, e) {
    // do something
  },
}
 
@import url("~mpvue-wxparse/src/wxParse.css");

mpvue-calendar小程序富文本解析组件

github地址：https://github.com/Hzy0913/mpvue-calendar

npm i mpvue-calendar

声网Agora.io（小程序端的sdk是个大坑）

不知道是小程序的限制，还是mpvue应用不够广泛，几乎大部分的小程序插件，都只有安装包直接下载，很少有能够通过npm直接安装的插件，这就导致mpvue使用插件时很难找到现成的方法，只能手动下载，然后require引入。

 const AgoraMiniappSDK = require("../../lib/mini-app-sdk-production.js");
 methods:{
	init(){
		let client = {};
		client = new AgoraMiniappSDK.Client();
	}
}

注：小程序端的SDK离开频道时，没有回调函数。

关于小程序的一些小坑

微信直播、视频通话

live-player、live-pusher等小程序原生组件层级最高，只能通过嵌套cover-view、cover-image才能插入样式、内容。


<live-player id='liveInfo' src="" mode="RTC" autoplay='true' @statechange="statechange" @error="error">
    <cover-image @click="requestFullScreen"></cover-image>
</live-player>