记一次Uniapp实现H5跳转微信/支付宝小程序第一次使用uniapp开发网页，同时接入了微信公众号网页授权、支付宝网页

H5打包

一定要配置【运行的基础路径】，否则放到服务器访问是空白。

打包后内容为：

部署到服务器时，应放到manifest.json配置的基础路径下，访问地址为http://[域名]/[运行的基础路径]/index.html。

浏览器类型的判断

if (/MicroMessenger/.test(navigator.userAgent)) {
    // 微信浏览器
} else if (/AlipayClient/.test(navigator.userAgent)) {
    // 支付宝浏览器
} else {
    // 其他浏览器
}

网址参数的获取

location.search

从H5打开微信小程序：wx-open-launch-weapp标签的使用（vue3）

官方指南

在index.html中引入JS

<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

在main.js中配置自定义标签规则，否则无法渲染wx-open-launch-weapp标签

app.config.compilerOptions.isCustomElement = tag => tag.startsWith('wx-')

启动后控制台的警告可忽略，不影响使用。

在页面使用

<template>
    <wx-open-launch-weapp
        appid="xxxx"
        path="xxxx"
        env-version="xxx"
        style="xxxx"
        @ready="ready"
        @launch="launch"
        @error="error"
    >
        <!-- Vue3不支持在模板中使用script标签，此处用v-is进行替换 -->
        <!-- 一定要设置display:block，否则无法显示内容块 -->
        <div v-is="'script'" 
            type="text/wxtag-template"
            style="display: block;"
        >
        <!-- Vue3不支持在模板中使用style标签，此处用v-is进行替换 -->
            <div v-is="'style'">
                .btn{
                    background:red
                }
            </div>
            <view class="btn">按钮</view>
        </div>
    </wx-open-launch-weapp>
</template>

// uniapp中wx被占用，可使用jWeixin调用微信JS SDK
jWeixin.config({
    debug: false,
    appId,
    timestamp,
    nonceStr,
    signature,
    jsApiList: [],
    openTagList: ["wx-open-launch-weapp"],
});

在公众号后台配置回调域名：【设置与开发】-【公众号设置】-【功能设置】-【网页授权域名】。
跳转授权链接

// 回调地址必须是index.html，即入口文件，如果只是域名是没办法打开相应页面的。
// appId是指微信公众号的appId
// 授权地址中的各项参数不可更改顺序，否则不能正常授权
https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxx&redirect_uri=http://xxx/xx/index.html&response_type=code&scope=snsapi_base&state=xxx#wechat_redirect

很坑的地方

该标签会触发系统级弹窗，需要用户确认后才会跳转小程序，但无论是确认还是取消，都会触发launch事件，无法进行区分。【ready、launch、error感觉都没什么用】

微信浏览器的关闭

jWeixin.closeWindow()

支付宝H5授权

FAQ

在支付宝开放平台配置回调地址：【网页/移动应用】-【xxx应用】-【开发设置】-【开发信息】-【授权回调地址】
在网页中拼接授权链接

// appId是指网页应用的appId
// state不要跟在redirect_url后，以免系统误以为是回调地址的一部分
https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?app_id=xxx&state=xxx&scope=auth_base&redirect_uri=http://xxx/xx/index.html

从H5打开支付宝小程序（在支付宝内打开网页才可跳转）

官方指南

// path后可携带参数
window.location.href = `alipays://platformapi/startapp?appId=xxx&page=xxx`;

关闭支付宝浏览器

官方指南

<script>
function ready(callback) {
  // 如果jsbridge已经注入则直接调用
  if (window.AlipayJSBridge) {
    callback && callback();
  } else {
    // 如果没有注入则监听注入的事件
    document.addEventListener('AlipayJSBridgeReady', callback, false);
  }
}
ready(function() {
    AlipayJSBridge.call('exitApp');
});
</script>