请问h5页面链接,能跳小程序吗?

请问h5页面链接,能跳小程序吗?


回答:

看看这篇文章,https://blog.csdn.net/liya_nan/article/details/82622013


回答:

可以的 具体步骤: https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guid...

<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>


回答:

是时候拿出我写的博客了,多途径唤起小程序方案研究

以上是 请问h5页面链接,能跳小程序吗? 的全部内容, 来源链接: utcz.com/p/934074.html

回到顶部