h5判断是否在微信环境下

news/2024/10/17 23:31:20/

微信环境h5跳转小程序页面:
1、判断环境

var ua = navigator.userAgent.toLowerCase();if (ua.match(/MicroMessenger/i) == "micromessenger") {//ios的ua中无miniProgram,但都有MicroMessenger(表示是微信浏览器)wx.miniProgram.getEnv((res) => {if (res.miniprogram) {// 小程序中打开h5跳转小程序页面wx.miniProgram.switchTab({url: "/pages/personal/index",});} else {// 非小程序}});} else {console.log("不在微信里");}

小程序中h5跳转小程序页面:
在这里插入图片描述
微信原文档:https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
2、浏览器环境跳转小程序
2.1 引入js-sdk注入权限
微信原文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#11

created() {this.setJsTicket();},mounted() {// 打开小程序var btn = document.getElementById("launch-btn");btn.addEventListener("launch", function (e) {console.log("success", e);});btn.addEventListener("error", function (e) {alert("小程序打开失败");console.log("fail", e.detail);});},methods:{setJsTicket() {axios.get(接口, {参数}).then((res) => {window.wx.config({debug: false,appId: res.data[0],timestamp: res.data[1],nonceStr: res.data[4],signature: res.data[3],jsApiList: ["wx-open-launch-weapp"],openTagList: ["wx-open-launch-weapp"],});});},}

2.2 小程序开放标签
微信原文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21

 <wx-open-launch-weappstyle="position: absolute;top: 0;left: 0;width: 100%;height: 100%;"id="launch-btn"username="gh_aa5bce5cb179"path="pages/personal/index"><script type="text/wxtag-template"><style>.btn{position:absolute; top: 0; left: 0; width: 100%; height: 100%;opacity:0}</style><div class="btn">去实名</div></script></wx-open-launch-weapp>

2.3 最终效果部署上服务器才会显示
出现这个图片就是注入成功:
在这里插入图片描述


http://www.ppmy.cn/news/465065.html

相关文章

Windows运行vbs在微信下自动发送烟花、庆祝

相关链接&#xff1a;wshShell.SendKeys模拟键盘操作 在txt下粘贴以下代码&#xff0c;修改txt文件为vbs&#xff0c;根据需求自行调整 Set WshShellWScript.CreateObject("WScript.Shell")WshShell.AppActivate "WeChat.Application"for i1 to 10WScript…

微信小程序转发功能的实现

前段时间做了一个微信小程序的项目&#xff0c;在项目中有实现过小程序的转发功能,这里给大家分享一下&#xff0c;有不对的地方勿喷 微信小程序官方文档:基础 | 微信开放文档 实现小程序转发有二种方式&#xff0c;一种是用户点击右上角转发&#xff0c;一种是在html文件中通…

uniapp实现微信登录

项目描述 使用uniapp框架编写微信小程序&#xff0c;使用自己的后端&#xff0c;实现微信登陆功能。 登录流程 此处参考微信官网提供的 小程序登录流程时序 如下图&#xff1a; 图片来源&#xff1a;微信官方API文档 所以登录的流程即&#xff1a; 首先在前端调用login()…

Unity 打包微信

1、更换字体 打包微信时unity自带的字体不显示汉字&#xff0c;需要更换字体 2、下载插件 https://github.com/wechat-miniprogram/minigame-unity-webgl-transform/blob/main/Design/Transform.md 3、Unity 版本&#xff0c;需要支持WebGL 4、打包 添加插件后点击【微信小…

docker安装微信

文章目录 安装dockerpull bestwu/wechat启动微信创建微信容器docker start wechat方式启动微信容器 更优雅的方式使用微信下载合适的wechat icon将当前用户加入sudoers创建微信启动脚本创建快捷方式快捷启动 安装docker 略&#xff0c;看Get Docker pull bestwu/wechat 略。…

微信登录流程

主要流程&#xff1a; 微信授权登录让微信用户使用微信身份安全登录第三方应用或网站&#xff0c;在微信用户授权登录已接入微信的第三方应用后&#xff0c;第三方可以获取到用户的接口调用凭证&#xff08;access_token&#xff09;&#xff0c;通过access_token可以进行微信开…

自动化测试-selenium基础操作

元素操作 方法&#xff1a; 1、.send_keys() # 输入方法 2、.click() # 点击方法 3、.clear() # 清空方法# 导包 from time import sleep from selenium import webdriver# 实例化浏览器 driver webdriver.Chrome()# 打开网址 driver.get(https://www.baidu.com/)# 需求 e…

企业微信应用开发实践

一、开发者中心 https://developer.work.weixin.qq.com/document 二、管理后台&#xff1a; https://work.weixin.qq.com/ 三、企业内部应用开发 前提&#xff1a;域名已经备案&#xff0c;且在管理后台网页授权及JS-SDK可信域名已开启。 如果是JS-SDK开发&#xff0c;文…