手机浏览器或微信中唤起小程序

2024-03-05 00:44
文章标签 程序 微信 手机 浏览器 唤起

本文主要是介绍手机浏览器或微信中唤起小程序，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

明文URL Schem唤起小程序

  • 业务需求的场景
  • 使用文档介绍
  • 实现过程
  • 遇到的问题
  • 注意事项
  • 相关文档

业务需求的场景

需要在后台管理系统中的列表数据添加复制功能，复制成功的链接能够在手机浏览器或者微信中打开指定的小程序页面（pages/good/detail/index）

使用文档介绍

需要在手机浏览器或者微信中唤起小程序有两种方式, 小程序URL Scheme文档，开放范围：非个人主体小程序

  1. 通过加密 URL Scheme （需要后端获取加密 Scheme）
  2. 通过明文 URL Scheme （可前端直接拼接）

注意：iOS系统可以直接打开URL Scheme，Android系统需要使用 H5 页面中转

实现过程

当前项目使用的技术是 vite-vue-ts，使用明文 URL Scheme方式唤起小程序
安装项目：pnpm create vite my-project-name --template vue-ts

1.列表页复制按钮事件js，实现生成URL Scheme，并复制到剪切板

const handleClick = ()=>{// URL Scheme需要进入的小程序页面const path = 'pages/good/detail/index'// URL Scheme携带的参数const query = encodeURIComponent(`goodId=${record.goodId}&other=${record.other}`)// 拼接完整的 URL Schemeconst url = encodeURIComponent(`weixin://dl/business/?appid=222222222222&path=${path}&query=${query}`)// 跳转到新增的H5页面的url（看下文），mpAppId公众号id，appId小程序idconst goodUrl = `${location.origin}/good.html?scheme=${url}&mpAppId=11111111111111&appId=222222222222`// 调用后端的接口生成短链接，并复制到剪切板return myRequest(`api/short/url`, { url:goodUrl }).then((resp) => {// 拷贝到剪切板（看下文utils工具）copyText(resp.data)Message.success('复制成功')return resp.data})
}

2.需要在现有的后台管理系统项目新建一个H5页面
在vite.config.ts中配置项build > rollupOptions > input 中新增配置项 good:

export default defineConfig({// ... 其他配置build：{rollupOptions：{// ... 其他配置input: {good: path.resolve(__dirname, 'good.html'), // 新建H5index: path.resolve(__dirname, 'index.html'), // 原系统入口页},output: {dir: path.resolve(__dirname, './dist'), // 打包输出问价},}}
})

在vite.config.ts同级目录下新建good.html文件，并引入小程序微信开放标签JDK的js文件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><linkrel="icon"type="image/svg+xml"href="/logo.png"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>跳转中...</title>// 小程序微信开放标签<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script></head><body><div id="app"></div><scripttype="module"src="/src/good.ts"></script></body>
</html>

在src下新建good.ts，挂载页面

import { createApp } from 'vue'
import Auth from './Login.vue'
import './themes/login.less'
createApp(Auth).mount('#app')

在src下新建good.vue页面(H5页面)，用来跳转小程序（访问复制出来的URL会进入这个页面，然后在点击进入小程序）

<!-- eslint-disable vue/no-lone-template -->
<template><div class="good">// 手机浏览器网页直接打开上文复制出来的url<divv-if="isWeiXin ? false : isMobile"class="public-web-container"><ahref="javascript:"class="public-web-jump-button"@click="openWxApp()">打开小程序</a></div>// 微信中需要使用微信开发标签<divv-show="isWeiXin"id="weChat-web-container"class="weChat-web-container"><wx-open-launch-weappid="launch-btn"class="wx-open-launch-weapp":appid="appId":path="weappPath"><component:is="'script'"type="text/wxtag-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></component></wx-open-launch-weapp></div>// 桌面端提示用手机网页<divv-if="isDesktop"class="desktop-web-container"><p>请使用手机打开网页</p></div></div>
</template>
<script lang="ts" setup>
// 开放标签获取签名（签名需要后端生成）
const getSign = (params: { url: string })=>{return axios.get(`/api/get/sign?url=${params.url}`)
}const isWeiXin = ref<boolean>(false)
const isMobile = ref<boolean>(false)
const isDesktop = ref<boolean>(false)
// mpAppId 公众号id,  appId 小程序id
const { mpAppId = '11111111111111', appId = '222222222222', scheme } = Object.fromEntries(new URLSearchParams(location.search))
const weappPath = ref('')const errorCb= (e: any) => {console.error('错误原因:', e.detail.errMsg)
}onMounted(() => {// 微信页面需要注册开放标签document.addEventListener('WeixinOpenTagsError', errorCb)if (isWeiXin.value) {getSign({ url: encodeURIComponent(location.href.split('#')[0]) }).then((res) => {const { data } = res.data;(window as any).wx.config({debug: false,appId: mpAppId,timestamp: data.timestamp,nonceStr: data.noncestr,signature: data.sign,jsApiList: ['uploadImage'],openTagList: ['wx-open-launch-weapp'],})})}
})onUnmounted(() => document.removeEventListener('WeixinOpenTagsError', errorCb))onBeforeMount(() => {const params = new URLSearchParams(scheme)const query = params.get('query') as stringweappPath.value = `${params.get('path')}?${query}`// 区分平台const ua: any = navigator.userAgent.toLowerCase()const isWXWork = ua.match(/wxwork/i) === 'wxwork'isWeiXin.value = !isWXWork && ua.match(/micromessenger/i) == 'micromessenger'if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile)/i)) {isMobile.value = true} else {isDesktop.value = true}
})const openWxApp = () => {// 非微信中网页location.href = decodeURIComponent(scheme)
}
</script><style lang="less" scoped>
* {padding: 0;margin: 0;
}
.good{position: absolute;top: 0;bottom: 0;left: 0;right: 0;
}
.weChat-web-container,
.public-web-container,
.desktop-web-container {display: flex;flex-direction: column;align-items: center;
}
.wx-open-launch-weapp {position: absolute;bottom: 50%;left: 0;right: 0;display: flex;flex-direction: column;align-items: center;transform: translateY(-50%);
}
.public-web-jump-button {position: absolute;bottom: 50%;transform: translateY(-50%);display: inline-block;width: 184px;margin-left: auto;margin-right: auto;padding: 8px 24px;box-sizing: border-box;background-color: #06ae56;color: #fff;font-weight: 700;font-size: 17px;text-align: center;text-decoration: none;line-height: 1.41176471;border-radius: 4px;overflow: hidden;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.desktop-web-container p {position: absolute;top: 50%;transform: translateY(-50%);
}
</style>

src > utils > index 工具文件

 // 复制剪切板功能
function fallbackCopyTextToClipboard(text: string) {let textArea = document.createElement('textarea')textArea.value = text// Avoid scrolling to bottomtextArea.style.top = '0'textArea.style.left = '0'textArea.style.position = 'fixed'document.body.appendChild(textArea)textArea.focus()textArea.select()return new Promise<boolean>((resolve, reject) => {try {let successful = document.execCommand('copy')resolve(successful)} catch (err) {reject(err)} finally {document.body.removeChild(textArea)}})
}export  const copyText = (text: string): Promise<boolean> => {if (!navigator.clipboard) {return fallbackCopyTextToClipboard(text)}return navigator.clipboard.writeText(text).then(() => true)
}

遇到的问题

  1. 链接没有加密，打开网页是空白的，使用encodeURIComponent解决
  2. 链接过长，打开网页是空白的，通过后端生成短链接解决
  3. 注册开放标签注册失败，也会导致网页是空白的

注意事项

  1. 一定要配置 ：在MP平台->设置->隐私与安全->明文Scheme拉起此小程序声明
  2. 微信开发标签一定要配置：登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

相关文档

链接: URL Scheme文档
链接: 获取短链接
链接: 开放标签

这篇关于手机浏览器或微信中唤起小程序的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/774792。

相关文章

W外链微信推广短连接怎么做？

W外链微信推广短连接怎么做？

制作微信推广链接的难点分析 一、内容创作难度 制作微信推广链接时，首先需要创作有吸引力的内容。这不仅要求内容本身有趣、有价值，还要能够激起人们的分享欲望。对于许多企业和个人来说，尤其是那些缺乏创意和写作能力的人来说，这是制作微信推广链接的一大难点。 二、精准定位难度 微信用户群体庞大，不同用户的需求和兴趣各异。因此，制作推广链接时需要精准定位目标受众，以便更有效地吸引他们点击并分享链接
阅读更多...
JAVA智听未来一站式有声阅读平台听书系统小程序源码

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来，一站式有声阅读平台听书系统 🌟&nbsp;开篇：遇见未来，从“智听”开始 在这个快节奏的时代，你是否渴望在忙碌的间隙，找到一片属于自己的宁静角落？是否梦想着能随时随地，沉浸在知识的海洋，或是故事的奇幻世界里？今天，就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统，它正悄悄改变着我们的阅读方式，让未来触手可及！ 📚&nbsp;第一站：海量资源，应有尽有 走进“智听
阅读更多...
EMLOG程序单页友链和标签增加美化

EMLOG程序单页友链和标签增加美化

单页友联效果图： 标签页面效果图： 源码介绍 EMLOG单页友情链接和TAG标签，友链单页文件代码main{width: 58%;是设置宽度 自己把设置成与您的网站宽度一样，如果自适应就填写100%，TAG文件不用修改 安装方法：把Links.php和tag.php上传到网站根目录即可，访问 域名/Links.php、域名/tag.php 所有模板适用，代码就不粘贴出来，已经打
阅读更多...
跨系统环境下LabVIEW程序稳定运行

跨系统环境下LabVIEW程序稳定运行

在LabVIEW开发中，不同电脑的配置和操作系统（如Win11与Win7）可能对程序的稳定运行产生影响。为了确保程序在不同平台上都能正常且稳定运行，需要从兼容性、驱动、以及性能优化等多个方面入手。本文将详细介绍如何在不同系统环境下，使LabVIEW开发的程序保持稳定运行的有效策略。 LabVIEW版本兼容性 LabVIEW各版本对不同操作系统的支持存在差异。因此，在开发程序时，尽量使用
阅读更多...
CSP 2023 提高级第一轮 CSP-S 2023初试题 完善程序第二题解析 未完

CSP 2023 提高级第一轮 CSP-S 2023初试题 完善程序第二题解析 未完

一、题目阅读 （最大值之和）给定整数序列 a0,⋯,an−1，求该序列所有非空连续子序列的最大值之和。上述参数满足 1≤n≤105 和 1≤ai≤108。 一个序列的非空连续子序列可以用两个下标 ll 和 rr（其中0≤l≤r<n0≤l≤r<n）表示，对应的序列为 al,al+1,⋯,ar​。两个非空连续子序列不同，当且仅当下标不同。 例如，当原序列为 [1,2,1,2] 时，要计算子序列 [
阅读更多...
这些心智程序你安装了吗？

这些心智程序你安装了吗？

原文题目：《为什么聪明人也会做蠢事（四）》 心智程序 大脑有两个特征导致人类不够理性，一个是处理信息方面的缺陷，一个是心智程序出了问题。前者可以称为“认知吝啬鬼”，前几篇文章已经讨论了。本期主要讲心智程序这个方面。 心智程序这一概念由哈佛大学认知科学家大卫•帕金斯提出，指个体可以从记忆中提取出的规则、知识、程序和策略，以辅助我们决策判断和解决问题。如果把人脑比喻成计算机，那心智程序就是人脑的
阅读更多...
cell phone teardown 手机拆卸

cell phone teardown 手机拆卸

tweezer 镊子 screwdriver 螺丝刀 opening tool 开口工具 repair 修理 battery 电池 rear panel 后盖 front and rear cameras 前后摄像头 volume button board 音量键线路板 headphone jack 耳机孔 a cracked screen 破裂屏 otherwise non-functiona
阅读更多...
zeroclipboard 粘贴板的应用示例， 兼容 Chrome、IE等多浏览器

zeroclipboard 粘贴板的应用示例， 兼容 Chrome、IE等多浏览器

zeroclipboard单个复制按钮和多个复制按钮的实现方法 最近网站改版想让复制代码功能在多个浏览器上都可以实现，最近看网上不少说我们的代码复制功能不好用的，我们最近将会增加代码高亮等功能，希望大家多多支持我们 zeroclipboard是一个跨浏览器的库类 它利用 Flash 进行复制，所以只要浏览器装有 Flash 就可以运行，而且比 IE 的
阅读更多...
uniapp设置微信小程序的交互反馈

uniapp设置微信小程序的交互反馈

链接：uni.showToast(OBJECT) | uni-app官网 (dcloud.net.cn) 设置操作成功的弹窗： title是我们弹窗提示的文字 showToast是我们在加载的时候进入就会弹出的提示。 2.设置失败的提示窗口和标签 icon：'error'是设置我们失败的logo 设置的文字上限是7个文字，如果需要设置的提示文字过长就需要设置icon并给
阅读更多...
基于SpringBoot的宠物服务系统+uniapp小程序+LW参考示例

基于SpringBoot的宠物服务系统+uniapp小程序+LW参考示例

系列文章目录 1.基于SSM的洗衣房管理系统+原生微信小程序+LW参考示例 2.基于SpringBoot的宠物摄影网站管理系统+LW参考示例 3.基于SpringBoot+Vue的企业人事管理系统+LW参考示例 4.基于SSM的高校实验室管理系统+LW参考示例 5.基于SpringBoot的二手数码回收系统+原生微信小程序+LW参考示例 6.基于SSM的民宿预订管理系统+LW参考示例 7.基于
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2