微信公众号自定义分享

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

效果图:

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

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

目录
相关文章
|
4月前
|
小程序
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
870 1
|
4月前
|
小程序 搜索推荐 API
微信小程序:自定义关注公众号组件样式
尽管关注公众号组件的样式固定且不可修改,但产品经理的需求却需要个性化的定制。在这种情况下,我们需要寻找解决方案,以满足这些特殊需求,尽管这可能有点棘手。
135 0
微信小程序:自定义关注公众号组件样式
|
6月前
|
小程序 开发者
Taro@3.x+Vue@3.x+TS开发微信小程序,使用自定义tabBar
本文介绍了如何在Taro项目中实现自定义tabBar。首先,在`app.config.ts`中设置`custom: true`并配置`tabBar`。
246 0
Taro@3.x+Vue@3.x+TS开发微信小程序,使用自定义tabBar
|
6月前
|
Linux 网络安全 API
企业微信自定义应用 企业可信IP配置 企业可信ip怎么设置
企业微信自定义应用 企业可信IP配置 企业可信ip怎么设置
|
7月前
|
小程序 前端开发
【微信小程序-原生开发】添加自定义图标(以使用阿里图标库为例)
【微信小程序-原生开发】添加自定义图标(以使用阿里图标库为例)
304 0
|
7月前
|
JSON 小程序 数据库
【微信小程序-原生开发】实用教程14 - 列表的分页加载,触底加载更多(含无更多数据的提醒和显示,自定义组件)
【微信小程序-原生开发】实用教程14 - 列表的分页加载,触底加载更多(含无更多数据的提醒和显示,自定义组件)
178 0
|
7月前
|
小程序 API
【微信小程序-原生开发】实用教程07 - Grid 宫格导航,详情页,侧边导航(含自定义页面顶部导航文字)
【微信小程序-原生开发】实用教程07 - Grid 宫格导航,详情页,侧边导航(含自定义页面顶部导航文字)
137 0
|
7月前
|
小程序 开发者
【微信小程序-原生开发】实用教程05-首页(含自定义调试模式、插入图片、图文排版、底部留白、添加本地图片)
【微信小程序-原生开发】实用教程05-首页(含自定义调试模式、插入图片、图文排版、底部留白、添加本地图片)
104 0
|
7月前
|
小程序 JavaScript
【微信小程序-原生开发】实用教程03-自定义底部导航(含自定义tabBar导航高亮需点击两次的解决方案)
【微信小程序-原生开发】实用教程03-自定义底部导航(含自定义tabBar导航高亮需点击两次的解决方案)
234 0
|
8月前
|
小程序 安全
微信小程序自定义底部导航栏
微信小程序自定义底部导航栏

热门文章

最新文章