微信公众号自定义分享

简介: 微信公众号自定义分享

效果图:

1、登录微信公众号(需要已经认证过的公众号)

进入“设置与开发”→“公众号设置”→“功能设置”→“JS接口安全域名”,将文件下载下来,上传至与将要分享的页面相同的域名服务器中,上传成功后再在下面填写你的域名。

2、在“设置与开发”→“基本配置”→“IP白名单”中配置你的IP地址,这里的IP地址是获取签名步骤时需要访问的IP地址。

3、在“设置与开发”→“基本配置”中拿到APPID及密钥(也就是开发者密码AppSecret),这里在获取签名时需要用到。

4、实现代码

首先先要引入一个文件

我把这个js文件放在了components文件夹里,如图:

也可以这样引入, 如下:

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

然后开始写代码

import wx from '../../components/jweixin-1.4.js'
let param = window.location.href.split('#')[0];
this.$myRequest({
                    url: '/index/wxshare/callback',
                    data: {
                        url: urlone
                    }
                })
                .then((res) =>{
                    console.log(res.data.data)
                    let s = res.data.data
                    wx.config({
                        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                        appId: s.appId, // 必填,公众号的唯一标识
                        timestamp: s.timestamp, // 必填,生成签名的时间戳
                        nonceStr: s.nonceStr, // 必填,生成签名的随机串
                        signature: s.signature,// 必填,签名
                        jsApiList: ["updateTimelineShareData","updateAppMessageShareData",'checkJsApi',"onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareQQ"] // 必填,需要使用的JS接口列表
                    });
                    wx.ready(function() {
                    wx.onMenuShareTimeline({ //生成微信朋友圈的
                        title: `${_this.list.goodsName}`, // 分享标题
                        desc: 'sssssss', // 分享描述
                        link: '', // 分享链接
                        imgUrl: "https://cdn.llscdn.com/thumbnail.jpg", // 分享图标
                        success: function () {
                        },
                    })
                    wx.onMenuShareAppMessage({ 生成微信朋友的
                        title: `${_this.list.goodsName}`, // 分享标题
                        desc: '订单中心分享朋友自定义', // 分享描述
                        link: '', // 分享链接
                        imgUrl: "https://cdn.llscdn.com/thumbnail.jpg", // 分享图标
                        success: function () {
                        }
                    })
                    wx.error(function(res){
                              alert(res.errMsg);
                              //config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
                            });
                        })
                })

你以为写完代码就可以了吗,其实还差一步

5、注意

打开H5链接的时候,需要在公众号里面打开,你也可以随便找个公众号把你的链接发给它,然后从这个公众号打开自己的链接就可以了

到此微信自定义分享就完成啦

目录
相关文章
|
6月前
|
JSON 小程序 数据格式
【微信小程序】-- 自定义组件总结 (四十)
【微信小程序】-- 自定义组件总结 (四十)
|
6月前
|
小程序 JavaScript
【微信小程序】-- 自定义组件 - behaviors(三十九)
【微信小程序】-- 自定义组件 - behaviors(三十九)
|
6月前
|
小程序 JavaScript
【微信小程序】之顶部选项卡自定义tabs(不用mp-tabs扩展组件,太难用了)
【微信小程序】之顶部选项卡自定义tabs(不用mp-tabs扩展组件,太难用了)
|
6月前
|
小程序 JavaScript
【微信小程序】之自定义九宫格展示row-grid(每行显示三个)
【微信小程序】之自定义九宫格展示row-grid(每行显示三个)
|
6月前
|
小程序 JavaScript
【微信小程序】之自定义三宫格一行展示row-grid(简单数据看板)
【微信小程序】之自定义三宫格一行展示row-grid(简单数据看板)
|
1月前
|
小程序
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
432 1
|
1月前
|
小程序 搜索推荐 API
微信小程序:自定义关注公众号组件样式
尽管关注公众号组件的样式固定且不可修改,但产品经理的需求却需要个性化的定制。在这种情况下,我们需要寻找解决方案,以满足这些特殊需求,尽管这可能有点棘手。
63 0
微信小程序:自定义关注公众号组件样式
|
4月前
|
小程序 开发者
【微信小程序-原生开发】实用教程05-首页(含自定义调试模式、插入图片、图文排版、底部留白、添加本地图片)
【微信小程序-原生开发】实用教程05-首页(含自定义调试模式、插入图片、图文排版、底部留白、添加本地图片)
59 0
|
3月前
|
小程序 开发者
Taro@3.x+Vue@3.x+TS开发微信小程序,使用自定义tabBar
本文介绍了如何在Taro项目中实现自定义tabBar。首先,在`app.config.ts`中设置`custom: true`并配置`tabBar`。
136 0
Taro@3.x+Vue@3.x+TS开发微信小程序,使用自定义tabBar
|
5月前
|
小程序 安全
微信小程序自定义底部导航栏
微信小程序自定义底部导航栏