公众号JS-SDK使用记录

最新推荐文章于 2025-03-25 16:32:14 发布

原创最新推荐文章于 2025-03-25 16:32:14 发布 · 131 阅读

0 ·

CC 4.0 BY-SA版权

微信小程序专栏收录该内容

18 篇文章

订阅专栏

本文介绍如何在H5页面中实现打开微信小程序的功能。包括使用urlscheme在微信外部环境中打开小程序，以及利用微信开放标签在微信内部进行跳转的方法。此外还提供了具体的样式设置示例。

文档地址

官方文档

使用场景

H5打开小程序

微信外打开小程序使用urlscheme即可。微信内打开小程序需要使用到公众号的 微信开放标签 。

参考文档

在此列出官方提供的一些说明文档，以供参考：
urlscheme打开小程序：urlscheme
微信开放标签：官方文档其他文章参考
js-sdk：官方文档

tips

公众号后台设置

js接口安全域名
配置ip白名单（获取access_token）

开放标签样式

可以将wx-open-launch-weapp设置为透明的absolute，button内容不可为空，另写样式。参考下列代码块：

<div style="position: relative;">
   <div id="wxa_buy" style="width:100%;height:43px;line-height: 43px;text-align: center;position: relative;font-size:16px;background-color:#D71222;color:white;border-radius:3px;cursor: pointer;" >
       前往小程序商城购买
   </div>
   <wx-open-launch-weapp style="height:43px;width: 330px;position: absolute;left:0;top:0;" id="pdp-launch-btn" username="gh_bec89bed9589" path="pages/goods/goods?good_id='<{$goods.goods_id}>'" >
       <template>
           <button class="btn" style="border:0;width: 330px;height:43px;line-height: 43px;position: relative; background-color:transparent;">
               &nbsp;
           </button>
       </template>
   </wx-open-launch-weapp>
</div>