mpvue微信小程序动画_mpvue小程序以及微信直播踩坑总结
前段时间刚写完一个mpvue的小程序,现在得闲必须赶紧记录和总结一下,不然很多东西又要忘了
我是比较熟悉vue的语法,但是也犹豫过是用原生还是用mpvue,因为那时候原生小程序已经相当成熟而mpvue才刚出来(踩坑和填坑的前人还很少)
所以我学习了几天原生的框架和语法,果断选择了mpvue,真的是没有对比就没有伤害,对比原生体验不要太好
mpvue是一个使用 Vue.js 开发小程序的前端框架,他是将我们写的vue文件重新编译成wxml等文件,最后的底层实现还是用的小程序语法,所以原生小程序语法也是比较重要的,而且像很多下拉刷新,到底部请求下一页什么的等等很多地方也是要用到小程序api的,所以建议大家在入坑之前还是了解一些小程序语法比较好
附上官方文档mpvue.com/#_1
项目配置
使用官方的5分钟上手,生成一个基本框架,后来开发也没有手动修改过他的配置
用到了4个插件
mpvue-weui ui库,相当方便轻量好使
官网地址: kuangpf.com/mpvue-weui/…
mpvue-toast 一个基于mpvue的简单弹窗组件
因为mpvue目前还不支持全局的组件,所以没有办法像vue组件引入一次就能在所有页面使用,但是mpvue团队已经在考虑新增全局组件功能了
github地址: github.com/linrui1994/…
sass 不多介绍
全局安装:npm install sass-loader node-sass --save-dev
在style节点加上lang=”scss”,这样就可以愉快地使用sass进行开发了
mpvue-router-patch 在mpvue 中使用 vue-router 兼容的路由写法
当知道mpvue不支持vue-router的时候我还是非常难受,还好mpvue团队后面发布了这个插件,非常简单好用
github地址: github.com/F-loat/mpvu…
接下来的3个插件我没有用过但是和mpvue-router-patch一样是mpvue团队发布的,感觉应该也不差,也推荐给大家如果需要可以花时间了解一下
mpvue-echarts 适用于 Mpvue 的 ECharts 组件
github地址: github.com/F-loat/mpvu…
微信小程序富文本解析组件 适用于 Mpvue 的微信小程序富文本解析自定义组件
github地址: github.com/F-loat/mpvu…
mpvue-entry自动生成各页面的入口文件 集中式页面配置,自动生成各页面的入口文件,优化目录结构,支持新增页面热更新
github地址: github.com/F-loat/mpvu…
ajax请求封装拿走不谢
let urlPath = '' // 项目的域名
export function post(url, data) {
wx.showLoading({
title: '努力加载中',
})
// 由于微信不会保存后端用于登陆验证的cookie,这里需要自己从登陆返回的数据里取到cookie,然后本地缓存,请求时在header里带上cookie
let 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)
// 存储cookie
res.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组件那么你全屏的时候就会发现其余的组件因为层级的原因全部覆盖在你全屏的那个组件之上
解决办法:全屏是v-if隐藏其余的组件,退出时再显示
如有不足、需要改善或者还能优化的地方欢迎指出不胜感激,欢迎留言交流 (´▽`ʃ♡ƪ)**
mpvue微信小程序动画_mpvue小程序以及微信直播踩坑总结相关推荐
- mpvue微信小程序动画_mpvue 与微信小程序的火花
介绍 项目介绍 WeScale 定位为音乐训练小程序,初期规划了基础音阶的三个训练,以及他们的镜像模式. 数字简谱 字母简谱 数字简谱对字母简谱 后期看情况更新追加其他训练. 产品展示 扫描下方小程序 ...
- mpvue微信小程序动画_mpvue微信小程序系列
项目空闲时间,来做一波温故知新. 当前时期的需求是做一个拼团的小程序. 在这之前在做一个微信公众号H5项目,技术栈是Vue全家桶(vue+router+vuex+vant...).在新的小程序项目中有 ...
- mpvue小程序以及微信直播踩坑总结
前段时间刚写完一个mpvue的小程序,现在得闲必须赶紧记录和总结一下,不然很多东西又要忘了 我是比较熟悉vue的语法,但是也犹豫过是用原生还是用mpvue,因为那时候原生小程序已经相当成熟而mpvue ...
- 微信小程序动画效果,小程序animation动画
微信小程序动画效果 最近一直在做小程序开发,在官方文档中无意间看到过渡动画效果,我就有点小激动,用每一个开发框架的时候我都最先研究动画和过渡 闲来无事写了一个小demo <!--wxml代码-- ...
- Unity 程序动画 2D,3D程序蜘蛛脚,人物程序性动画
强大的程序腿效果 程序脚完全使用算法完成,没有复杂的物理运算 3D蜘蛛脚算法 public class SpiderProceduralAnimation : MonoBehaviour{public ...
- 【Python】如何发布编写好的Python应用程序之Python Release for Windows(附踩坑经验)
运筹优化博士,只做原创博文.更多关于运筹学,优化理论,数据科学领域的内容,欢迎关注我的知乎账号:https://www.zhihu.com/people/wen-yu-zhi-37 最近写了几个Pyt ...
- html微信拆红包动画特效,利用jQuery实现微信红包领取动画特效
特效描述:利用jQuery实现 微信红包 领取动画特效.利用jQuery实现微信红包领取动画特效 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 点击打开 $(function () ...
- php接入微信支付,扫码支付和H5支付(非微信浏览器),基于thinkPHP框架 WeChatDeveloper支付类包 踩坑指南
此文章入选<PHP领域内容榜>第4名 文章介绍 本文主要介绍通过thinkPHP5和第三方支付类包(WeChatDeveloper)实现快速接入微信扫码支付和微信H5手机网站支付(非微信浏 ...
- 微信小程序入门的一些建议,替大家踩坑
小程序入门教程 1, 建议先去看官方文档 2,说说app.json这个文件 3.app.js 4.点击事件 5.跳转页面 最后要说一下我踩的一个大坑,样式问题 1, 建议先去看官方文档 微信小程序官方 ...
最新文章
- JavaScript的运行模式
- 老生常谈:文字常量区的那点事
- Linux内核中max()宏的奥妙何在?(一)
- Linux下DIR,dirent,stat等结构体详解(转)
- mysql 启动卡主,cpu 100%
- SAP UI5 应用开发教程之四十五 - 如何在 SAP UI5 应用里使用 jQuery 和原生的 DOM API
- final关键字_Java面试-谈谈对final关键字的理解
- window环境读linux文件,Windows本地环境和Linux腾讯云服务器之间传输文件的方法
- 刚刚,任正非为姚安娜商标事件道歉
- oracle11 分配表权限,Oracle11g权限--角色
- 数学建模亚太赛优秀论文_泰迪杯数据分析职业技术大赛总结暨亚太地区大学生数学建模经验分享会...
- 3.sf2 核心目录及文件结构
- GSON的用法(处理对象和JSON的相互转化)
- Thinkphp学习笔记——友情链接的添加和验证
- 【新闻推荐系统】(task3)Scrapy基础及新闻爬取实战
- 05、汇编语言和汇编软件
- 题目1035:找出直系亲属 树
- JS代码获取当前项目名称
- SLF4J: Class path contains multiple SLF4J bindings(log4j与logback冲突了)
- 无所遁形——快把你的口罩戴上(口罩识别)
热门文章
- java 开发书籍 目录_《零基础 Java 开发 》全书目录
- mysql5.7卸载语句_MySQL5.7完全卸载
- stm32f407 tim4 复用_波分复用对比,CWDM、DWDM、CCWDM有何不同?
- “智慧法院”数据融合分析与集成应用
- Doxygen with Graphviz to generate call graph on Mac
- 年轻的程序员怎么快速成为架构师?
- 八、图形与图像处理(2)
- Oracle Database Administrator验证模式
- IT管理人才必备的十大能力(转)
- 那些年破处倒闭的公司,都有哪些特征?打工人避雷必看