微信分享功能集成-优快云博客

本文链接：https://blog.youkuaiyun.com/quhongqiang/article/details/108979046

本文介绍了一个使用Vue.js实现的微信分享功能集成方案。通过混合模块（mixin）封装了获取微信分享所需签名及配置的过程，并利用weixin-js-sdk库完成分享设置。文中详细展示了如何在项目中引入必要的组件和服务，并在组件挂载完成后触发分享功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

index.js

import wxapi from '@/utils/wxapi'
import { getWxShare } from '@/api/index'; // 获取签名 appid的

const mixin = {
    data() {
        return {
            wxshare: {},
        }
    },
    methods: {
        // 微信分享
        async fShare(){
            let data = await getWxShare();
            if(data){
                wxapi.wxRegister(data.data.body,this.wxshare);
            }
        },
    },
}

export default mixin

main.js

import Vue from 'vue'
import mixins from './mixin/index'; // 上面的index.js
Vue.mixin(mixins);
Vue.config.productionTip = false
new Vue({
  router: router,
  render: h => h(App),
}).$mount('#app')

import wx from 'weixin-js-sdk'

const wxApi = {
    wxRegister(data){
        let Share = {
            title: '标题',
            link: location.href,
            desc: '嘻嘻嘻嘻嘻嘻',
            imgUrl: '这是那个图片',
            type: 'link', // 分享类型：music、video或link，不填默认为link
            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {
                console.log('分享ok');
            },
            cancel: function () { 
                console.log('分享null');
            }
        };
        wx.config({
            debug: false, // 开启调试模式
            appId: data.appId, // 必填，公众号的唯一标识
            timestamp: data.timestamp, // 必填，生成签名的时间戳
            nonceStr: data.nonceStr, // 必填，生成签名的随机串
            signature: data.signature, // 必填，签名，见附录1
            jsApiList: [
                'updateAppMessageShareData',
                'updateTimelineShareData',
                // 'hideAllNonBaseMenuItem', // 去掉分享
                // 'hideMenuItems'
            ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        })
                
        wx.ready(function(){
            console.log("ready")
            wx.updateAppMessageShareData(Share);
            wx.updateTimelineShareData(Share);
            // wx.hideAllNonBaseMenuItem(); // 去掉分享
            // wx.hideMenuItems({
            //     menuList: [
            //         'menuItem:exposeArticle',
            //         'menuItem:setFont',
            //         'menuItem:share:appMessage',
            //         'menuItem:share:timeline'
            //     ] // 要显示的菜单项，所有menu项见附录3
            // });
        })
    }
}
export default wxApi

调用

mounted() {
   this.fShare();
 },