注意事项
1. 版本需求
- 微信开放标签有最低的微信版本要求，以及最低的系统版本要求。
- 微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上。
2. 绑定域名
- 微信安全域名只能修改绑定3次/每月
- 登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
3. 引入JS文件
- 在需要调用JS接口的页面引入如下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）
必须是jweixin-1.6.0.js版本:
引入方式:
- 可以安装weixin-js-sdk的npm包:
https://www.npmjs.com/package/weixin-js-sdk - 也可以在vue模板文件里写一个script标签引入
- 也可以import项目本地的js文件
- 甚至可以操作动态创建script标签然后src设置成jssdk文件的地址append到页面里
不管怎么都行,但是要
注意别和旧版本的jssdk混用,会导致你支持小程序操作的新版本jssdk不生效.
通过config接口注入权限验证配置
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名
jsApiList: ['closeWindow'], // 必填，需要使用的JS接口列表 如果只是为了跳转小程序，随便填个值都行
openTagList: [
'wx-open-launch-weapp',//指H5跳转小程序
], // 可选，需要使用的开放标签列表，例如['wx-open-launch-app'] : wx-open-launch-weapp 指H5跳转小程序;wx-open-launch-app 指H5跳转app
});
wx.ready(function() {
//config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
});
wx.error(function(res) {
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});
wx-open-launch-weapp开放标签
属性
- username :所需跳转的小程序原始id，即小程序对应的以gh_开头的id
- path : 所需跳转的小程序内页面路径及参数
备注：对于path属性，所声明的页面路径必须添加.html后缀，如pages/home/index.html。
使用说明
- 所有开放标签都能像普通的HTML标签一样在页面中直接使用，不需要再进行额外的处理。
- 如果所使用的标签允许提供插槽，由于插槽中模版的样式是和页面隔离的，因此需要注意在插槽中定义模版的样式。插槽模版及样式均需要通过
<template></template>进行包裹。对于Vue等视图框架，为了避免template标签冲突的问题，可使用<script type="text/wxtag-template"><script>进行代替，来包裹插槽模版和样式。另外，对于具名插槽还需要通过slot属性声明插槽名称，下文标签插槽中的default插槽为默认插槽，可不声明插槽名称。 - 对于标签事件，均可通过event.detail获得详细信息。如果无特殊说明，下文标签事件说明中的返回值均指代event.detail中的内容。
开放标签使用(vue项目)
<wx-open-launch-weapp
v-if="wechatState"
id="launch-btn"
username="gh_xxxxxxxxxxx"
path="pages/home/index.html"
@error="handleErrorFn"
@launch="handleLaunchFn"
style="width: 100%;display: block;"
>
<script type="text/wxtag-template">
<style>
.btn {
background: #5bc9a4;
-webkit-box-shadow: 0 3px 10px 0 rgba(91,201,164,.4);
box-shadow: 0 3px 10px 0 rgba(91,201,164,.4);
border-radius: 23px;
text-align: center;
color: #fff;
font-family: PingFangSC-Medium,PingFang SC;
font-weight: 500;
margin: 12px auto;
width: 100%;
height:49px;
line-height: 49px;
font-size: 20px;
}
</style>
<div class="btn">跳转小程序</div>
</script>
</wx-open-launch-weapp>
<div v-else class="signin_btn">跳转小程序</div>
handleErrorFn(e){
console.log('fail', e.detail);
}
handleLaunchFn(e){
console.log('success');
}
//获取微信版本号
export function wechatVersion() {
let ua = navigator.userAgent;
let version = ua.match( /MicroMessenger\/([\d.]+)/ )[ 1 ]
return version
}
// 版本号
//v1 需要比较的版本号 v1 : 7.0.12及以上
//v2 当前版本号 v2 : >= 7.0.12 v1 < v2
// -1 表示满足情况
export function compareVersion( v1, v2 ) {
v1 = v1.split( '.' )
v2 = v2.split( '.' )
const len = Math.max( v1.length, v2.length )
while ( v1.length < len ) {
v1.push( '0' )
}
while ( v2.length < len ) {
v2.push( '0' )
}
for ( let i = 0; i < len; i++ ) {
const num1 = parseInt( v1[ i ] )
const num2 = parseInt( v2[ i ] )
if ( num1 > num2 ) {
return 1
} else if ( num1 < num2 ) {
return -1
}
}
return 0
}
//手机端判断各个平台浏览器及操作系统平台
export function checkPlatform() {
var ua = navigator.userAgent.toLowerCase();
if ( /android/i.test( navigator.userAgent ) ) {
var test = /android\s([\w.]+)/;//IE
var match = test.exec( ua );
// console.log( "This is Android " + match[ 1 ] + " browser." ); //这是Android平台下浏览器
var version = match[ 1 ].split( "." )[ 0 ];
let cha = compareVersion( '5.0', version )
if ( cha == -1 ) {
return [ true, '可以正常使用该功能', 'Android系统' ];
} else {
return [ false, '您的Android系统版本低于5.0,暂不可用此功能!', 'Android系统' ];
}
}
if ( /(iPhone|iPad|iPod|iOS)/i.test( navigator.userAgent ) ) {
var test = /os\s([\w_]+)/;//IE
var match = test.exec( ua );
var version = match[ 1 ].split( "_" )[ 0 ];
// console.log( "This is iOS " + version + " browser." ); //这是iOS平台下浏览器
let cha = compareVersion( '10.3', version )
if ( cha == -1 ) {
return [ true, '可以正常使用该功能', 'IOS系统' ];
} else {
return [ false, '您的IOS系统版本低于10.3,暂不可用此功能!', 'IOS系统' ];
}
}
}
configLaunchWeapp(){
let self = this;
let wechatVersion = self.$comfunc.wechatVersion();
let cha = self.$comfunc.compareVersion('7.0.12',wechatVersion)
let checkMobileVersion = self.$comfunc.checkPlatform();
console.log(cha == -1 && checkMobileVersion[0]);
//微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上。
if(cha == -1 && checkMobileVersion[0]){
wx.config({})
}
}
//去打卡 不满足版本系统要求 / 授权失败
wechatStateFail(){
//微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上。
let self = this;
let wechatVersion = self.$comfunc.wechatVersion();
let cha = self.$comfunc.compareVersion('7.0.12',wechatVersion)
let checkMobileVersion = self.$comfunc.checkPlatform();
if(cha != -1){
alert('微信版本过低,请升级微信版本进行打卡~')
return
}else if(!checkMobileVersion[0]){
alert(checkMobileVersion[1])
return
}else if(!this.wechatState){
alert('授权失败,暂不可打卡,可关闭页面重新打开试试哦~')
return
}
}
判断是从微信进入还是企业微信进入
<script>
var ua= window.navigator.userAgent.toLowerCase();
if( (ua.match(/MicroMessenger/i) == 'micromessenger') && (ua.match(/wxwork/i) == 'wxwork') ){
alert("企业微信客户端");
}else if( ua.match(/micromessenger/i) == 'micromessenger' ){
alert("微信客户端");
}
</script>
wx-open-launch-weapp开发中的一些问题
wx-open-launch-weapp 可跳转体验版吗
不可.所以开发中要用到一套test环境的小程序
此功能的开放对象：
- 已认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。
- 已认证的非个人主体的小程序，使用小程序云开发的静态网站托管绑定的域名下的网页，可以使用此标签跳转任意合法合规的小程序。
动态设置username和path
<wx-open-launch-weapp
v-if="wechatState"
id="launch-btn"
:username="appGhId"
:path="appPage"
@error="handleErrorFn"
@launch="handleLaunchFn"
style="width: 100%;display: block;"
>
wx-open-launch-weapp在ios下正常跳转,但是安卓手机跳转之后白屏.
原因是因为配置出现了问题
正确:appPage: "pages/home/index.html"
错误: appPage: " pages/home/index.html"(链接前带了空格,导致安卓手机进入定
位不到页面)
