uniapp开发微信小程序当前页面不可转发

转载已于 2022-02-10 08:46:19 修改 · 3.8k 阅读

5 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/weixin_45932157/article/details/116526937

文章标签：

#小程序 #前端 #uni-app

于 2022-02-10 08:45:49 首次发布

本文介绍了如何在Vue.js应用中创建一个全局的mixin来实现分享功能，包括分享到朋友圈和发送给朋友。通过在main.js中引入并注册mixin，每个页面都将拥有分享按钮。同时，展示了如何在组件中自定义分享的内容，如标题和图片。

[转载,原文链接：https://blog.youkuaiyun.com/weixin_45932157/article/details/116526937]

创建一个 mixins ，我的文件路径为： 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
    },
}

全局使用，在 main.js 里面添加全局的 mixin

import share from './common/share.js'
Vue.mixin(share) 
const app = new Vue({
    ...App,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,
        }
    },
 

}

效果图：