mpvue微信小程序动画_mpvue小程序以及微信直播踩坑总结
前段時(shí)間剛寫完一個(gè)mpvue的小程序，現(xiàn)在得閑必須趕緊記錄和總結(jié)一下，不然很多東西又要忘了
我是比較熟悉vue的語法，但是也猶豫過是用原生還是用mpvue，因?yàn)槟菚r(shí)候原生小程序已經(jīng)相當(dāng)成熟而mpvue才剛出來(踩坑和填坑的前人還很少)
所以我學(xué)習(xí)了幾天原生的框架和語法，果斷選擇了mpvue，真的是沒有對(duì)比就沒有傷害，對(duì)比原生體驗(yàn)不要太好
mpvue是一個(gè)使用 Vue.js 開發(fā)小程序的前端框架，他是將我們寫的vue文件重新編譯成wxml等文件，最后的底層實(shí)現(xiàn)還是用的小程序語法，所以原生小程序語法也是比較重要的，而且像很多下拉刷新，到底部請(qǐng)求下一頁什么的等等很多地方也是要用到小程序api的，所以建議大家在入坑之前還是了解一些小程序語法比較好
附上官方文檔mpvue.com/#_1
項(xiàng)目配置
使用官方的5分鐘上手，生成一個(gè)基本框架，后來開發(fā)也沒有手動(dòng)修改過他的配置
用到了4個(gè)插件
mpvue-weui? ? ui庫，相當(dāng)方便輕量好使
官網(wǎng)地址：?kuangpf.com/mpvue-weui/…
mpvue-toast??一個(gè)基于mpvue的簡(jiǎn)單彈窗組件
因?yàn)閙pvue目前還不支持全局的組件，所以沒有辦法像vue組件引入一次就能在所有頁面使用，但是mpvue團(tuán)隊(duì)已經(jīng)在考慮新增全局組件功能了
github地址：?github.com/linrui1994/…
sass? 不多介紹
全局安裝：npm install sass-loader node-sass --save-dev
在style節(jié)點(diǎn)加上lang=”scss”，這樣就可以愉快地使用sass進(jìn)行開發(fā)了
mpvue-router-patch? ?在mpvue 中使用 vue-router 兼容的路由寫法
當(dāng)知道m(xù)pvue不支持vue-router的時(shí)候我還是非常難受，還好mpvue團(tuán)隊(duì)后面發(fā)布了這個(gè)插件，非常簡(jiǎn)單好用
github地址：?github.com/F-loat/mpvu…
接下來的3個(gè)插件我沒有用過但是和mpvue-router-patch一樣是mpvue團(tuán)隊(duì)發(fā)布的，感覺應(yīng)該也不差，也推薦給大家如果需要可以花時(shí)間了解一下
mpvue-echarts? ??適用于 Mpvue 的 ECharts 組件
github地址：?github.com/F-loat/mpvu…
微信小程序富文本解析組件??適用于 Mpvue 的微信小程序富文本解析自定義組件
github地址：?github.com/F-loat/mpvu…
mpvue-entry自動(dòng)生成各頁面的入口文件??集中式頁面配置，自動(dòng)生成各頁面的入口文件，優(yōu)化目錄結(jié)構(gòu)，支持新增頁面熱更新
github地址：?github.com/F-loat/mpvu…
ajax請(qǐng)求封裝拿走不謝
let urlPath = '' // 項(xiàng)目的域名
export function post(url, data) {
wx.showLoading({
title: '努力加載中',
})
// 由于微信不會(huì)保存后端用于登陸驗(yàn)證的cookie，這里需要自己從登陸返回的數(shù)據(jù)里取到cookie，然后本地緩存，請(qǐng)求時(shí)在header里帶上cookie
let header = {}
url === 'user/loginworker' // 通過傳進(jìn)來的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: '登陸超時(shí)請(qǐng)重新登陸',
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表示傳入?yún)?shù)有問題
res.message = res.data.message, reject(res)
} else resolve(res)
// 存儲(chǔ)cookie
res.data.message === '登錄成功。' ? wx.setStorageSync("sessionid", res.header["Set-Cookie"]) : ""
}else {
res.message = '服務(wù)器錯(cuò)誤請(qǐng)求失敗'
reject(res)
}
wx.hideLoading()
}, fail(err) {
err.message = '請(qǐng)求超時(shí)請(qǐng)稍后再試'
reject (err)
wx.hideLoading()
}
})
})
}
復(fù)制代碼
生命周期鉤子
created是vue的生命周期在mpvue里所有頁面的created函數(shù)會(huì)在項(xiàng)目加載的時(shí)候被一起調(diào)用，可用性不大，可以使用onShow()代替，但是onShow()只有在隱藏又顯示后才會(huì)顯示,也就是第一次加載不會(huì)執(zhí)行
created() {
console.log('created')
},
mounted() {
console.log('mounted')
},
onLoad() {
console.log('onLoad')
},
onShow() {
console.log('onShow')
},
onUnload() {
console.log('onUnload')
},
onHide() {
console.log('onHide')
},
復(fù)制代碼
頁面跳轉(zhuǎn)后并沒有銷毀頁面實(shí)例
比如一個(gè)搜索頁面，頁面第一次進(jìn)來所有的數(shù)據(jù)都是空的，但你搜索一次之后，input框就有值了，這個(gè)時(shí)候再跳轉(zhuǎn)到其他頁面或者返回之后再進(jìn)入這個(gè)頁面那個(gè)值依然存在，頁面跳轉(zhuǎn)后并沒有銷毀頁面實(shí)例，而是將其推入頁面棧中，所以會(huì)保存之前的舊的數(shù)據(jù)，目前為止看到的比較統(tǒng)一的解決辦法就是：在onShow()或者onLoad()手動(dòng)清空
關(guān)于微信直播
這個(gè)小程序需要引入監(jiān)控相當(dāng)于是直播功能，這個(gè)組件也是有點(diǎn)坑
Live-player組件本身只能播放，如果想要在組件上加功能，像什么全屏靜音播放暫停之類的功能需要使用wx.createLivePlayerContext()方法，而且由于live-player層級(jí)是最高的，如果你需要在組件上加功能比如點(diǎn)一下全屏再點(diǎn)下退出全屏或者加css樣式，你必須寫在 cover-view cover-image上面，直接加在live-player上是沒用的
復(fù)制代碼
你以為這樣就完了嘛，不，如果你有一個(gè)直播列表，比如一個(gè)屏幕同時(shí)有一個(gè)以上的live-player組件那么你全屏的時(shí)候就會(huì)發(fā)現(xiàn)其余的組件因?yàn)閷蛹?jí)的原因全部覆蓋在你全屏的那個(gè)組件之上
解決辦法：全屏是v-if隱藏其余的組件，退出時(shí)再顯示
如有不足、需要改善或者還能優(yōu)化的地方歡迎指出不勝感激，歡迎留言交流? (′▽`???)**
總結(jié)
以上是生活随笔為你收集整理的mpvue微信小程序动画_mpvue小程序以及微信直播踩坑总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux高可用性,linux – 高可
- 下一篇： 父组件给子组件传值方法_【Vue】小学生