微信小程序学习实录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']

@漏刻有时

相关文章
|
2月前
|
存储 JSON 小程序
微信小程序入门之新建并认识小程序结构
微信小程序入门之新建并认识小程序结构
59 1
|
10天前
|
移动开发 小程序 PHP
校园圈子论坛系统采取的PHP语音和uni账号开发的小程序APP公众号H5是否只需要4800元?是的,就是只需要4800元
关于校园圈子论坛系统采用PHP语言和uni-app开发的小程序、APP、公众号和H5是否仅需4800元这个问题,实际上很难给出一个确定的答案。这个价格可能受到多种因素的影响
40 8
|
13天前
|
缓存 移动开发 小程序
uni-vue3-wetrip自创跨三端(H5+小程序+App)酒店预订app系统模板
vue3-uni-wetrip原创基于vite5+vue3+uniapp+pinia2+uni-ui等技术开发的仿去哪儿/携程预约酒店客房app系统。实现首页酒店展示、预订搜索、列表/详情、订单、聊天消息、我的等模块。支持编译H5+小程序+App端。
50 8
|
28天前
|
移动开发 小程序
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
56 3
|
2月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
340 3
|
3月前
|
小程序 前端开发 中间件
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
本文介绍了如何在ThinkPHP框架中配置跨域请求,使用了TP内置的跨域类`\think\middleware\AllowCrossDomain::class`。文章还讨论了小程序和web网页在跨域请求格式上的区别,并提供了解决方案,包括修改跨域中间件源码以支持`Origin`和`token`。此外,还介绍了微信小程序跨域请求的示例和web网页前端发送Axios跨域请求的请求拦截器配置。
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
|
4月前
|
小程序
微信小程序多种跳转页面方式
微信小程序多种跳转页面方式
|
2月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
964 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
2月前
|
移动开发 小程序 数据可视化
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
51 2
|
4月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
116 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
下一篇
DataWorks