前言
开发项目时，实际遇到的一些功能需求和问题汇总。列出了当时参考的一些文章和官方文档。
开发框架：mpvue
官方文档：5分钟快速上手
小程序跳转外链
- 要跳转的链接必须是https的
- 需要用web-view组件，web-view组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。（个人类型与海外类型的小程序暂不支持使用。也就是说个人申请的小程序，就别想跳转了）
- 需要在小程序后台配置业务域名，也就是你要跳转网页地址的域名。（设置-开发设置 -业务域名）
- 配置业务域名时，会要求下载校验文件，该文件需要放置到访问外链地址的根目录下，可能会需要运维协助
- 跳转外链后，如果打开的二级页中有新的域名地址，同样需要重复上述步骤
小程序内部页面跳转
低版本兼容
为便于开发者解决低版本基础库无法兼容小程序的新功能的问题，开发者可设置小程序最低基础库版本要求。
开发者可以登录小程序管理后台，进入「设置 - 基本设置 - 基础库最低版本设置」进行配置。在配置前，开发者可查看近 30 天内访问当前小程序的用户所使用的基础库版本占比，以帮助开发者了解当前用户使用的情况。
小程序iphonex适配
参考文章：微信小程序API之设备获取系统信息getSystemInfo
mpvue支持less
小程序生命周期
坑点：右上角按钮只是把小程序退到了后台，并没有关闭小程序，所以如果未做处理，下次进去还是上一次退出前的状态。不会像h5一样刷新打开页面。也没有开放销毁小程序的监听。
前台、后台定义： 当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。
swiper 间距轮播
最后用的第二篇里面的方法三，需要用到Animation动画对象
第一篇文章里直接用css的transition，动画不流畅。
小程序swiper组件bug：
小程序引入外部字体
参考文章：小程序如何引入外部字体
用过里面的方法二
图片预览
只有图片全屏预览后，才能通过长按图片吊起菜单栏（保存图片，分享图片，收藏图片）
保存图片到相册
// 保存图片
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: '好东西要分享，发给朋友们看看。',
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') {
// 这边微信做过调整，必须要在按钮中触发，因此需要在弹框回调中进行调用
wx.showModal({
title: '提示',
content: '需要您授权保存相册',
showCancel: false,
success: modalSuccess => {
wx.openSetting({
success (settingdata) {
console.log('settingdata', settingdata)
if (settingdata.authSetting['scope.writePhotosAlbum']) {
wx.showModal({
title: '提示',
content: '获取权限成功,再次点击按钮即可保存',
showCancel: false
})
} else {
wx.showModal({
title: '提示',
content: '获取权限失败，将无法保存到相册！',
showCancel: false
})
}
},
fail (failData) {
console.log('failData', failData)
},
complete (finishData) {
console.log('finishData', finishData)
}
})
}
})
}
},
complete (res) {
wx.hideLoading()
}
})
}
})
}
转发小程序
1. 显示转发按钮
wx.showShareMenu(Object object)
mounted () {
wx.showShareMenu({
withShareTicket: true
})
},
2. 自定义转发的标题、图片
onShareAppMessage(Object)
监听用户点击页面内转发按钮（<button> 组件 open-type="share"）或右上角菜单“转发”按钮的行为，并自定义转发内容。
官网文档：onShareAppMessage(Object)
mpvue中与mounted写的位置类似
onShareAppMessage: function (options) {
return sharehanle(options)
},
处理设置菜单分享和按钮分享的自定义标题、图片等。
export function sharehanle (options) {
// var that = this
// 设置菜单中的转发按钮触发转发事件时的转发内容
console.log(options)
var shareObj = {
title: '分享标题', // 默认是小程序的名称(可以写slogan等)
path: '/pages/index/main', // 默认是当前页面，必须是以‘/’开头的完整路径
imageUrl: '', // 自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
success: function (res) {
// 转发成功之后的回调
if (res.errMsg === 'shareAppMessage:ok') {
console.log('分享成功')
}
},
fail: function (res) {
// 转发失败之后的回调
if (res.errMsg === 'shareAppMessage:fail cancel') {
// 用户取消转发
} else if (res.errMsg === 'shareAppMessage:fail') {
// 转发失败，其中 detail message 为详细失败信息
}
},
complete: function () {
// 转发结束之后的回调（转发成不成功都会执行）
}
}
// 来自页面内的按钮的转发
// if (options.from === 'button') {
// var eData = options.target.dataset
// console.log(eData.name) // shareBtn
// // 此处可以修改 shareObj 中的内容
// 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: '获取权限成功,再次点击按钮即可保存',
showCancel: false
})
3.Toast
wx.showToast({
title: '提交成功',
icon: 'succes',
duration: 1000,
mask: true
})
统计
会用到的应该是自定义分析，也就是按钮点击等事件的统计。
其他
-
background-image只能用网络url或者base64.本地图片要用image标签才行。
-
小程序里有视频播放，审核的时候会有资质问题，需使用封装的视频插件
-
mpvue 事件的参数通过绑定是用$event传入
以swiper举例
<swiper class="sub_swiper"
:indicator-dots="indicatorDots"
:autoplay="autoplay"
:interval="interval"
:duration="duration"
:previous-margin="previousMargin"
:next-margin="nextMargin"
:current ="curMovieIndex"
<!--传入事件参数-->
@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) {
// 这里获取参数
let oIndex = e.mp.detail.current
// 修改swiper展示index
store.commit('setCurMovieIndex', oIndex)
this.changeActive()
this.changeNormal()
},
网友评论