uni-app WeChat アプレットは ShareAppMessage でグローバル共有を設定します
[
展望: uni-app を使用して WeChat アプレットを開発し、共有と転送を実現します。各ページは onShareAppMessage を記述する必要があります。このコードは膨大すぎるため、Vue のミックスインを使用してグローバル共有を設定します。
vueミックスインの使用
ミックスインを作成します。ファイルパスは common/share.js です。
export default {
onShareAppMessage(res) {
//发送给朋友
return {
}
},
onShareTimeline(res) {
//分享到朋友圈
return {
}
},
}
または
export default {
created() {
//#ifdef MP-WEIXIN
wx.showShareMenu({
withShareTicket: true,
menus: ['shareAppMessage', 'shareTimeline']
});
//#endif
},
}
2 つの記述方法は同じ効果を持ちます
画像.png
グローバルに使用するには、main.js にグローバル ミックスインを追加します。
import share from './common/share.js'
Vue.mixin(share)
これを設定すると、すべてのページに共有ボタンが表示されます。
共有コンテンツをカスタマイズする
export default {
data() {
return {
share:{
title: '自定义分享标题',
imageUrl:'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg',
}
}
},
onShareAppMessage(res) {
//发送给朋友
return {
title: this.share.title,
imageUrl: this.share.imageUrl,
}
},
onShareTimeline(res) {
//分享到朋友圈
return {
title: this.share.title,
imageUrl: this.share.imageUrl,
}
},
}
ページのデータにミックスインと同じパラメータを設定することで、共有パラメータを変更できます。
export default {
data() {
return {
share:{
title: '首页',
imageUrl:'https://ossweb-img.qq.com/images/lol/web201310/skin/big10002.jpg',
}
}
},
}
l:'https://ossweb-img.qq.com/images/lol/web201310/skin/big10002.jpg',
}
}
},
}