关于微信H5 分享配置

2023-09-25 18:44:03

平时微信H5的分享做的比较少，忍不住记下，防忘记

官方文档：JS-SDK说明文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#1

1、公众号上配置域名，且公众号需要企业公众号，不能个人

2、引入JS文件

引入js文件，有两种方式，通过npm 引入 和 <script>

  1、通过<script>引入

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

  2、通过npm引入（推荐，下文是以npm方式的实现步骤）

npm install jweixin-module --save

 2.1、npm引入之后，引入依赖模块

// 1、可直接在需要的页面引入
import wx from ‘weixin-js-sdk‘;

// 2、或者在mian.js 中，通过vue原型链，全局引入
import wx  from ‘‘weixin-js-sdk‘
Vue.prototype.$wx = wx

 

3、配置信息

　　先通过 wx.config 配置信息

// 以下几个是前置动作
// 1、需要将 当前的页面地址 提交给后端，以和微信换取配置信息configData
// 2、推荐 当前页面地址和参数 一并提交：window.location.href 
// 3、注意，提交给后端的页面地址，必须在公众后台配置好域名
// 4、本地调试的域名无法正常使用，（可以在本地进行域名解析）

var configData={
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: ‘‘, // 必填，公众号的唯一标识（后端提供）
  timestamp: , // 必填，生成签名的时间戳（后端提供）
  nonceStr: ‘‘, // 必填，生成签名的随机串（后端提供）
  signature: ‘‘,// 必填，签名（后端提供）
  jsApiList: [‘updateAppMessageShareData‘, ‘updateTimelineShareData‘] // 必填，需要使用的JS接口列表（前端设置，https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#64）
}
$wx.config(configData); // 关键接口

 

4、调用微信js-sdk的接口

注意：1、在调用微信的sdk接口时，需要在 wx.config 之后，

　　　2、调用接口需要在配置在 wx.config 的 jsApiList 中，否则无法使用

　　　3、分享的接口中，配置的url，可以随意填写

　　　4、有些sdk的接口，其中的参数是必填的，否则会报错，自行留意，官网文档没提示

// 注意：
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，
// config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，
// 则须把相关接口放在ready函数中调用来确保正确执行。
// 对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

wx.ready(function () {

    //自定义“分享给朋友”及“分享到QQ”
    wx.updateAppMessageShareData({
        title: ‘‘, // 分享标题
        desc: ‘‘, // 分享描述
        link: ‘‘, // 分享链接，（这个地址好像可以随意填写）
        imgUrl: that.pageData.avatar, // 分享图标
        success: function (setSuccess) {
            // 设置成功
            console.log("设置成功", setSuccess)
        }
    });

    //自定义“分享到朋友圈”/“分享到QQ空间”
    wx.updateTimelineShareData({
        title: ‘‘, // 分享标题
        link: ‘‘, // 分享链接，（这个地址好像可以随意填写）
        imgUrl: ‘‘, // 分享图标
        success: function (setSuccess) {
            // 设置成功
            console.log("设置成功", setSuccess)
        }
    });

    //隐藏所有非基础按钮接口
    wx.hideAllNonBaseMenuItem();

    //批量显示功能按钮接口
    wx.showMenuItems({
        menuList: ["menuItem:share:timeline", "menuItem:share:appMessage"] // 要显示的菜单项，所有menu项见附录3
    });
});

 

 

完整实例

关于微信H5 分享配置
 wxConfig(){
                let that=this;

                var logInPageUrl=window.location.href;
                var logInPageUrl2=window.location.origin+‘/#/?id=‘+that.id;
                var jsApiArray=[‘showMenuItems‘,‘hideAllNonBaseMenuItem‘,‘updateAppMessageShareData‘, ‘updateTimelineShareData‘, ‘hideOptionMenu‘, ‘showOptionMenu‘];

                that.$http("wxConfig_api", {url:logInPageUrl},).then((wxConfigRes) => {
                    if(wxConfigRes.code==0){

                        var getData=wxConfigRes.data;
                        wx.config({
                            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                            appId: getData.app_id, // 必填，公众号的唯一标识
                            timestamp:getData.timeStamp, // 必填，生成签名的时间戳
                            nonceStr: getData.nonceStr, // 必填，生成签名的随机串
                            signature: getData.signature,// 必填，签名
                            jsApiList: jsApiArray // 必填，需要使用的JS接口列表
                        });

                        // 注意：
                        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，
                        // config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，
                        // 则须把相关接口放在ready函数中调用来确保正确执行。
                        // 对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

                        wx.ready(function () {

                            //自定义“分享给朋友”及“分享到QQ”
                            wx.updateAppMessageShareData({
                                title: that.pageData.true_name + ‘ ‘ + that.pageData.position, // 分享标题
                                desc: that.pageData.desc, // 分享描述
                                link: logInPageUrl2, // 分享链接
                                imgUrl: that.pageData.avatar, // 分享图标
                                success: function (setSuccess) {
                                    // 设置成功
                                    console.log("设置成功", setSuccess)
                                }
                            });

                            //自定义“分享到朋友圈”/“分享到QQ空间”
                            wx.updateTimelineShareData({
                                title: that.pageData.true_name + ‘ ‘ + that.pageData.position, // 分享标题
                                link: logInPageUrl2, // 分享链接
                                imgUrl: that.pageData.avatar, // 分享图标
                                success: function (setSuccess) {
                                    // 设置成功
                                    console.log("设置成功", setSuccess)
                                }
                            });

                            //隐藏所有非基础按钮接口
                            wx.hideAllNonBaseMenuItem();

                            //批量显示功能按钮接口
                            wx.showMenuItems({
                                menuList: ["menuItem:share:timeline", "menuItem:share:appMessage"] // 要显示的菜单项，所有menu项见附录3
                            });
                        });
                        wx.error(function(res){
                            console.error(‘config信息验证失败‘,res)
                        });
                    }
                }).catch((err) => {
                    console.error(‘接口错误‘,err)
                });
            },
View Code

 

 

 



 


关于微信H5 分享配置
上一篇：AC日记——【模板】线段树 1 洛谷 P3372

下一篇：微信小程序 自定义header 组件