前言
開發(fā)項(xiàng)目時屹篓，實(shí)際遇到的一些功能需求和問題匯總。列出了當(dāng)時參考的一些文章和官方文檔。
開發(fā)框架：mpvue
官方文檔：5分鐘快速上手
小程序跳轉(zhuǎn)外鏈
參考文章：小程序跳轉(zhuǎn)到非小程序頁面的外部鏈接地址
- 要跳轉(zhuǎn)的鏈接必須是https的
- 需要用web-view組件丹弱，web-view組件是一個可以用來承載網(wǎng)頁的容器烂叔，會自動鋪滿整個小程序頁面谨胞。（個人類型與海外類型的小程序暫不支持使用。也就是說個人申請的小程序蒜鸡，就別想跳轉(zhuǎn)了）
- 需要在小程序后臺配置業(yè)務(wù)域名胯努，也就是你要跳轉(zhuǎn)網(wǎng)頁地址的域名。（設(shè)置-開發(fā)設(shè)置 -業(yè)務(wù)域名）
- 配置業(yè)務(wù)域名時逢防，會要求下載校驗(yàn)文件叶沛，該文件需要放置到訪問外鏈地址的根目錄下，可能會需要運(yùn)維協(xié)助
- 跳轉(zhuǎn)外鏈后忘朝，如果打開的二級頁中有新的域名地址灰署，同樣需要重復(fù)上述步驟
小程序內(nèi)部頁面跳轉(zhuǎn)
低版本兼容
為便于開發(fā)者解決低版本基礎(chǔ)庫無法兼容小程序的新功能的問題，開發(fā)者可設(shè)置小程序最低基礎(chǔ)庫版本要求。
開發(fā)者可以登錄小程序管理后臺溉箕，進(jìn)入「設(shè)置 - 基本設(shè)置 - 基礎(chǔ)庫最低版本設(shè)置」進(jìn)行配置晦墙。在配置前，開發(fā)者可查看近 30 天內(nèi)訪問當(dāng)前小程序的用戶所使用的基礎(chǔ)庫版本占比肴茄，以幫助開發(fā)者了解當(dāng)前用戶使用的情況晌畅。
微信小程序 基礎(chǔ)庫版本與客戶端版本對應(yīng)關(guān)系
小程序iphonex適配
參考文章：微信小程序API之設(shè)備獲取系統(tǒng)信息getSystemInfo
mpvue支持less
小程序生命周期
坑點(diǎn)：右上角按鈕只是把小程序退到了后臺，并沒有關(guān)閉小程序独郎，所以如果未做處理踩麦，下次進(jìn)去還是上一次退出前的狀態(tài)。不會像h5一樣刷新打開頁面氓癌。也沒有開放銷毀小程序的監(jiān)聽谓谦。
前臺、后臺定義： 當(dāng)用戶點(diǎn)擊左上角關(guān)閉贪婉，或者按了設(shè)備 Home 鍵離開微信反粥，小程序并沒有直接銷毀，而是進(jìn)入了后臺疲迂；當(dāng)再次進(jìn)入微信或再次打開小程序才顿，又會從后臺進(jìn)入前臺。
swiper 間距輪播
參考文章：微信小程序使用swiper組件實(shí)現(xiàn)類3D輪播圖
參考文章：小程序swiper組件實(shí)現(xiàn)不同效果間距輪播
最后用的第二篇里面的方法三尤蒿，需要用到Animation動畫對象
第一篇文章里直接用css的transition郑气，動畫不流暢。
小程序swiper組件bug：
小程序引入外部字體
參考文章：小程序如何引入外部字體
用過里面的方法二
圖片預(yù)覽
只有圖片全屏預(yù)覽后腰池，才能通過長按圖片吊起菜單欄（保存圖片尾组，分享圖片，收藏圖片）
保存圖片到相冊
// 保存圖片
export function saveImg (imgurl) {
wx.showLoading({
title: '圖片保存中...'
})
wx.downloadFile({
url: imgurl,
success: function (res) {
// 圖片保存到本地
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function (data) {
wx.hideLoading()
wx.showModal({
title: '圖片已存入相冊',
content: '好東西要分享示弓，發(fā)給朋友們看看讳侨。',
showCancel: false
})
},
fail: function (err) {
console.log(err)
if (err.errMsg === 'saveImageToPhotosAlbum:fail:auth denied' || err.errMsg === 'saveImageToPhotosAlbum:fail auth deny' || err.errMsg === 'saveImageToPhotosAlbum:fail authorize no response') {
// 這邊微信做過調(diào)整，必須要在按鈕中觸發(fā)奏属，因此需要在彈框回調(diào)中進(jìn)行調(diào)用
wx.showModal({
title: '提示',
content: '需要您授權(quán)保存相冊',
showCancel: false,
success: modalSuccess => {
wx.openSetting({
success (settingdata) {
console.log('settingdata', settingdata)
if (settingdata.authSetting['scope.writePhotosAlbum']) {
wx.showModal({
title: '提示',
content: '獲取權(quán)限成功,再次點(diǎn)擊按鈕即可保存',
showCancel: false
})
} else {
wx.showModal({
title: '提示',
content: '獲取權(quán)限失敗跨跨，將無法保存到相冊！',
showCancel: false
})
}
},
fail (failData) {
console.log('failData', failData)
},
complete (finishData) {
console.log('finishData', finishData)
}
})
}
})
}
},
complete (res) {
wx.hideLoading()
}
})
}
})
}
轉(zhuǎn)發(fā)小程序
1. 顯示轉(zhuǎn)發(fā)按鈕
wx.showShareMenu(Object object)
mounted () {
wx.showShareMenu({
withShareTicket: true
})
},
2. 自定義轉(zhuǎn)發(fā)的標(biāo)題囱皿、圖片
onShareAppMessage(Object)
監(jiān)聽用戶點(diǎn)擊頁面內(nèi)轉(zhuǎn)發(fā)按鈕（<button> 組件 open-type="share"）或右上角菜單“轉(zhuǎn)發(fā)”按鈕的行為勇婴，并自定義轉(zhuǎn)發(fā)內(nèi)容。
官網(wǎng)文檔：onShareAppMessage(Object)
mpvue中與mounted寫的位置類似
onShareAppMessage: function (options) {
return sharehanle(options)
},
處理設(shè)置菜單分享和按鈕分享的自定義標(biāo)題嘱腥、圖片等咆耿。
export function sharehanle (options) {
// var that = this
// 設(shè)置菜單中的轉(zhuǎn)發(fā)按鈕觸發(fā)轉(zhuǎn)發(fā)事件時的轉(zhuǎn)發(fā)內(nèi)容
console.log(options)
var shareObj = {
title: '分享標(biāo)題', // 默認(rèn)是小程序的名稱(可以寫slogan等)
path: '/pages/index/main', // 默認(rèn)是當(dāng)前頁面，必須是以‘/’開頭的完整路徑
imageUrl: '', // 自定義圖片路徑爹橱，可以是本地文件路徑萨螺、代碼包文件路徑或者網(wǎng)絡(luò)圖片路徑窄做，支持PNG及JPG，不傳入 imageUrl 則使用默認(rèn)截圖慰技。顯示圖片長寬比是 5:4
success: function (res) {
// 轉(zhuǎn)發(fā)成功之后的回調(diào)
if (res.errMsg === 'shareAppMessage:ok') {
console.log('分享成功')
}
},
fail: function (res) {
// 轉(zhuǎn)發(fā)失敗之后的回調(diào)
if (res.errMsg === 'shareAppMessage:fail cancel') {
// 用戶取消轉(zhuǎn)發(fā)
} else if (res.errMsg === 'shareAppMessage:fail') {
// 轉(zhuǎn)發(fā)失敗椭盏，其中 detail message 為詳細(xì)失敗信息
}
},
complete: function () {
// 轉(zhuǎn)發(fā)結(jié)束之后的回調(diào)（轉(zhuǎn)發(fā)成不成功都會執(zhí)行）
}
}
// 來自頁面內(nèi)的按鈕的轉(zhuǎn)發(fā)
// if (options.from === 'button') {
// var eData = options.target.dataset
// console.log(eData.name) // shareBtn
// // 此處可以修改 shareObj 中的內(nèi)容
// shareObj.path = '/pages/btnname/btnname?btn_name=' + eData.name
// }
// 返回shareObj
return shareObj
}
export default {
sharehanle
}
微信自帶loading，提示和彈窗API
1. loading
顯示
wx.showLoading({
title: '圖片保存中...'
})
隱藏
wx.hideLoading()
2. Modal
wx.showModal({
title: '提示',
content: '獲取權(quán)限成功,再次點(diǎn)擊按鈕即可保存',
showCancel: false
})
3.Toast
wx.showToast({
title: '提交成功',
icon: 'succes',
duration: 1000,
mask: true
})
統(tǒng)計
會用到的應(yīng)該是自定義分析吻商，也就是按鈕點(diǎn)擊等事件的統(tǒng)計掏颊。
其他
-
background-image只能用網(wǎng)絡(luò)url或者base64.本地圖片要用image標(biāo)簽才行。
小程序里有視頻播放艾帐，審核的時候會有資質(zhì)問題乌叶，需使用封裝的視頻插件
mpvue 事件的參數(shù)通過綁定是用$event傳入
以swiper舉例
<swiper class="sub_swiper"
:indicator-dots="indicatorDots"
:autoplay="autoplay"
:interval="interval"
:duration="duration"
:previous-margin="previousMargin"
:next-margin="nextMargin"
:current ="curMovieIndex"
<!--傳入事件參數(shù)-->
@change="handleChange($event)">
<block v-for="(item, index) in datalist" :key="index">
<swiper-item>
<div class="item" :class="{'active_item': curMovieIndex === index }" :animation="index == curMovieIndex ? animationData : animationData2">
<image class="img" :src="item.coverImg"></image>
</div>
</swiper-item>
</block>
</swiper>
handleChange (e) {
// 這里獲取參數(shù)
let oIndex = e.mp.detail.current
// 修改swiper展示index
store.commit('setCurMovieIndex', oIndex)
this.changeActive()
this.changeNormal()
},
