vue项目的H5网站从公众号分享到好友或朋友圈

1、安装weixin-js-sdk

npm install -S weixin-js-sdk=

2、在页面引入

import wx from "weixin-js-sdk";

3、调用

下面这段一般要放在向服务器请求微信参数之后,下面的params就是服务器返回的参数,前端拿到这些数据并正确调用了wx.config之后,才能调用其他wx.*的API。

wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: params.appId, // 必填,企业号的唯一标识,此处填写企业号corpid
    timestamp: params.timestamp, // 必填,生成签名的时间戳
    nonceStr: params.nonceStr, // 必填,生成签名的随机串
    signature: params.signature,// 必填,签名
    jsApiList: [
        'checkJsApi',
        'scanQRCode',
        'chooseImage',
        'previewImage',
        'uploadImage',
        'downloadImage',
        'getLocation'
    ] // 必填,需要使用的JS接口列表
});
wx.ready(function () {
    wx.updateAppMessageShareData({
        title: '分享好友的标题',
        desc: "描述",
        link: window.location.href,
        imgUrl: '', // 缩略图链接
        success: function () {
            console.log('分享成功')
        }
    })
    wx.updateTimelineShareData({
        title: '分享朋友圈的标题',
        desc: "描述",
        link: window.location.href,
        imgUrl: '', // 缩略图链接
        success: function () {
            console.log('分享成功')
        }
    })
})

微信JS-SDK文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

posted @ 2021-06-08 17:17  Mankii  阅读(744)  评论(0编辑  收藏  举报
返回顶部