微信小程序学习实录8:H5网页跳转小程序(微信开放标签、wx-open-launch-weapp按钮不显示、noPermissionJsApi)

简介: 微信小程序学习实录8:H5网页跳转小程序(微信开放标签、wx-open-launch-weapp按钮不显示、noPermissionJsApi)

跳转小程序:wx-open-launch-weapp

用于页面中提供一个可跳转指定小程序的按钮。使用此标签后,用户需在网页内点击标签按钮方可跳转小程序。

官方文档传送门

一、环境部署

在浏览器环境中,调起微信小程序需要通过微信提供的开放能力来实现。以下是一种常见的调起微信小程序的方法:


首先,确保你的网页中引入了微信提供的JavaScript SDK,通常为https://res.wx.qq.com/open/js/jweixin-1.6.0.js

    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  1. 在你的网页中,编写JavaScript代码来初始化微信JS-SDK,并检测是否可以使用微信JS-SDK:
wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
  appId: '', // 必填,公众号的唯一标识
  timestamp: , // 必填,生成签名的时间戳
  nonceStr: '', // 必填,生成签名的随机串
  signature: '',// 必填,签名
  jsApiList: [], // 必填,需要使用的JS接口列表
  openTagList: [] // 可选,需要使用的开放标签列表,例如['wx-open-launch-weapp']
});
wx.ready(function () {
  // 在微信JS-SDK准备就绪后,可以调用微信相关的功能
});
wx.error(function (res) {
  // 如果初始化失败,可以在这里处理错误
});


  1. 配置微信平台的网页授权域名。在微信公众平台的小程序设置中,找到"开发-开发设置",将你的网站域名添加到"网页授权域名"中,保存设置。

二、打开小程序

要实现点击链接或按钮进行跳转到小程序,你可以在HTML中添加一个链接或按钮元素,并通过事件监听器(如点击事件)来触发打开小程序的逻辑。以下是示例代码:

JavaScript:

<wx-open-launch-weapp
        id="launch-btn"
        username="gh_****"
        path="pages/index/index">
    <script type="text/wxtag-template">
        <button style="display: inline-block;padding: 12px;width: 200px;height: 40px;">打开小程序</button>
    </script>
</wx-open-launch-weapp>


    var btn = document.getElementById('launch-btn');
    btn.addEventListener('launch', function (e) {
        console.log('success');
    });
    btn.addEventListener('error', function (e) {
        console.log('fail', e.detail);
    });


三、避坑指南

1.noPermissionJsApi

调试发现,ios弹出提示 { “noPermissionJsApi”: [], “errMsg”: “config:ok” } 就是配置成功。

  • PC端微信浏览器环境
  • IOS端微信浏览器环境

  • 常见情况:
  • 直接在微信聊天里输入一个url ,点链接的时候会有noPermissionJsApi问题。
  • 当你扫一扫进入或者直接点微信官方分享的链接进入或者点公众号底部的菜单进入,是没有问题的
  • 官方没有明确说明,猜测应该是微信对外链不确定链接的一种保护机制。

2.JS文件的引入版本

http://res.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:http://res2.wx.qq.com/open/js/jweixin-1.6.0.js (支持https);

微信开放标签版本一定要是1.6.0的

3. jsApiList[]

必填,需要使用的JS接口列表,这个地方必须至少写一个,即使你一个都不想用。

4.wx-open-launch-weapp 按钮不显示

wx-open-launch-weapp按钮不显示的解决方案五花八门。在本案例中,是因为端口写错了,直接复制了官方文档的wx-open-launch-app。

 openTagList: ['wx-open-launch-weapp'] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app']

@漏刻有时

相关文章
|
19天前
|
存储 移动开发 小程序
校园圈子系统小程序(圈子论坛、私信聊天、资料共享、二手交易、兼职,跑腿)开源码开发/微信公众号、小程序、H5多端账号同步/搭建多城市的综合社交生活平台
基于开源技术栈构建的校园圈子系统小程序,整合社交与生活服务功能,涵盖兴趣圈子、私信聊天、资料共享、二手交易、兼职跑腿等六大核心模块。通过多端账号同步(微信公众号/小程序/H5),实现数据实时交互,满足学生群体的多元化需求。项目精准锚定校园市场,以“社交+服务”双轮驱动,提供一站式解决方案,支持快速部署与多校区运营,同时具备广告、佣金、会员等多元变现能力,是打造校园生态的理想工具。
72 0
校园圈子系统小程序(圈子论坛、私信聊天、资料共享、二手交易、兼职,跑腿)开源码开发/微信公众号、小程序、H5多端账号同步/搭建多城市的综合社交生活平台
|
1月前
|
Web App开发 移动开发 小程序
公众号小程序H5网页像素流送UE5模型的方法分享
本文探讨了如何通过像素流送技术在小程序、公众号等平台展示复杂的3D模型(如UE5引擎开发的楼盘模型、数字孪生展厅)。该技术将GPU和CPU算力需求转移到服务器端,使用户侧无需高性能硬件即可流畅体验。通过Webrtc实现实时云渲染,确保毫秒级响应,且兼容多种浏览器。使用点量云流等产品级软件,老项目只需重新打包为EXE格式,即可轻松嵌入H5网页、小程序或公众号中,支持Unity、WebGL等多种3D应用及传统CAD模型。
71 1
|
5月前
|
移动开发 小程序
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
244 3
|
6月前
|
Web App开发 移动开发 前端开发
H5微信外支付(移动端浏览器)
H5微信外支付(移动端浏览器)
198 1
 H5微信外支付(移动端浏览器)
|
7月前
|
小程序 前端开发 中间件
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
本文介绍了如何在ThinkPHP框架中配置跨域请求,使用了TP内置的跨域类`\think\middleware\AllowCrossDomain::class`。文章还讨论了小程序和web网页在跨域请求格式上的区别,并提供了解决方案,包括修改跨域中间件源码以支持`Origin`和`token`。此外,还介绍了微信小程序跨域请求的示例和web网页前端发送Axios跨域请求的请求拦截器配置。
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
|
6月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
827 3
|
6月前
|
移动开发 小程序 数据可视化
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
123 2
|
8天前
|
监控 前端开发 小程序
陪练,代练,护航,代打小程序源码/前端UNIAPP-VUE2.0开发 后端Thinkphp6管理/具备家政服务的综合型平台
这款APP通过技术创新,将代练、家政、娱乐社交等场景融合,打造“全能型生活服务生态圈”。以代练为切入点,提供模块化代码支持快速搭建平台,结合智能匹配与技能审核机制,拓展家政服务和商业管理功能。技术架构具备高安全性和扩展性,支持多业务复用,如押金冻结、录屏监控等功能跨领域应用。商业模式多元,包括交易抽成、增值服务及广告联名,同时设计跨领域积分体系提升用户粘性,实现生态共生与B端赋能。
57 9
|
3月前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
93 0
|
5月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
121 0
在线课堂+工具组件小程序uniapp移动端源码

热门文章

最新文章