公众号html5页面代码,微信公众号网页H5跳转微信小程序
2020年7月微信开放了H5跳转小程序的实现(基于微信JSDK和开放标签)。微信官方文档 仅有 js 示例,工作中用的是vue,特此记录备忘。
微信开放标签是微信公众平台面向网页开发者提供的扩展标签集合。通过使用微信开放标签,网页开发者可安全便捷地使用微信或系统的能力,为微信用户提供更优质的网页体验。
此文档面向网页开发者,介绍微信开放标签如何使用及相关注意事项。需要注意的是,微信开放标签有最低的微信版本要求,以及最低的系统版本要求。
微信版本要求为:7.0.12及以上。 系统版本要求为:iOS 10.3及以上、Android 5.0及以上。
代码示例
示例备注:
基于vue、vant实现
请求后端api 获取 JSDK授权信息需要根据自身情况做修改,字段如下:
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名
jsApiList: [], // 必填,需要使用的JS接口列表
openTagList: [] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app']
})
对于path属性,所声明的页面路径必须添加.html后缀,如pages/home/index.html。
开放标签成功时才能看到button,仅真机测试有效。微信开发者工具无法展示button,且console提示错误[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
this is a demo
id="launch-btn"
:username="username"
:path="path"
@launch="handleLaunchFn"
@error="handleErrorFn"
>
.ant-btn {
line-height: 1.499;
position: relative;
display: inline-block;
font-weight: 400;
white-space: nowrap;
text-align: center;
background-image: none;
border: 1px solid #d9d9d9;
-webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.015);
box-shadow: 0 2px 0 rgba(0,0,0,0.015);
cursor: pointer;
-webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
transition: all .3s cubic-bezier(.645, .045, .355, 1);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: manipulation;
touch-action: manipulation;
height: 32px;
padding: 0 15px;
font-size: 14px;
border-radius: 4px;
color: rgba(0,0,0,0.65);
background-color: #fff;
}
.ant-btn-red {
color: #fff;
background-color: #FF5A44;
border-color: #FF5A44;
text-shadow: 0 -1px 0 rgba(0,0,0,0.12);
-webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.045);
box-shadow: 0 2px 0 rgba(0,0,0,0.045);
}
{{ btnText }}
import wx from 'weixin-js-sdk' // 引入weixin JSDK
import {Toast, Dialog, Notify} from 'vant'
// api 接口从后端获取微信jsdk授权信息
import { getWechatJsConfig } from '../../../api/wechat'
export default{
data () {
return {
username: 'gh_xxxxxxxx', // gh_ 开头的原始小程序ID
path: 'pages/index/index.html', // 一定要以 .html 结尾
btnText: "我的小程序"
}
},
methods: {
ToMiniapp() {
getWechatJsConfig({api: 'getLocation', 'url': window.location.href }).then(res => {
res['openTagList'] = ['wx-open-launch-weapp'] // 微信小程序标签名加入 openTagList
console.log(res)
wx.config(res);
})
},
handleLaunchFn (e) {
console.log(e)
},
handleErrorFn(e){
console.log('fail', e.detail);
}
},
mounted() {
this.ToMiniapp()
}
}
参考资料
公众号html5页面代码,微信公众号网页H5跳转微信小程序相关推荐
- alert点击确定后跳转_公众号/h5 跳转到小程序填坑指南
公众号/h5 跳转到小程序填坑指南 本文介绍的是使用微信开放标签 wx-open-launch-weapp 实现微信浏览器内网页跳转到任意合法合规的小程序里,官方要求微信版本为:7.0.12 及以上, ...
- h5跳转小程序页面url_web-view h5跳转到小程序页面,无法跳转?
web-view h5跳转到小程序页面,无法跳转?web-view h5 jumps to the applet page, can't jump?web-view h5跳转到小程序页面,无法跳转? ...
- h5跳转到小程序总是出现页面不存在-微信小程序开发
官方文档看了一下很简单: <wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxx" pat ...
- 微信公众号网页H5跳转微信小程序
https://www.jianshu.com/p/5bc4589dd034 wx.config({debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要 ...
- html跳转微信app,微信开放标签:微信网页H5跳转微信小程序、APP
开放标签使用: id="launch-btn" username="gh_xxxxxxxx" path="/a/b/c.html?d=1&e= ...
- 微信扫描二维码跳转到小程序配置 获取二维码内容
小程序开发 -> 开发管理 -> 开发设置 -> 扫普通链接二维码打开小程序 添加跳转规则,可配置项如下图 协议类型和选择大小写没啥好说的,前缀占用规则选择占用重点讲以下几条 二维码 ...
- 【微信小程序】关于H5跳转微信小程序、微信小程序跳转H5、微信小程序跳转微信小程序的实现方法
0 说明 业务提出需求,要实现H5跳转微信小程序的需求,在浏览器.微信环境下,都能通过H5跳转进入小程序. 另外,本文也将微信小程序跳转到H5,以及微信小程序跳转到微信小程序的方法进行汇总. 对于,微 ...
- 小程序通过web-view访问的vue页面中点击无法跳转到小程序相关问题
问题描述: 点击小程序中的一个按钮或者一个banner图片,通过小程序web-view组件到进入一个vue的页面中,在该vue页面中点击图片无法按照要求回到指定的小程序中,点击操作没有任何反应. 解决 ...
- 【无标题】h5跳转微信公众号关注页面
h5跳转微信公众号关注页面 最近在做h5项目,有个需求是如果用户没有关注公众号,需要引导用户跳转至微信公众号关注页面 制作一个链接,点击该链接跳转到公众号关注页面. [方法一] 1.从公众平台登进入公 ...
- 微信公众号自定义菜单直接跳转到小程序指定页面
首页我们要先拿到需要的小程序的页面地址:(如何拿到小程序页面地址自行百度) 然后登录公众号后台,添加自定义菜单: 菜单的路径选择"跳转小程序" ,从绑定的小程序中选择要跳转的小程序 ...
最新文章
- MYSQL忘记登录密码
- 阻塞队列BlockingQueue用法
- 记一次引入Elasticsearch的系统架构实战
- ABAP 数值四舍五入函数
- 揭开伟大架构师的秘密
- MySQL filesort优化案例一则
- CP2102 USB to UART Bridge Controller 驱动安装(windows or Ubuntu)
- 实对称矩阵的几个性质
- nyoj 1275-导弹发射 //lis
- 深圳中学老师工资单曝光,秒杀程序员,网友:酸了酸了
- 用 JS 原生方法实现 jQuery 的 append, prepend, before, after
- EVPN中ESI与EVI的区别
- 趣玩网 爬虫开发笔记
- 解决Tuxera试用过期重装问题
- 汇编语言第七章循环程序
- 关于驰骋工作流引擎,表单引擎对苏州公司企业 问题清单的答复
- STM32_基础入门_程序下载的两种方式
- EasyPoi实现excel文件导入导出
- 显控触摸屏与变频器通信程序
- 情人节你应该会用到 【表白 告白】
热门文章
- 雷电模拟器android文件夹在哪,雷电安卓模拟器共享文件怎么用?电脑文件与模拟器互通图文教程...
- 英尺英寸和厘米的换算_C语言中关于英尺、英寸、厘米的换算
- 聊一聊在Airtest自动化中如何清除iOS后台应用
- 连接服务器切换无线,怎么用路由器连接别人的wifi?
- 计算机桌面不同步,电脑时间不同步怎么回事 电脑时间不能自动更新如何修复...
- COMPASS数据上报总结
- 4个平面设计小技巧:让视觉主题更突出——黎乙丙
- 查询中接受的主体参数
- python读取excel合并单元_python 读写excel (合并单元格)
- 艾宾浩斯记忆曲线背单词