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

@漏刻有时

目录
打赏
0
0
0
0
184
分享
相关文章
公众号小程序H5网页像素流送UE5模型的方法分享
本文探讨了如何通过像素流送技术在小程序、公众号等平台展示复杂的3D模型(如UE5引擎开发的楼盘模型、数字孪生展厅)。该技术将GPU和CPU算力需求转移到服务器端,使用户侧无需高性能硬件即可流畅体验。通过Webrtc实现实时云渲染,确保毫秒级响应,且兼容多种浏览器。使用点量云流等产品级软件,老项目只需重新打包为EXE格式,即可轻松嵌入H5网页、小程序或公众号中,支持Unity、WebGL等多种3D应用及传统CAD模型。
46 1
使用php开发圈子系统特点,如何获取圈子系统源码,社交圈子运营以及圈子系统的功能特点,圈子系统,允许二开,免费源码,APP 小程序 H5
开发一个圈子系统(也称为社交网络或社群系统)可以是一个复杂但非常有趣的项目。以下是一些关键特点和步骤,帮助你理解如何开发、获取源码以及运营一个圈子系统。
215 4
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
62 0
uni-vue3-wetrip自创跨三端(H5+小程序+App)酒店预订app系统模板
vue3-uni-wetrip原创基于vite5+vue3+uniapp+pinia2+uni-ui等技术开发的仿去哪儿/携程预约酒店客房app系统。实现首页酒店展示、预订搜索、列表/详情、订单、聊天消息、我的等模块。支持编译H5+小程序+App端。
136 8
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
203 3
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
705 3
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
104 0
在线课堂+工具组件小程序uniapp移动端源码
|
5月前
|
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
123 0
微信小程序更新提醒uniapp
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
174 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等