mpvue小程序以及微信直播踩坑总结

前段时间刚写完一个mpvue的小程序,现在得闲必须赶紧记录和总结一下,不然很多东西又要忘了

我是比较熟悉vue的语法,但是也犹豫过是用原生还是用mpvue,因为那时候原生小程序已经相当成熟而mpvue才刚出来(踩坑和填坑的前人还很少)

所以我学习了几天原生的框架和语法,果断选择了mpvue,真的是没有对比就没有伤害,对比原生体验不要太好

mpvue是一个使用 Vue.js 开发小程序的前端框架,他是将我们写的vue文件重新编译成wxml等文件,最后的底层实现还是用的小程序语法,所以原生小程序语法也是比较重要的,而且像很多下拉刷新,到底部请求下一页什么的等等很多地方也是要用到小程序api的,所以建议大家在入坑之前还是了解一些小程序语法比较好

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

项目配置

使用官方的5分钟上手,生成一个基本框架,后来开发也没有手动修改过他的配置

用到了4个插件

mpvue-weui    ui库,相当方便轻量好使

官网地址:http://kuangpf.com/mpvue-weui/#/

mpvue-toast  一个基于mpvue的简单弹窗组件

因为mpvue目前还不支持全局的组件,所以没有办法像vue组件引入一次就能在所有页面使用,但是mpvue团队已经在考虑新增全局组件功能了

github地址:https://github.com/linrui1994/mpvue-toast

sass  不多介绍

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

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

mpvue-router-patch   在mpvue 中使用 vue-router 兼容的路由写法

当知道mpvue不支持vue-router的时候我还是非常难受,还好mpvue团队后面发布了这个插件,非常简单好用

github地址:https://github.com/F-loat/mpvue-router-patch

接下来的3个插件我没有用过但是和mpvue-router-patch一样是mpvue团队发布的,感觉应该也不差,也推荐给大家如果需要可以花时间了解一下

mpvue-echarts    适用于 Mpvue 的 ECharts 组件

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

微信小程序富文本解析组件  适用于 Mpvue 的微信小程序富文本解析自定义组件

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

mpvue-entry自动生成各页面的入口文件  集中式页面配置,自动生成各页面的入口文件,优化目录结构,支持新增页面热更新

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

ajax请求封装拿走不谢

let urlPath = '' // 项目的域名
export function post(url, data) {wx.showLoading({title: '努力加载中',})
// 由于微信不会保存后端用于登陆验证的cookie,这里需要自己从登陆返回的数据里取到cookie,然后本地缓存,请求时在header里带上cookielet header = {} url === 'user/loginworker' // 通过传进来的url判断是否是登陆页? header = {} : header = {'content-type': 'application/x-www-form-urlencoded','cookie': wx.getStorageSync("sessionid")} return new Promise((resolve, reject) => {wx.request({url: urlPath   url,data: data,method: 'get',header: header, success(res) {console.log(res)if (res.statusCode === 200) {if (res.data === 9999) { // 与后端的后端返回9999表示cookie失效wx.showModal({content: '登陆超时请重新登陆',showCancel: false,success: function (res) {if (res.confirm) {wx.navigateTo({url: '../../pages/login/main',})}}})} else if (res.data.code && res.data.code !== 200) { // 若返回coode码且不等于200表示传入参数有问题res.message = res.data.message, reject(res)} else resolve(res)// 存储cookieres.data.message === '登录成功。' ? wx.setStorageSync("sessionid", res.header["Set-Cookie"]) : ""}else {res.message = '服务器错误请求失败'reject(res)}wx.hideLoading()}, fail(err) {err.message = '请求超时请稍后再试'reject (err)wx.hideLoading()}})})
}

生命周期钩子

created是vue的生命周期在mpvue里所有页面的created函数会在项目加载的时候被一起调用,可用性不大,可以使用onShow()代替,但是onShow()只有在隐藏又显示后才会显示,也就是第一次加载不会执行

 created() {console.log('created')},mounted() {console.log('mounted')},onLoad() {console.log('onLoad')},onShow() {console.log('onShow')},onUnload() {console.log('onUnload')},onHide() {console.log('onHide')},

页面跳转后并没有销毁页面实例

比如一个搜索页面,页面第一次进来所有的数据都是空的,但你搜索一次之后,input框就有值了,这个时候再跳转到其他页面或者返回之后再进入这个页面那个值依然存在,页面跳转后并没有销毁页面实例,而是将其推入页面栈中,所以会保存之前的旧的数据,目前为止看到的比较统一的解决办法就是:在onShow()或者onLoad()手动清空

关于微信直播

这个小程序需要引入监控相当于是直播功能,这个组件也是有点坑

Live-player组件本身只能播放,如果想要在组件上加功能,像什么全屏静音播放暂停之类的功能需要使用wx.createLivePlayerContext()方法,而且由于live-player层级是最高的,如果你需要在组件上加功能比如点一下全屏再点下退出全屏或者加css样式,你必须写在 cover-view cover-image上面,直接加在live-player上是没用的

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

你以为这样就完了嘛,不,如果你有一个直播列表,比如一个屏幕同时有一个以上的live-player组件那么你全屏的时候就会发现其余的组件因为层级的原因全部覆盖在你全屏的那个组件之上

解决办法:全屏是v-if隐藏其余的组件,退出时再显示

如有不足、需要改善或者还能优化的地方欢迎指出不胜感激,欢迎留言交流  (´▽`ʃ♡ƪ)**

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/367067.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

适用于高级Java开发人员的十大书籍

Java是当今最流行的编程语言之一。 有很多适合初学者的书籍。 但是对于那些使用Java进行过一段时间编程的人来说&#xff0c;其中有些人看起来有些简单和多余。 初学者的书没有带来新鲜有趣的想法。 但是&#xff0c;高级Java书籍并不总是一应俱全&#xff0c;部分原因是因为它…

python apscheduler执行_python apscheduler 每两小时执行一次

from datetime import datetimefrom apscheduler.schedulers.blocking import BlockingSchedulerdef job_function():print("Hello World")sched BlockingScheduler()每2小时触发sched.add_job(job_function, interval, hours2)sched.start()设定执行区间sched.add_…

Ajax知识总结

一 AJAX Asynchronous JavaScript and XML&#xff08;异步的 JavaScript 和 XML&#xff09;。 AJAX 不是新的编程语言&#xff0c;而是一种使用现有标准的新方法。AJAX 最大的优点是在不重新加载整个页面的情况下&#xff0c;可以与服务器交换数据并更新部分网页内容。AJAX …

Leetcode 456. 132 Pattern

题目的意思就是给你一个数组 里面一堆数&#xff0c;你是否能找到这样三个数&#xff0c;第一个数比第三个数小&#xff0c;第二个数最大。比如 1, 3, 2 或者 4, 9, 5 这种&#xff0c;数字可以不连续在一起&#xff0c;但是要保证顺序不变&#xff0c;只要有这么一组数就可以…

「起点订阅页」Checkbox 美化引发的蝴蝶效应

本文作者&#xff1a;任家乐 原创声明&#xff1a;本文为阅文前端团队 YFE 成员出品&#xff0c;请尊重原创&#xff0c;转载请联系公众号 (id: yuewen_YFE) 获取授权&#xff0c;并注明作者、出处和链接。 性能风暴 「据说亚马逊雨林的一只蝴蝶偶尔扇动几下翅膀&#xff0c;可…

python polar函数_Python可视化很简单,可是你会吗?python绘制饼图、极线图和气泡图,让我来教教你吧,一文教会!!!...

matplotlib库作为Python数据化可视化的最经典和最常用库&#xff0c;掌握了它就相当于学会了Python的数据化可视化&#xff0c;今天呢&#xff0c;咱们就一起来聊聊关于Python如何去绘制饼图、极线图和气泡图吧好啦&#xff0c;废话少说&#xff0c;咱们就开始吧&#xff01;用…

Java中的访问者设计模式–示例教程

访客模式是行为设计模式之一 。 当我们必须对一组相似类型的对象执行操作时&#xff0c;将使用访问者模式。 借助访问者模式&#xff0c;我们可以将操作逻辑从对象移动到另一个类。 例如&#xff0c;假设有一个购物车&#xff0c;我们可以在其中添加不同类型的项目&#xff08…

函数递归与二分法

1.什么是函数递归 函数的递归调用是函数嵌套调用的一种特殊形式&#xff0c; 特殊在调用一个函数的过程中又直接或者间接地调用了该函数本身 递归本质就是一个循环的过程&#xff0c; 但是递归必须满足两个原则&#xff1a; 1.每进入下一层递归&#xff0c;问题的规模必须有所减…

使用Oracle WebLogic创建部署计划

创建部署计划 部署计划是JSR-88部署标准的一部分&#xff0c;尽管在该标准中未明确说明。 部署计划是一个XML文档&#xff0c;用于定义自定义WebLogic Server部署环境。 此配置可用于覆盖在应用程序归档文件中定义的特定设置。 有许多原因可能导致您不希望修改应用程序存档的原…

记录一个前端架构的想法

前端&#xff0c;真的是让我哭笑不得的职业&#xff0c;从几年前作为打酱油的理想职业到现在的热门职业&#xff0c;无疑在这个过程中&#xff0c;门槛变高了&#xff0c;而且还是非常高。一大堆的框架和库&#xff0c;像什么vue啦、react啦、angular啦、webpack啦等等等等。让…

java文件解压文件_java 文件解压缩

直接上代码&#xff1a;import java.io.BufferedInputStream;import java.io.BufferedOutputStream;import java.io.File;import java.io.FileInputStream;import java.io.FileNotFoundException;import java.io.FileOutputStream;import java.io.IOException;import java.io.I…

JAVA 遍历Map对象

方式一 这是最常见的并且在大多数情况下也是最可取的遍历方式。在键值都需要时使用。 Map<Integer, Integer> map new HashMap<Integer, Integer>(); for (Map.Entry<Integer, Integer> entry : map.entrySet()) { System.out.println("Key " …

sol - 0x60,61,62

[例题]走廊泼水节 设当前扫描到边x,y&#xff0c;长度为z&#xff0c;x所处的并查集为Sx&#xff0c;y所处的并查集为Sy&#xff1b; 对于任意u属于Sx&#xff0c;v属于Sy&#xff0c;我们可以知道u&#xff0c;v之间必连一条边 但是我们要在保证x,y之间的边属于唯一最小生成树…

将Spring Bean注入非托管对象

依赖注入带来的好处可能会上瘾。 使用注入配置应用程序结构比手动完成所有解析要容易得多。 当我们有一些在容器外部实例化的非托管类时&#xff0c;例如在Vaadin UI组件或JPA实体等其他框架中&#xff0c;它们是很难被退出的。 当我们使用域驱动设计时&#xff0c;后者尤其重要…

java 编程原理_Java网络编程 -- 网络编程基础原理

Hello&#xff0c;今天记录下 Java网络编程 --> 网络编程基础原理。一起学习&#xff0c;一起进步。继续沉淀&#xff0c;慢慢强大。希望这文章对您有帮助。若有写的不好的地方&#xff0c;欢迎评论给建议哈&#xff01;初写博客不久&#xff0c;我是杨展浩。这是我的第十五…

JavaScript基础之--- 深拷贝与浅拷贝

理解深拷贝和浅拷贝之前&#xff0c;先来看一下JavaScript的数据类型。 1、基本类型和引用类型 //案例1 var num1 1, num2 num1; console.log(num1) //1 console.log(num2) //1 num2 2; //修改num2 console.log(num1) //1 console.log(num2) //2 //案例2 var obj1 {x: 1, …

vue菜鸟从业记:完成项目最后一公里之真机测试和打包上线

最近我朋友王小闰他们公司的项目开发已经进入收尾阶段&#xff0c;前后端并行开发的差不多了&#xff0c;联调也调过了&#xff0c;上篇文章里也讲到了&#xff0c;所谓联调&#xff0c;就仿佛在说“我也不知道我的接口文档写的对不对&#xff0c;我们验证一下吧&#xff1f;我…

血淋淋的事实告诉你:你为什么不应该在JS文件中保存敏感信息

在JavaScript文件中存储敏感数据&#xff0c;不仅是一种错误的实践方式&#xff0c;而且还是一种非常危险的行为&#xff0c;长期以来大家都知道这一点。 而原因也非常简单&#xff0c;我们可以假设你为你的用户动态生成了一个包含API密钥的JavaScript文件&#xff1a; apiCall…

使用Infinispan进行Camel的事务性缓存

不久前&#xff0c;我为Camel 创建了Redis连接器。 Redis是很棒的键值存储&#xff08;还有更多&#xff09;&#xff0c;但是随后我需要一个在与Camel相同的JVM中运行的缓存&#xff0c;并注意到Infinispan已切换到ASL v2 。 Camel中已经有其他用于在JVM上进行缓存的连接器&am…

“景驰科技杯”2018年华南理工大学程序设计竞赛 A. 欧洲爆破(思维+期望+状压DP)...

题目链接&#xff1a;https://www.nowcoder.com/acm/contest/94/A 题意&#xff1a;在一个二维平面上有 n 个炸弹&#xff0c;每个炸弹有一个坐标和爆炸半径&#xff0c;引爆它之后在其半径范围内的炸弹也会爆炸&#xff0c;每个炸弹最多爆炸一次&#xff0c;每次随机选一个未引…