公众号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.从公众平台登进入公 ...
- 微信公众号自定义菜单直接跳转到小程序指定页面
首页我们要先拿到需要的小程序的页面地址:(如何拿到小程序页面地址自行百度) 然后登录公众号后台,添加自定义菜单: 菜单的路径选择"跳转小程序" ,从绑定的小程序中选择要跳转的小程序 ...
最新文章
- linux shell数组动态在for中追加元素及其遍历
- Interlocked.CompareExchange
- java 数组下标6,这里为什么用equals会错,改==就不会?java入门第一集6.8获取数组下标课后练习...
- 算法高级(28)-递归、分治、动态规划、贪心、回溯、分支限界几大相似算法比较
- 数据库---基础知识
- 怎样用sql语句复制表table1到表table2的同时复制主键
- 如何找到稳定的网站空间
- 微警务:网上公安服务一键开启
- 移动端 Retina屏 各大主流网站1px的解决方案
- 计算机桌面无法解锁,win10锁屏后解锁却无法进入桌面怎么办?解决方案
- 基于PLC的智能化远程养殖监控系统
- html页面涂鸦,HTML5 | Canvas画笔小应用(涂鸦板)
- PCIe扫盲系列博文连载目录
- PHP-课程设计-LOL英雄资料网站
- 区块链到底能干什么?
- 基于收敛加密的文件所有权证明协议——毛峥
- 莆田鞋,是炒鞋经济的噩梦吗?
- WIN10系统安装金蝶K3 WISE12.2客户端版本
- python 解析pb文件_Tensorflow:从图形文件(.pb文件)中获取预测
- 劈尖干涉公式_劈尖干涉条纹数的计算