公司业务需求 活动页要做分享, 流程是
app ---分享到微信/QQ ---在微信浏览器打开之后, 再次发送给朋友或者朋友圈
我要做的是 2次分享
踩了2天坑, 记录一下
image.png
上图 第一个是没有做2次分享配置 做出来的分享展示
第二图是做了2次分享配置之后的分享展示
网上查了好多文档, 都是对微信官方文档的叙述, 还有就是不严格缜密的, 有的表述不清楚
接下来, 我来从第一部开始排雷
1, 首先先在微信公众号里面配置
image.png
2. 去公众号设置
image.png
3.去查看接口权限, 查看有没有获得 分享权限
image.png
4, 接下来就是js 的配置部分了,
a) 引入 wx 我使用的 npm install 的方法, 网上可查指令 , 然后引入 import wx from 'weixin-js-sdk'
b)
image.png
这是一个vue 的单页面, 我再methods 里面写了一个init()方法, 然后再created 或者mounted 里面调用就可以
着重看一下这个init()方法, 通过后端提供的
getWXConfigSignature接口, 去获取想要的
image.png
appid 等字段然后就在config 的下面, 直接写wx.ready() 方法, 里面写1.4.0 的微信提供的新的分享方法.到这, 其实js 已经写完了, 接下来就是测试了.
5, 测试
为了更好的调试, 我还下载了这个
下载了才发现也是有很多坑, 不如用真机测试.
到第四步的时候, 准备工作和代码其实已经写完了, 接下来就是部署了
6, 部署
a) 部署的链接 一定是跟公众号配置的那个链接是一样的
由于我们公司 预发布环境, 测试环境都是没有经过icp 认证, 所以, 这个分享功能只能在正式环境测试, 因为微信要求, 你输入的js 域名, 都是经过icp 认证的才可以
7, 备注
搞了2天, 从一开始的小白, 到实现效果. 用了2天时间, 代码其实并不难, 难的是理解微信的分享流程, 前期的配置, 我们公司一开始就是没有做这个配置, appid 也是很关键的, 看过一个分享说是因为appid 不对, 导致一直url domain的
如果还有什么问题, 欢迎大家一起来提问 , 讨论
备注一个问题: 异步请求的接口返回的数据, 如果下一个接口要使用, 有可能是拿不到的, 所以就放在async 或者, 直接在获取 数据的接口里面, 去调用下一个接口.
代码示例:
getCardMsg() {
const obj = {}
obj.userNo = localStorage.getItem('userNo') || this.obj.userNo
assembleCardInfo(this.local.creditNo, obj).then(res => {
if (res.code == 1) {
this.Query = res.resultObj
this.init() // 在返回数据里面 调用下面的init()方法
}
})
},
init() {
const obj = {
title: '用卡王-爱拼才会赢', // 分享标题
desc: '拼团办理' + this.Query.creditName + '，领现金红包。', // 分享描述
link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: 'https://ftp.runzezhihui.com/cycleImage/2019-05-29/i186172451792875520/i186172451792875520.png'
}
this.getWxShare(obj)
this.$uweb.trackEvent(this.Query.creditName, '查看页面') // 友盟的埋点插件
},
8, 问题
最近做分享 又碰到一个一个问题
就是配置分享链接
let obj = {
title: '12345678',
desc:'234567890-',
link: window.location.href,
// link: 'http://h5.shensx.com/customer/home',
imgUrl: 'https://www.yuebaoib.com:8072/includeindex/img/1.1f39a981.jpeg',
};
如果分享出去的是本链接还可以, 直接写 window.location.href 就可以了
但是如果分享出去的链接是 外部或者 甲方提供的链接就得思考一下了
image.png
image.png
image.png
设置, 并且下载文件 放在 根目录下
再次分享的时候, 就可以分享外部的 三方链接了
image.png
打开分享, 就是 打开了 3方链接
网友评论