h5网页跳转微信小程序
H5网页跳转微信小程序
再次记录下, 通过使用
微信开放标签
,可便捷的跳转到微信小程序
。
文章目录
- H5网页跳转微信小程序
- 效果图
- 一、小程序跳转按钮
- 二、开放标签使用步骤
- 1. 绑定域名
- 2. 引入js文件
- 3. config权限配置及ready处理
- 4. 调用方法
- 解决VUE中警告
- 注意:
官方文档
效果图
请忽略样式, 刚好页面上有分享功能,临时在此页面上展示功能哈。
debug
模式开启后,如成功会弹出如图一所提示, 当触发确定
按钮时,页面会展示相关按钮。仔细的你会发现, 安装设备上样式有点不一样哈【最后一张图片】
一、小程序跳转按钮
- 个人项目基于公众号,使用
vue
框架搭建 path
属性, 需要跳转的小程序页面路径及参数。必须添加.html
后缀。【demo:跳转小程序首页,再加上.html
即可】- **注意:**直接在浏览器上查看是没有效果的,可在真机上调试。
<template><div><wx-open-launch-weappid="launch-btn"username="gh_xxxxxxxx"path="page/tabBar/index/index.html"@launch="handleLaunchFn"@error="handleErrorFn"><script type="text/wxtag-template"><style>.btn { display: flex;align-items: center;font-size: 30px;border-radius: 30px;background: #fff;}</style><button class="btn">打开小程序</button></script></wx-open-launch-weapp></div>
</template>
二、开放标签使用步骤
具体的
使用步骤
文档已说明,这里阐述下个人在项目所应用的。同分享好友、朋友圈方法类似。只需加上需要的
JS接口列表
、开放标签列表
微信分享好友具体使用方法可查看此文章
1. 绑定域名
- 登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
- 效果图【只配置使用的
域名
即可。请忽略如图配置其他项目的域名】
2. 引入js文件
- 这里安装
微信JS-SDK
,当然还用其他方式文档已说明。
npm i weixin-js-sdk -S
3. config权限配置及ready处理
- 通过
config
接口注入权限验证配置并申请所需开放标签 - 调用
config
接口时建议开启debug
模式。页面会alert出错误信息。
getOpenLaunchWeapp() {let that = this;let params = {url: decodeURIComponent(location.href.split('#')[0])}this.axios.getShareSdk(params).then((response) =>{// wx.config(response.data); // 如果后端返回数据格式符号,可直接传入数据,不用单独赋值wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。appId: response.appId, // 必填,公众号的唯一标识timestamp: response.timestamp, // 必填,生成签名的时间戳nonceStr: response.nonceStr, // 必填,生成签名的随机串signature: response.signature,// 必填,签名,见附录1jsApiList: ['wx-open-launch-weapp'], // 必填,需要使用的JS接口列表,所有JS接口列表见附录2openTagList: ['wx-open-launch-weapp'], //可选,需要使用的开放标签列表,例如['wx-open-launch-app']});/*** 通过ready接口处理成功验证* config信息验证成功后会执行ready方法* 需在用户可能点击分享按钮前就先调用*/wx.ready(function() {// config验证后会执行ready方法,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中// 比如: 分享好友、朋友圈时则在些方法中调用相关的api。let shareData = {title: '我发现一个不错商品~',desc: '好商品值得分享~',link: '分享url',imgUrl: '分享图片',};if(wx.onMenuShareAppMessage){ //微信文档中提到这两个接口即将弃用,故判断wx.onMenuShareAppMessage(shareData);//1.0 分享到朋友wx.onMenuShareTimeline(shareData);//1.0分享到朋友圈}else{wx.updateAppMessageShareData(shareData);//1.4 分享到朋友wx.updateTimelineShareData(shareData);//1.4分享到朋友圈}});wx.error(res =>{//通过error接口处理失败验证// config信息验证失败会执行error函数console.log(res);});})
},
4. 调用方法
mounted() {// 获取配置信息this.getOpenLaunchWeapp();
},methods: {/*** 用户点击跳转按钮触发成功*/handleLaunchFn(e){console.log('success');},/*** 用户点击跳转按钮出现错误*/handleErrorFn(e){console.log('fail', e.detail);}
}
解决VUE中警告
如图浏览器会提示相关警告
- 使用
开放标签
时,出现如图警告! 在main.js
中加入此代码即可。
Vue.config.ignoredElements = ['wx-open-launch-weapp']
注意:
更多请看文档中
使用说明
微信版本要求
- 7.0.12及以上。
系统版本
要求为:iOS
10.3及以上、Android
5.0及以上。
浏览器无法直接查看效果
- 在浏览器中无法直接查看展示的按钮,可在真机上调试
h5网页跳转微信小程序相关推荐
- 关于微信小程序跳转到H5,然后从H5又跳回微信小程序问题的资料
关于微信小程序跳转到H5,然后从H5又跳回微信小程序问题的资料 直接上答案 // javascript import wx from 'weixin-jsapi';// 判断h5页面是否是运行在小程序 ...
- h5页面跳转微信小程序页面
// 判断环境是否在微信小程序里 function isMiniProgram(){var ua = navigator.userAgent.toLowerCase();var envType='#' ...
- 关于微信公众号的h5页面跳转微信小程序的详细介绍
简介 关于微信公众号跳转小程序的功能,我也是研究了一整天才弄好的,主要是微信官方文档写的不清楚,百度上的各种文章也各说各的,不过最后还是要相信官网文档,接下来我会一步一步分析,希望对你有帮助,并且最后 ...
- vue H5页面跳转微信小程序以及生成二维码跳转小程序
研究了两种H5跳转小程序的方法,同时携带参数 1. 手机浏览器打开H5页面,点击按钮拉起微信小程序 2. H5页面上生成小程序二维码,手机微信扫码跳转目标小程序 为了开发方便,以上两种均借助了微信小程 ...
- h5页面跳转微信小程序。
一.先说页面表现,页面上有几点需要注意: 1.标签写的时候,button按钮 一定要包在template标签里面.没有用vue的话,可以直接用<template>去包,如果是vue2用 & ...
- 【微信小程序】关于H5跳转微信小程序、微信小程序跳转H5、微信小程序跳转微信小程序的实现方法
0 说明 业务提出需求,要实现H5跳转微信小程序的需求,在浏览器.微信环境下,都能通过H5跳转进入小程序. 另外,本文也将微信小程序跳转到H5,以及微信小程序跳转到微信小程序的方法进行汇总. 对于,微 ...
- h5跳转微信小程序方案及注意事项(vue方向)
h5跳转微信小程序方案步骤 1.准备 2.绑定域名 (在[微信公众平台](https://mp.weixin.qq.com/)设置) 3.IP白名单(在[微信公众平台](https://mp.weix ...
- vue3引入JS-SDK实现h5分享小卡片、跳转微信小程序功能
微信js-sdk官方文档: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html 一.实现h5分享小卡片 想 ...
- H5静态页面跳转微信小程序;从外部浏览器,点击H5链接跳转打开微信小程序;以及在微信内直接点击H5链接打开微信小程序;
参考链接 需求:从外部浏览器,点击H5链接跳转打开微信小程序:以及在微信内直接点击H5链接打开微信小程序: 步骤1: 小程序开发需要使用云开发创建项目,使用云开发生成的项目会自带云函数文件夹: 步骤2 ...
最新文章
- 好品山东谋定产业扶贫-农业大健康·万祥军:乡村振兴行动
- 芒果正式版7.1sdk和siverligt Toolkit for 芒果
- VTK修炼之道24:图像基本操作_单颜色通道图像合成彩色
- aspnetpager的使用(完美篇)
- 书籍推荐(2016-2020)--统计数学计算机为主,心理学为辅
- django框架学习文档_Python四大主流网络编程框架,你知道么?
- linux怎么安装ros系统,ubuntu14.04安装ROS indigo的详细图解步骤
- 编程语言对比 容器
- 解决vue的所有相关问题集合
- 小米手机第三方卡刷软件_小米note可以用第三方recovery刷官方卡刷包吗
- php中控车牌识别push协议,2、实时车牌识别上传及返回
- VTK:交互与Widget——观察者/命令模式
- android webview 设置下载文件,Android WebView使用之文件下载
- 小白交易第一站—50EX云合约交易平台
- 20140925百度校园招聘二面
- C. Divan and bitwise operations
- 秒杀竞拍屡创网络神话:馅饼还是美丽陷阱
- Markdownpad2报错: Html Rendering Error (An error occurred with the Html rendering component.)
- java实验2总结心得,打字小游戏JAVA实验总结及心得体会
- jquery开关灯案例_jQuery实现开关灯效果