mpvue小步调以及微信直播踩坑总结

来源：未知 浏览 140次 时间 2021-06-17 06:06

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

我是比较熟悉vue的语法SEO关键词不然很多东西又要忘了

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

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

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

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

项目配置

使用官方的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') }, 复制代码 页面跳转后并没有销毁页面实例

比如一个搜索页面SEO关键词但是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()手动清空

关于微信直播

这个小程序需要引入监控相当于是直播功能SEO关键词目前为止看到的比较统一的解决办法就是：在onShow()或者onLoad()手动清空

标签： 组件程序mpvue页面

上一篇: 微信小语音识别、合成
下一篇: 小程序-记牌器，好用记牌器

热门文章

最新文章

QQ咨询