公众号页面 / 小程序扫码打开H5 微信内部打开小程序

使用说明及注意事项&问题解决

准备

使用官方签名比对网址，本地debug签名是否与官方一致或正确 官方测试网址

开发步骤 参考地址

1.准备已认证的服务号

2. 使用开放标签

代码开发

源码

	<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位）
  • 其他选项按照示例固定即可

• 签名算法 参考地址

			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

<a id="dianjiimg_links" href="weixin://dl/business/?t=FqTEVoBawKp">

if(weixin){
    window.location.href = "https://gs.yuntech.cc/oa/open-wx.html";
}else{
    window.location.href = "weixin://dl/business/?t=FqTEVoBawKp";
}

QQ 内聊天分享短码，会识别程序图标 可以使用 下面标签

<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 目录下的组件是全局资源， 如果使用分包， 则需要把具体资源剪切到分包中， 用来节省主包（初始包）体积。提高响应速度

公众号组件

<official-account></official-account>

官方地址

需要判断是否关注 --过-- 公众号

UnionID 机制说明

如果开发者拥有多个移动应用、网站应用、和公众帐号（包括小程序），可通过 UnionID 来区分用户的唯一性，因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号（包括小程序），用户的 UnionID 是唯一的。换句话说，同一用户，对同一个微信开放平台下的不同应用，UnionID是相同的。

UnionID获取途径

绑定了开发者帐号的小程序，可以通过以下途径获取 UnionID。

1. 开发者可以直接通过 wx.login + code2Session 获取到该用户 UnionID，无须用户授权。
2. 小程序端调用云函数时，可在云函数中通过 Cloud.getWXContext 获取 UnionID。

微信开放平台绑定小程序流程

登录微信开放平台 — 管理中心 — 小程序 — 绑定小程序