外部H5如何跳转微信小程序

眼神清澈的前端小白

已于 2024-09-26 14:53:53 修改

阅读量1.4k

点赞数 8

文章标签：微信小程序小程序

于 2024-09-26 14:50:44 首次发布

本文链接：https://blog.csdn.net/wenbo_zhang/article/details/142555310

版权

一、首先在微信小程序后台【账号设置】-【基本设置】-【隐私与安全】-【明文scheme拉起此小程序】配置所需要跳转的小程序路径。

二、在h5页面中配置需要跳转的小程序路径

【必填】APPID：通过明文 URL Scheme 打开小程序的 appid ；
【必填】PATH：通过明文 URL Scheme 打开小程序的页面 path ，必须是已经发布的小程序存在的页面，不可携带 query；
【选填】QUERY：通过明文 URL Scheme 打开小程序的 query ，最大512个字符，只支持数字，大小写英文以及部分特殊字符：!#$&'()*+,/:;=?@-._~%`，需要url_encode；
【选填】ENV_VERSION：要打开的小程序版本,正式版为release，体验版为trial，开发版为develop，仅在微信外打开时生效。注意：若不填写，则默认打开正式版小程序。

【示例】

<div @click="goprogram">打开小程序</div>
/* 跳转到小程序首页 */
const goprogram = () => {
  location.href = `weixin://dl/business/?appid=填写你的小程序appid&path=填写小程序页面路径&query=填写你想要携带的参数`
}

注意：参数的携带方式如：query=activityId=${encodeURIComponent(activityId)}，其中encodeURIComponent是对参数进行编码，识别包含的特殊符号，如果不需要识别，去除也可。

三.点击h5的跳转按钮后则会唤醒跳转小程序