微信公众号自定义分享

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

效果图:

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

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

目录
相关文章
|
2月前
|
JSON 小程序 数据格式
【微信小程序】-- 自定义组件总结 (四十)
【微信小程序】-- 自定义组件总结 (四十)
|
2月前
|
小程序 JavaScript
【微信小程序】-- 自定义组件 - behaviors(三十九)
【微信小程序】-- 自定义组件 - behaviors(三十九)
|
2月前
|
JSON 小程序 JavaScript
【微信小程序】-- 自定义组件 - 组件所在页面的生命周期 & 插槽(三十七)
【微信小程序】-- 自定义组件 - 组件所在页面的生命周期 & 插槽(三十七)
|
2月前
|
小程序
【微信小程序】-- 自定义组件 - 纯数据字段 & 组件的生命周期(三十六)
【微信小程序】-- 自定义组件 - 纯数据字段 & 组件的生命周期(三十六)
|
2月前
|
小程序 JavaScript
【微信小程序】之顶部选项卡自定义tabs(不用mp-tabs扩展组件,太难用了)
【微信小程序】之顶部选项卡自定义tabs(不用mp-tabs扩展组件,太难用了)
|
2月前
|
小程序 JavaScript
【微信小程序】之自定义九宫格展示row-grid(每行显示三个)
【微信小程序】之自定义九宫格展示row-grid(每行显示三个)
|
2月前
|
小程序 JavaScript
【微信小程序】之自定义三宫格一行展示row-grid(简单数据看板)
【微信小程序】之自定义三宫格一行展示row-grid(简单数据看板)
|
11天前
|
小程序 开发者
【微信小程序-原生开发】实用教程05-首页(含自定义调试模式、插入图片、图文排版、底部留白、添加本地图片)
【微信小程序-原生开发】实用教程05-首页(含自定义调试模式、插入图片、图文排版、底部留白、添加本地图片)
16 0
|
11天前
|
小程序 前端开发
【微信小程序-原生开发】添加自定义图标(以使用阿里图标库为例)
【微信小程序-原生开发】添加自定义图标(以使用阿里图标库为例)
20 0
|
11天前
|
JSON 小程序 数据库
【微信小程序-原生开发】实用教程14 - 列表的分页加载,触底加载更多(含无更多数据的提醒和显示,自定义组件)
【微信小程序-原生开发】实用教程14 - 列表的分页加载,触底加载更多(含无更多数据的提醒和显示,自定义组件)
8 0