H5微信公众号，如何在页面点击按钮打开分享面板【求助】

平芜尽处是春山-

已于 2022-05-13 17:55:00 修改

阅读量5.6k

点赞数 3

分类专栏： # 前端记录文章标签：微信前端 javascript

于 2022-01-13 11:37:08 首次发布

本文链接：https://blog.csdn.net/weixin_44934104/article/details/122470128

版权

前端记录专栏收录该内容

20 篇文章 1 订阅

订阅专栏

1、使用了weixin-js-sdk，只实现了自定义右上角的分享功能
安装命令： npm install weixin-js-sdk --save

import wx from 'weixin-js-sdk'

getConfigData({url: encodeURIComponent(location.href.split('#')[0])}).then(res => {
        console.log("---分享",res.result);
        const result = res.result;
wx.config({
          debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来
          appId: result.appId, // 必填，公众号的唯一标识
          timestamp: result.timestamp, // 必填，生成签名的时间戳
          nonceStr: result.nonceStr, // 必填，生成签名的随机串
          signature: result.signature,// 必填，签名
          jsApiList: [
            'onMenuShareAppMessage',
            'onMenuShareTimeline',
          ] // 必填，需要使用的JS接口列表
        });
        wx.ready(() => {   //需在用户可能点击分享按钮前就先调用
          wx.onMenuShareAppMessage({
            title: '开心银行的分享', // 分享标题
            desc: '开心银行的描述', // 分享描述
            link: 'http://localhost:8000/base/index', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致【访问前端H5的路径】
            imgUrl: 'https://aaa/4964dad285519caf7fb2eed60ed7dff_1640677600424.jpg', // 分享图标
            type: 'link', // 分享类型,music、video或link，不填默认为link
            success: function () {
              // 设置成功
              this.$message.success("自定分享成功！");
            }
          })
        });
  }

实现功能：
在这里插入图片描述
自定义了右上角的分享链接，并未实现点击分享按钮打开微信的分享面板

2、使用Nativeshare.js在移动端浏览器分享网页到微信，QQ等
此网址：https://www.npmjs.com/package/nativeshare
GitHub地址：https://github.com/fa-ge/NativeShare/blob/master/README.md
安装命令：npm install --save nativeshare

import share from "@/assets/js/wxshare";

var nativeShare = new NativeShare();
getConfigData({url: encodeURIComponent(location.href.split('#')[0])}).then(res => {
        console.log("---分享",res.result);
        const result = res.result;

        // 你也可以在setConfig方法中设置配置参数
        nativeShare.setConfig({
          wechatConfig: {
            appId: result.appId,
            timestamp: result.timestamp,
            nonceStr: result.nonceStr,
            signature: result.signature,
          }
        })
        // 设置分享文案
        nativeShare.setShareData({
          icon: 'https://minio.yndepu.com/workorder/4964dad285519caf7fb2eed60ed7dff_1640677600424.jpg',
          link: 'http://localhost:8000/base/index',
          title: '来自开心银行的分享',
          desc: 'NativeShare是一个整合了各大移动端浏览器调用原生分享的插件',
          from: '@fa-ge',
        })
        // 唤起浏览器原生分享组件(如果在微信中不会唤起，此时call方法只会设置文案。)
        try {
          nativeShare.call();
          // 如果是分享到微信则需要 nativeShare.call('wechatFriend')
          // 类似的命令下面有介绍
        } catch(err) {
          // 如果不支持，你可以在这里做降级处理
          console.log(err)
        }
    }