开发指南
组件
- 起步
- 基础组件
- 表单组件
- 数据组件
- 反馈组件
- 布局组件
- 导航组件
- 其他组件
JS
- 开发指南
- 网络
- 工具库
模板
mpShare 小程序分享
此功能,是对uni的onShareAppMessage 生命周期的封装。
这里说的小程序,指的是"微信小程序、百度小程序、头条小程序、QQ小程序,支付宝小程序等"。
由于小程序的分享(微信、头条平台),需要监听页面的onShareAppMessage
生命周期,小程序需要在页面声明了此生命周期,点击右上角的"胶囊"才会有分享功能,
而一般情况下,我们希望每个页面都可以分享,那就需要每个页面都写一遍这个生命周期,是很繁琐的。
基于以上,uView通过mixin
的形式,给每一个页面注入了onShareAppMessage
生命周期,让您简单引入,无需任何后续操作,即可让每一个页面都有分享功能(仅针对小程序)。
平台差异说明
App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ小程序 |
---|---|---|---|---|---|---|
x | x | √ | √ | √ | √ | √ |
基本使用
需要注意的是,小程序(uni)没有提供类似"getNavigationBarTitle"这样的接口,所以我们无法获取当前页面导航栏的标题,换言之,我们想要每个页面个性化的 分享标题,需要手动设置,否则默认为小程序的名称。
注意:
分享功能是默认关闭的,但是我们写好各项配置,您只要在main.js
中引入对应的文件即可,我们没有默认引入,是因为某些用户并不需要此功能。
打开小程序分享功能:
// main.js
// 其他内容
// 引入uView对小程序分享的mixin封装
let mpShare = require('uview-ui/libs/mixin/mpShare.js');
Vue.mixin(mpShare)
// 其他内容
分享功能,一般有三个参数,如下:
// 该对象已集成到this.$u中,内部属性如下
this.$u.mpShare = {
title: '', // 默认为小程序名称,可自定义
path: '', // 默认为当前页面路径,一般无需修改,QQ小程序不支持
// 分享图标,路径可以是本地文件路径、代码包文件路径或者网络图片路径。
// 支持PNG及JPG,默认为当前页面的截图
imageUrl: ''
}
以上这些,uView已通过mixin
集成,当某一个页面您需要自定义分享信息时,可以通过"this.$u.mpShare"对进行修改,在页面的onLoad
生命周期修改即可。
export default {
onLoad() {
this.$u.mpShare.title = '天苍苍野茫茫,风吹草低见牛羊';
}
}
重写"onShareAppMessage"生命周期
如果您基于自己的一些业务逻辑,需要更加自定义的实现逻辑,可以在页面中重写onShareAppMessage
生命周期即可覆盖uView通过mixin
监听的onShareAppMessage
生命周期。
export default {
// 这里如果写成onShareAppMessage: res => { ... }形式的箭头函数,在内部会无法获得this
onShareAppMessage(res) {
if (res.from === 'button') {// 来自页面内分享按钮
console.log(res.target)
}
return {
title: '自定义分享标题',
path: '/pages/test/test?id=123'
}
}
}
分享到朋友圈 1.7.2
此功能为微信小程序最新加入的功能,仅适用于微信小程序,uView也全局监听了此生命周期。
同理,你也可以在页面中重写onShareTimeline
生命周期即可覆盖uView通过mixin
监听的onShareTimeline
生命周期。
export default {
onShareTimeline(res) {
if (res.from === 'button') {// 来自页面内分享按钮
console.log(res.target)
}
return {
title: '自定义分享标题',
path: '/pages/test/test?id=123'
}
}
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论