uni-app 编译后微信h5打开APP，并且打开相应的页面_uniapp微信浏览器打开app

现在有一个需求，App分享出来的页面需要在页面底部加一个浮窗 “APP查看”

就跟某乎一样

并且能打开"APP相应的页面"

先查一下资料

1、iOS的APP是可以通过

"universal link"（通用链接）  这个东西打开的

你的APP只要配过微信分享，微博分享 那你的APP应该就集成好了通用链接的

所以在微信里面iOS是可以打开APP的，稳得很

直接

var url=通用链接地址;

var path=跳转参数

 location.href = url+path;

h5端已经完事

APP只需要对 启动的参数进行处理就可以

plus.runtime.launcher

plus.runtime.arguments

看html5+文档

安卓其实应该是能 URL Schemes 达到这样的跳转，但是wx这个憨批，把URL Schemes过滤掉了，所以安卓并不能通过这种方式跳转，只能另找它法了。

微信h5是提供一种标签可以打开你们的app的 但是你得先去微信开放平台申请账号，再申请应用

微信开放平台

看文档吧

跳转APP：wx-open-launch-app

这里说几个重要的步骤，千万别错了

1、开放平台一定要是公众账号&&移动应用

2、代码中的appid是移动应用中的appid,不是公众账号的appid

3、一定要将其关联在一起

4、代码中 微信sdk 初始化的时候有个参数 "openTagList" 一定要记得带上，因为很多人写的时候都是从微信js sdk过来的 而这里的只有jsApiList....

5、有点瑕疵就是 按照文档上说 是能监听到  “launch” “error” 事件的，但是我怎么监听得不太对劲

6、uni-app打的包需要是正式包，不能是调试包，至于正式包你怎么看启动日志我这边有个方法

可以参考下

在App.vue 的 onShow生命周期里面

onShow: function () {
 
            console.log("App Show", is_one_modal);
            // #ifdef H5
            basics.h5_wx_share({});
            // #endif
 
            //#ifdef APP-PLUS
 
 
            //由于线上不太好调试 把数据加到本地存储中
 
            //
            // 跳转页面(需要在setTimeout中,否则IOS会出现获取的plus.runtime.arguments是上一个赋值给plus.runtime.arguments的值,而不是当前传入的plus.runtime.arguments)
            setTimeout(function () {
              
                              let temp_launcher = plus.runtime.launcher;
 
 
                let temp_arguments = plus.runtime.arguments;
                plus.runtime.arguments = null;             
             
              basics.sys_log("temp_launcher：" + temp_launcher);//加个记日志的方法 
//其实就是把个数据存到本地存储里面  然后我们自己在开个后门啥的 通过后面进到一个 调试页面，这个调试页面在将 本地存储里面的日子都打印出来就行了 
//这里的temp_launcher 就是 你标签中的 “extinfo”  你想怎么解析 怎么定义都行
                //ios 安卓都可以通过这样打开我们的app
                try {
                    if (temp_arguments) {
                        //basics.sys_log("存在temp_arguments", 1);
 
                        //解析 temp_arguments 该干嘛干嘛
 
                    } else {
                    }
                } catch (e) {
                    basics.sys_log("temp_arguments catch " + e, 1);
 
                }
            }, 100)
 // #endif
}

js代码如下

//#ifdef H5
import wx_sdk from '@/util/wxsdk.js';
 
var wx_sdk_is_init = !1;
 
//#endif
 
 
//一级基础方法 对象
export default {
//微信内服务号 打开app
    h5_wx_open_app(extinfo) {
        // #ifdef H5
        let append_fun = function (extinfo) {
            //return;
            var element = document.createElement("div");
            element.id = "float_app_open";
            element.className = "i-font float-app-open";
            var element1 = document.createElement("span");
            element1.id = "app_open_close";
            element1.innerHTML = "";
 
            element.innerHTML = '<wx-open-launch-app id="launch-btn"  extinfo="' + extinfo + '" appid="你的移动应用id" style="position: relative; left: 50%; margin-left: -60px; background-color: #f5222d; display: block; text-align: center; border: 0; text-shadow: 0 2px 8px 0px #f5222d; border-radius: 50px; text-align: center; width: 120px; height: 40px; line-height: 40px; ">'
                + '<script type="text/wxtag-template"><style>.btn-open-weapp { display:block; text-align: center; color: #fff; height: 40px; line-height: 40px;}</style><div class="btn-open-weapp">APP查看</button>'
                + '<//script></wx-open-launch-app>';
 
            element.appendChild(element1);
 
            document.body.appendChild(element);//添加到body 子节点下
 
            try {
                var btn = document.getElementById("launch-btn");
                if (btn) {
                    btn.addEventListener('click', e => {
                        console.log('检测用户点击打开APP按钮', e);
 
                    });
                    console.log("找到launch-btn当前的按钮了")
 
                    btn.addEventListener('launch', e => {
                        console.log('打开app结果', e);
                        if (e.errMsg.indexOf("fail") != -1) {
                            this.jump_url(config.app_yyb_url, 3);//打开失败
                        }
 
                    });
                    btn.addEventListener('error', e => {
                        //console.error('fail', e.detail);
                        this.jump_url(config.app_yyb_url, 3);
                        // 唤醒失败的情况下，可用于降级处理比如在此处跳转到应用宝
                    });
 
                }
            } catch (e) {
 
            }
            try {
                var close = document.getElementById("app_open_close");
                if (close) {
                    console.log("找到app_open_close当前的按钮了")
 
                    close.addEventListener('click', e => {
                        document.getElementById("float_app_open").remove();
                    });
                }
            } catch (e) {
 
            }
 
        }
        return new Promise((success, error) => {
            let ua = navigator.userAgent.toLowerCase();
            let is_wx = ua.indexOf('micromessenger') != -1;
 
            if (is_wx) {
                try {
                    if (wx_sdk_is_init) {
                        append_fun(extinfo);
 
                        success({ status: 0, message: '成功' });
                    } else {
 
                        api_data.weishare({
                            url: location.origin + location.pathname + location.search
                        }).then(res => {
                            wx_sdk.config({
                                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                                appId: res.data.appId, // 必填，公众号的唯一标识
                                timestamp: res.data.timestamp, // 必填，生成签名的时间戳
                                nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
                                signature: res.data.signature,// 必填，签名
                                openTagList: ['wx-open-launch-weapp', 'wx-open-launch-app'],//注意这个参数
                                jsApiList: [
                                    'updateAppMessageShareData',
                                    'updateTimelineShareData',
                                    'onMenuShareTimeline',
                                    'onMenuShareAppMessage',
                                    "onMenuShareQQ",
                                    'onMenuShareQZone'
                                ]
                            });
                        }).catch(err => {
                            success({ status: -1, message: '失败' });
 
                        });
                        wx_sdk.ready(function () {   //需在用户可能点击分享按钮前就先调用
 
                            wx_sdk_is_init = !0;
                            append_fun(extinfo);
 
 
                            success({ status: 0, message: '成功' });
                        });
                        wx_sdk.error(function () {
                            success({ status: -1, message: '失败' });
 
                        });
                    }
                } catch (e) {
                    success({ status: -1, message: '失败' });
 
 
                }
            } else {
                success({ status: -1, message: '失败' });
                //append_fun(extinfo);
            }
        }).catch((e) => {
            console.error("h5_wx_open_app catch ", e);
        })
        // #endif
    },
}

参照的博客

https://ask.dcloud.net.cn/article/37584

https://ask.dcloud.net.cn/question/98097

https://blog.csdn.net/hahahhahahahha123456/article/details/109463412

https://blog.csdn.net/jane900/article/details/107410321