公众号页面 / 小程序扫码打开H5 微信内部打开小程序
使用说明及注意事项&问题解决
准备
使用官方签名比对网址，本地debug签名是否与官方一致或正确 官方测试网址
1.准备已认证的服务号
2. 使用开放标签
代码开发
源码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <div class="full">
<wx-open-launch-weapp id="launch-btn" username="gh_b44e6672d709" path="/pages/dav/dav?from=wx"
style="float: left;width: 100%;height: 100%;text-align: center;display: flex;justify-content: center;">
<template> <!--插槽需要加，不然内容空白-->
<div style="width: 100%;margin: 0px auto;float: left;">
<div style="width: 100%;float: left;text-align: center;">
<img src="http://static.xmgj.cn/images/logo/jyzs_120_120.png"
style="width: 80px;height: auto;margin: 160px auto 0px auto;">
</div>
<p
style="width: 100%;float: left;line-height: 30px;text-align: center;margin: 10px 0px 20px 0px;padding: 0px 15px;box-sizing: border-box;color: #666666;font-size: 15px;float: left;">
请点击下方按钮跳转到微信小程序</p>
<div
style=" width: 100%;height: 50px;line-height: 50px;font-weight: 300;float: left;text-align: center;">
<div
style="display: block;width: 200px;height: 45px;line-height: 45px;font-weight: 300;font-size: 15px;background-color: #f4f4f4;color: #929f9b;margin: 0px auto;position: relative;border-radius: 45px;border: none;">
点击前往微信小程序
</div>
</div>
</div>
</template>
</wx-open-launch-weapp>
</div>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script src="https://gs.yuntech.cc/oa/js/jquery-1.8.3.min.js"></script>
|
脚本部分
- 其中涉及到几个必填选项
- appId 当前页面所属的公众号 (是否认证 、 是否设置js sdk 安全调用域名 等设置)
- signature 签名 （需要使用sh1方法）
- timestamp 签名时间戳 （10位）
- 其他选项按照示例固定即可
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| wx.config({
debug: true,
appId: 'wx9ba622522608be72', // 必填，公众号的唯一标识
timestamp, // 必填，生成签名的时间戳
nonceStr, // 必填，生成签名的随机串
signature:signature1, // 必填，签名
jsApiList: ["chooseImage"], //必须要不调用小程序标签渲染不出来
openTagList: ['wx-open-launch-weapp'] //必须必须要不调用小程序标签渲染不出来
});
wx.ready(function () {
console.log('wx-ready')
});
wx.error(function (res) {
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
console.log("res-err", res);
alert(JSON.stringify(res)+'--------------')
});
var btn = document.getElementById('launch-btn');
btn.addEventListener('launch', function (e) {
console.log('success');
});
btn.addEventListener('error', function (e) {
console.log('fail', e.detail);
});
|
最终结果
注意事项：
如果开发自测没有问题；则可能是白名单或者域名js sdk 无调用权限；详见 官方步骤第一步。（人家说的很清楚~~）
例如：你的域名：http://kdjfkd.natappfree.cc/a/login 那么你的安全域名应该配置为：natappfree.cc 坑吧，不要http,也不要二级域名。
用于签名的url 必须是全部的域名：http://kdjfkd.natappfree.cc/a/login
小程序开发记录
打开小程序
最终结果
https://gs.yuntech.cc/oa/jump-wx.html
https://gs.yuntech.cc/oa/open-wx.html
- 使用web页面，浏览器跳转微信app短码的方式识别
需要注意的是，外链严格区别于微信内扫码 / 分享 / 点击链接，所以内部打开使用以下方案
- 部分源码 - 使用片段 weixin://dl/business/?t=FqTEVoBawKp
1
| <a id="dianjiimg_links" href="weixin://dl/business/?t=FqTEVoBawKp">
|
1
2
3
4
5
| if(weixin){
window.location.href = "https://gs.yuntech.cc/oa/open-wx.html";
}else{
window.location.href = "weixin://dl/business/?t=FqTEVoBawKp";
}
|
QQ 内聊天分享短码，会识别程序图标 可以使用 下面标签
1
2
3
4
| <meta http-equiv="refresh" content="0;url=weixin://dl/business/?t=FqTEVoBawKp">
<meta name="description" content="打开建云助手" />
<meta itemprop="name" content="打开建云助手" />
<meta itemprop="image" content="http://static.xmgj.cn/images/logo/jyzs_120_120.png" />
|
效果如下
微信内部打开小程序
可以与外链打开小程序使用同一个地址，但是地址内部会进行跳转判断。无缝跳转。详细方案见公众号文档
小程序代码开发
components + node_modules 目录下的组件是全局资源， 如果使用分包， 则需要把具体资源剪切到分包中， 用来节省主包（初始包）体积。提高响应速度
公众号组件
1
| <official-account></official-account>
|
官方地址
需要判断是否关注 –过– 公众号
UnionID 机制说明
如果开发者拥有多个移动应用、网站应用、和公众帐号（包括小程序），可通过 UnionID 来区分用户的唯一性，因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号（包括小程序），用户的 UnionID 是唯一的。换句话说，同一用户，对同一个微信开放平台下的不同应用，UnionID是相同的。
UnionID获取途径
绑定了开发者帐号的小程序，可以通过以下途径获取 UnionID。
- 开发者可以直接通过 wx.login +
code2Session 获取到该用户 UnionID，无须用户授权。
- 小程序端调用云函数时，可在云函数中通过 Cloud.getWXContext 获取 UnionID。
微信开放平台绑定小程序流程
登录微信开放平台 — 管理中心 — 小程序 — 绑定小程序
