引流链接小程序-开发接入文档

注意：接入流程需贵公司具备开发资源，并由开发人员进行接入

一、资源准备

小程序帐号：需由贵司自行准备

若贵司还未申请小程序帐号，可点击微信小程序官方文档查看申请流程
小程序需和绑定在企业微信后台的公众号/小程序同属一个微信开放平台

二、接入

引流链接小程序的实现逻辑并不复杂，实际的业务逻辑代码总共不超过 30 行

接入前建议先查看本文档内【四、FAQ-引流链接实现逻辑】

以下提供引流链接小程序最小实现 demo 源码供参考（注：请仔细查看源码中标记为 NOTE 的注释）

源码地址：https://e.coding.net/nightingales-tech/external-link-demo/external-link-demo.git

// 可直接复制以下命令到命令行，按回车拉取项目

git clone https://e.coding.net/nightingales-tech/external-link-demo/external-link-demo.git

本地接入验证（可选）：

在您开发完成接入逻辑后，可先在本地进行接入验证，将原本从 pageParams 中取参数的逻辑改为直接赋值，（*以下验证代码为本地接入验证用，验证结束后需删除）：

// 本地接入验证用，验证结束需删除

let c = 'X1FqUFlKQmwAAQoGVl5rUVhAQQ'

let hash_id = 'r1a92vxal'

更改保存后若开发工具如下图所示正常渲染引流链接页面，即本地接入验证成功：

三、提交审核&发布

完成接入逻辑后，即可提交小程序进行审核

1、上传代码

2.选为体验版本

小程序代码上传后，即可在小程序管理后台的版本管理页面看到先前上传的小程序。将其选为体验版本，再进行一次体验版本的接入验证：

复制以下参数拼接到小程序引流链接页面路径后：

?hash_id=r1a92vxal&c=X1FqUFlKQmwAAQoGVl5rUVhAQQ&debug=1

点击切换为体验版本，保存后用手机扫描体验版二维码，若小程序如下图所示正常加载，则体验版本接入验证成功：

3.提交审核

提交审核后请耐心等待。审核通过后系统会下发通知到小程序管理员个人微信

4.发布

审核通过后，小程序管理员会收到审核通过通知，请在小程序管理后台-版本管理界面进行小程序发布

小程序发布成功后，可于管理后台配置弹框获取测试链接，用于最终测试引流链接小程序是否接入成功；

四、FAQ

开发相关（For 开发同学）

1、能描述下引流链接的整个实现逻辑吗？

a. 引流链接创建逻辑：

i.进行配置（配置成功后无需重复配置）：

企业在微伴管理后台引流链接功能页点击右上角设置按钮根据教程进行配置

b.配置流程中需配置的内容及作用：

将小程序授权给微伴助手第三方开发平台。作用：授权微伴以第三方开发平台的身份调用授权小程序的生成 URL Scheme 接口
上传校验文件。作用：配置业务域名前需先上传校验文件
配置业务域名。作用：配置业务域名后，可调用web-view组件在小程序中打开，查看详情
配置小程序路径(path)。作用：微伴调用微信小程序 URL Scheme 接口时，需要指定打开小程序的 path，查看详情

ii. 生成引流链接

微伴助手第三方平台通过调用微信小程序接口生成 URL Scheme，调用接口时会传入 path 和 query(query 的值为 c=xxxx&hash_id=xxxx)，接口调用成功后微信会返回 openLink 作为生成的 URL Scheme。什么是 URL Scheme？
微伴助手根据一定的算法，生成和上述 openLink 对应的短链，该短链即为最终可做投放的引流链

b. 引流链接载入逻辑：

i.用户访问投放出去的引流链接，此时访问请求会打到微伴服务器

微伴助手服务器根据短链路径，找到对应的 openLink，将页面重定向到微伴引流 H5 页面，并将 openLink 作为页面参数一并传入。微伴 H5 页面会自动执行以下逻辑：location.href = decodeURIComponent(openLink) 。这里的逻辑可参考：获取 URL Scheme

ii. 执行替换 href 为 openLink 的逻辑后，浏览器会自动调起微信小程序并打开 openLink 对应的小程序 path，此时 path 也会带上参数 c 和 hash_id。（通过复制某一引流链接打开后的页面路径，可以看到此时的 path 为：

pages/externalLink.html?c=X1FqUFlKQmwAAQoGVl5rUVhAQQ&hash_id=r1a92vxal）

iii. 小程序中的 externalLink.js 页面会获取参数 c、hash_id，同时会调用 wx.login 获取 code，用 code 换取 unionId，并将参数 c、hash_id、unionId 又作为微伴引流 H5 的 query ，拼接到 url 中，后将 url 设为 externalLink.wxml 中 webview 组件的 src （某一引流链接打开后 webview 的 src：

https://weibanzhushou.com/H5/external_links_wx?hash_id=r1a92vxal&_c=X1FqUFlKQmwAAQoGVl5rUVhAQQ&unionId=xxxx）

2.webviewUrl 中，参数 c、hash_id、unionId 的作用分别是什么？

a. 参数 c 和 hash_id 用于公司和引流链接配置的匹配，必传

b. 参数 unionId 用于引流链接的访问数据统计，必传

3.什么是 unionId？

a. UnionId 机制说明

4.webviewUrl 中，为什么参数 unionId 是驼峰命名，hash_id 又是下划线命名，我可以统一使用驼峰吗？

a. 由于历史遗留原因，导致 webviewUrl 中的参数命名风格出现了不一致情况（理解万岁 0.0。请各位开发大大严格按照源码中的命名格式进行 url 的拼接，否则可能会出现页面显示「引流链接已被删除」的情况

运营相关（For 运营同学）

UnionId 机制说明：如果开发者拥有多个移动应用、网站应用、和公众帐号（包括小程序），可通过 UnionID 来区分用户的唯一性，因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号（包括小程序），用户的 UnionID 是唯一的。换句话说，同一用户，对同一个微信开放平台下的不同应用，UnionID是相同的。（划笔记！！！这是以下理解问题1和2很关键的重点，也是理解微伴很多营销/引流功能逻辑的重点）

1、为什么需要unionID？

a. 需通过unionID将进入小程序页面的客户和企业微信里面的客户进行对应，从而进行客户数据统计。

b.举个栗子：客户A通过投放链接进入了小程序，通过小程序授权开发可以拿到一个客户 A的unionID：XXXXX，客户A识别二维码添加成为了企业微信客户A，微伴可通过企业微信接口拿到企业微信客户A的 unionID：XXXXX，两个unionID一致，则认为进入小程序的客户A和企业微信客户A为同一人，从而计算为投放渠道的数据

2.为什么小程序需要和绑定在企业微信后台的公众号/小程序同属一个微信开发平台

a. unionID的机制是在同一个微信开放平台下的不同应用用户unionID相同

b. 还是通过栗子说明：现在客户A进入了引流小程序，我们通过小程序授权拿到的是当前小程序绑定的开放平台的unionID：XXXXX，客户再添加成为企微好友，我们通过企业微信接口拿到的是当前企业微信后台在开发者里绑定的公众号或者小程序绑定的开放平台unionID：XXXXX，如果引流用的小程序和企业微信后台绑定的公众号/小程序对应的不是同一个开放平台，那么同一个客户通过引流小程序添加成为企微客户后，我们无法判断是同一个人，也就意味着将无法进行数据统计，所以就不能达到问题1示例里面的效果（简单点说就是无法进行数据统计）

3.引流链接为什么会显示被删除？

a.小程序页面出现「活动链接已被删除」可能存在以下三种情况，可根据具体场景进行排查：

i. 小程序配置错误：请根据本开发接入文档排查小程序的接入流程，尤其检查配置的页面路径和小程序中的页面路径是否一致、webviewUrl 的参数名是否正确

ii. 链接被人工删除：员工在后台删除已创建的引流链接，之前已经发送出去的链接客户再次打开将提示「链接已被删除」

iii. 外链跳转接口被封禁：可登录小程序后台看一下消息通知里面有没有收到接口被封的通知，类似：你好，因用户投诉并经平台审核，xxxxx

4.引流链接为什么会显示“不支持打开非业务域名”？

a.小程序页面出现“不支持打开非业务域名”可能是因为未配置业务域名或配置错误导致，请按照微伴后台-引流链接-小程序设置流程重新配置业务域名，并且将小程序代码中的 baseHost 改成已在小程序后台配置的域名。

5.企业自己接入引流链接小程序后，是否就不会被封禁了？

a. 还是会存在被封的风险，请遵守微信公众平台运营规范相关细则，具体规则参考微信公众平台运营规范

6.为什么我按流程配置好了小程序，在创建引流链接后打开提示：页面出现了问题？

a. 通过 scheme 码进入的小程序页面路径，必须是已经发布的小程序存在的页面

本篇目录