学习笔记

Appearance

H5跳小程序 ​

大致分为两种，

一种是在微信内打开，

一种则是浏览器或者短信等环境打开。

微信内 ​

微信内的网页如需打开小程序使用 微信开放标签 -小程序跳转按钮

使用 ​

使用前提和jssdk一致

然后，需要注入权限验证配置并申请所需开放标签

js
wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
    appId: '', // 必填，公众号的唯一标识
    timestamp: 0, // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名
    jsApiList: [], // 必填，需要使用的JS接口列表
    openTagList: [] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
});

最后使用 开发标签

html
<wx-open-launch-weapp
    id="launch-btn"
    appid="wx12345678"
    path="pages/home/index?user=123&action=abc"
>
    <script type="text/wxtag-template">
        <style>.btn {
            padding: 12px
        }</style>
        <button class="btn">打开小程序</button>
    </script>
</wx-open-launch-weapp>
<script>
    var btn = document.getElementById('launch-btn');
    btn.addEventListener('launch', function (e) {
        console.log('success');
    });
    btn.addEventListener('error', function (e) {
        console.log('fail', e.detail);
    });
</script>

开放对象 ​

  • 已认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。

  • 已认证的非个人主体的小程序，使用小程序云开发的静态网站托管绑定的域名下的网页，可以使用此标签跳转任意合法合规的小程序。

此时可以跳过绑定域名即可使用，并且 wx.config 不需要认证（不需计算签名），填入小程序 id 即可

js
wx.config({
    // debug: true, // 调试时可开启
    appId: '小程序 AppID', // <!-- replace -->
    timestamp: 0, // 必填，填任意数字即可
    nonceStr: 'nonceStr', // 必填，填任意非空字符串即可
    signature: 'signature', // 必填，填任意非空字符串即可
    jsApiList: ['chooseImage'], // 必填，随意一个接口即可 
    openTagList: ['wx-open-launch-weapp'], // 填入打开小程序的开放标签名
})

浏览器环境 ​

这个时候就得生成 URL Scheme 或者 URL Link ，来完成跳转

两个都有时效性，需要接口生成，所以需要服务端配合

URL Link 不可定制UI，URL Scheme 可以定制UI

URL Scheme ​

通过 服务端接口 可以获取打开小程序任意页面的 URL Scheme。适用于从短信、邮件、微信外网页等场景打开小程序。

生成的 URL Scheme 如下所示：

weixin://dl/business/?t= *TICKET*

iOS系统支持识别 URL Scheme，可在短信等应用场景中直接通过Scheme跳转小程序。

注意： Android系统不支持直接识别 URL Scheme，用户无法通过 Scheme 正常打开小程序，开发者需要使用 H5 页面中转，再跳转到 Scheme 实现打开小程序，跳转代码示例如下：

location.href = 'weixin://dl/business/?t= *TICKET*'

该跳转方法可以在用户打开 H5 时立即调用，也可以在用户触发事件后调用。

所以，最好是写一个中转页面，然后在中转页面中跳转

通过服务端接口可以获取打开小程序任意页面的 URL Link。适用于从短信、邮件、网页、微信内等场景打开小程序。

生成的 URL Link 如下所示：

https://wxaurl.cn/*TICKET* 或 https://wxmpurl.cn/*TICKET*

云开发静态网站 ​

静态网站 H5 跳小程序

非个人主体并且已认证的(微信认证)小程序，使用云开发静态网站托管的网页，可以免鉴权跳转任意合法合规的小程序。

即可以在微信内部浏览器的 H5 跳转小程序，也可以在微信外部浏览器或其他部分 App （如企业微信、QQ 等）跳转微信小程序。

使用开放标签 ​

静态网站网页在微信客户端打开时，wx.config 可以传入小程序 AppID 并且不需计算签名，也就是免鉴权即可使用跳转小程序的能力。

js
wx.config({
    // debug: true, // 调试时可开启
    appId: '小程序 AppID', // <!-- replace -->
    timestamp: 0, // 必填，填任意数字即可
    nonceStr: 'nonceStr', // 必填，填任意非空字符串即可
    signature: 'signature', // 必填，填任意非空字符串即可
    jsApiList: ['chooseImage'], // 必填，随意一个接口即可 
    openTagList: ['wx-open-launch-weapp'], // 填入打开小程序的开放标签名
})

云函数生成 UrlScheme ​

此时，云函数无需鉴权（无需accessToken之类的步骤），可以直接生成 UrlScheme

完整案例 ​

网页会判断所在的环境来决定采用哪种跳转方式，

如检测到微信客户端内，则免鉴权使用开放标签跳转，

如检测到在外部浏览器或 App，则使用 URL Scheme 跳转小程序。

需要将 replace 替换为自己的小程序及目标小程序数据

html

<html>
<head>
    <title>打开小程序</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
    <script>
        window.onerror = e => {
            console.error(e)
            alert('发生错误' + e)
        }
    </script>
    <!-- weui 样式 -->
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.4.1/weui.min.css"></link>
    <!-- 调试用的移动端 console -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/eruda"></script> -->
    <!-- <script>eruda.init();</script> -->
    <!-- 公众号 JSSDK -->
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <!-- 云开发 Web SDK -->
    <script src="https://res.wx.qq.com/open/js/cloudbase/1.1.0/cloud.js"></script>
    <script>
        function docReady(fn) {
            if (document.readyState === 'complete' || document.readyState === 'interactive') {
                fn()
            } else {
                document.addEventListener('DOMContentLoaded', fn);
            }
        }

        docReady(async function () {
            var ua = navigator.userAgent.toLowerCase()
            var isWXWork = ua.match(/wxwork/i) == 'wxwork'
            var isWeixin = !isWXWork && ua.match(/micromessenger/i) == 'micromessenger'
            var isMobile = false
            var isDesktop = false
            if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile)/i)) {
                isMobile = true
            } else {
                isDesktop = true
            }

            if (isWeixin) {
                var containerEl = document.getElementById('wechat-web-container')
                containerEl.classList.remove('hidden')
                containerEl.classList.add('full', 'wechat-web-container')

                var launchBtn = document.getElementById('launch-btn')
                launchBtn.addEventListener('ready', function (e) {
                    console.log('开放标签 ready')
                })
                launchBtn.addEventListener('launch', function (e) {
                    console.log('开放标签 success')
                })
                launchBtn.addEventListener('error', function (e) {
                    console.log('开放标签 fail', e.detail)
                })

                wx.config({
                    // debug: true, // 调试时可开启
                    appId: '小程序 AppID', // <!-- replace -->
                    timestamp: 0, // 必填，填任意数字即可
                    nonceStr: 'nonceStr', // 必填，填任意非空字符串即可
                    signature: 'signature', // 必填，填任意非空字符串即可
                    jsApiList: ['chooseImage'], // 必填，随意一个接口即可 
                    openTagList: ['wx-open-launch-weapp'], // 填入打开小程序的开放标签名
                })
            } else if (isDesktop) {
                // 在 pc 上则给提示引导到手机端打开
                var containerEl = document.getElementById('desktop-web-container')
                containerEl.classList.remove('hidden')
                containerEl.classList.add('full', 'desktop-web-container')
            } else {
                var containerEl = document.getElementById('public-web-container')
                containerEl.classList.remove('hidden')
                containerEl.classList.add('full', 'public-web-container')
                var c = new cloud.Cloud({
                    // 必填，表示是未登录模式
                    identityless: true,
                    // 资源方 AppID
                    resourceAppid: '小程序 AppID', // <!-- replace -->
                    // 资源方环境 ID
                    resourceEnv: '云开发环境 ID', // <!-- replace -->
                })
                await c.init()
                window.c = c

                var buttonEl = document.getElementById('public-web-jump-button')
                var buttonLoadingEl = document.getElementById('public-web-jump-button-loading')
                try {
                    await openWeapp(() => {
                        buttonEl.classList.remove('weui-btn_loading')
                        buttonLoadingEl.classList.add('hidden')
                    })
                } catch (e) {
                    buttonEl.classList.remove('weui-btn_loading')
                    buttonLoadingEl.classList.add('hidden')
                    throw e
                }
            }
        })

        async function openWeapp(onBeforeJump) {
            var c = window.c
            const res = await c.callFunction({
                name: 'public',
                data: {
                    action: 'getUrlScheme',
                },
            })
            console.warn(res)
            if (onBeforeJump) {
                onBeforeJump()
            }
            location.href = res.result.openlink
        }
    </script>
    <style>
        .hidden {
            display: none;
        }

        .full {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

        .public-web-container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .public-web-container p {
            position: absolute;
            top: 40%;
        }

        .public-web-container a {
            position: absolute;
            bottom: 40%;
        }

        .wechat-web-container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .wechat-web-container p {
            position: absolute;
            top: 40%;
        }

        .wechat-web-container wx-open-launch-weapp {
            position: absolute;
            bottom: 40%;
            left: 0;
            right: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .desktop-web-container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .desktop-web-container p {
            position: absolute;
            top: 40%;
        }
    </style>
</head>
<body>
<div class="page full">
    <div id="public-web-container" class="hidden">
        <p class="">正在打开 “填入你的小程序名称”...</p> <!-- replace -->
        <a id="public-web-jump-button" href="javascript:" class="weui-btn weui-btn_primary weui-btn_loading"
           onclick="openWeapp()">
            <span id="public-web-jump-button-loading" class="weui-primary-loading weui-primary-loading_transparent"><i
                class="weui-primary-loading__dot"></i></span>
            打开小程序
        </a>
    </div>
    <div id="wechat-web-container" class="hidden">
        <p class="">点击以下按钮打开 “填入你的小程序名称”</p> <!-- replace -->
        <!-- 跳转小程序的开放标签。文档 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html -->
        <wx-open-launch-weapp id="launch-btn" username="小程序原始账号 ID（gh_ 开头的）" path="要跳转到的页面路径"> <!-- replace -->
            <template>
                <button
                    style="width: 200px; height: 45px; text-align: center; font-size: 17px; display: block; margin: 0 auto; padding: 8px 24px; border: none; border-radius: 4px; background-color: #07c160; color:#fff;">
                    打开小程序
                </button>
            </template>
        </wx-open-launch-weapp>
    </div>
    <div id="desktop-web-container" class="hidden">
        <p class="">请在手机打开网页链接</p>
    </div>
</div>
</body>
</html>

vue3中使用 ​

  • main.js

自定义元素配置

js
app.config.compilerOptions.isCustomElement = tag => {
    return tag.startsWith('wx-')
}

否则报错：

[WXTAG] [JSCORE] The slot <template> or <script type="text/wxtag-template"> of <wx-open-launch-weapp> is missing
  • 使用

其他同上，需要设置 template <div is="vue:script" type="text/wxtag-template">

html
    <wx-open-launch-weapp
        class="home-contact-power-btn"
        appid="wx5899bdb8721621d6"
        path="/pages/index/index"
        username="gh_56b2c43416a4"
        style="position: absolute; left: 0; top: 0; right: 0; bottom: 0"
    >
        <div is="vue:script" type="text/wxtag-template">
            <div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0"></div>
        </div>
    </wx-open-launch-weapp>
甘公网安备 号
Copyright © 2016 - 2024  forguo
总访问量， 总访客数
平台公约