uniapp开发的h5跳转到小程序

2022/6/8 1:21:30

编程Tag： 程序 let 跳转 APP H5 document useragent uniapp uni

本文主要是介绍uniapp开发的h5跳转到小程序，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

使用场景：

将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开发的h5跳转到小程序的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

uniapp开发的h5跳转到小程序

相关编程文章