首页 > 编程语言> 文章详细

uniapp开发的h5跳转到小程序

2022-06-07 17:36:02 阅读：480 来源： 互联网

标签：uniapp let app 程序 h5 userAgent 跳转 uni document

使用场景：

将h5嵌入到小程序或者app中，然后再拉起另外一个小程序

使用方法(通过中转)：

　　1、app调用方法，让app提供跳转方法，将参数传给app，让app拉起小程序

　　2、小程序跳转方法，h5通过uni.postMassage{}+uni.navigateBack()传递消息，让小程序拉起另外一个小程序

具体实现：

app

判断使用手机

let u = navigator.userAgent, app = navigator.appVersion;
let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; 
//android终端或者uc浏览器器
let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

ios

window.webkit.messageHandlers.AppPushToMiniProgram.postMessage(str)

安卓

javascript:android.AppPushToMiniProgram(str)

小程序

H5（uniapp开发）

第一步：配置文件，此temlate.html里面放的是引入的jweixin-1.4.0.js和uni.webview.1.5.2.js

template.html

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>
            <%= htmlWebpackPlugin.options.title %>
        </title> 
        <script>
            var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS
                .supports('top: constant(a)'))
            document.write(
                '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
                (coverSupport ? ', viewport-fit=cover' : '') + '" />')
        </script>
        <link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
    </head>
    <body>
        <noscript>
            <strong>Please enable JavaScript to continue.11111111</strong>
        </noscript>
        <div id="app"></div>
        <!-- built files will be auto injected -->
 
        <script type="text/javascript">
            var userAgent = navigator.userAgent;
            if (/miniProgram/i.test(userAgent) && /micromessenger/i.test(userAgent)) {
                // 微信小程序 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。
                document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');
            }
        </script>
        <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
        </script>
        <script type="text/javascript">
            window.$uni = uni;
        </script>
    </body>
</html>

第二步：调用

mounted() {
            this.$nextTick(() => {
              // 初始化uni.webview
              document.addEventListener('UniAppJSBridgeReady', function () {
                    let certificate = document.getElementById("certificate");
                    certificate.addEventListener("click", function(){
                        $uni.postMessage({
                            data: {
                                appId: 'wx9ecd59',
                                path:'/pages/mairegi',
                                extraData:{
                                    code:'50'
                                },
                                envVersion:'trial'
                            }
                        });
                        $uni.navigateBack()
                    })
              });
            });
        },

小程序端

<template>
    <view>
        <web-view :webview-styles="webviewStyles" src="http://192.168.21.51:8080" @message="handleMessage"></web-view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                webviewStyles: {
                    progress: {
                        color: '#FF3333'
                    }
                }
            }
        },
        methods:{
            handleMessage(res){
                    console.log(res)
            }
        }
    }
</script>

<style>

</style>

标签：uniapp,let,app,程序,h5,userAgent,跳转,uni,document
来源： https://www.cnblogs.com/xiaojianwei/p/16352698.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

uniapp开发的h5跳转到小程序