精华内容
下载资源
问答
  • UNI-APP/VUE 项目集成 微信开放标签 教程和避坑指南 文章同步发布于????前端知识营地,移动端用户可通过????‍????手机端查看以获得更佳的阅读体验和排版效果 手机端访问地址:UNI-APP/VUE 项目集成 微信开放标签 ...

    UNI-APP/VUE 项目集成 微信开放标签 教程和避坑指南

    文章同步发布于🚀前端知识营地,移动端用户可通过🐱‍🏍手机端查看以获得更佳的阅读体验和排版效果

    前言

    上一篇文章里详细介绍了UNI-APP/VUE项目如何集成微信的SDK,如果有需要在UNI-APP集成微信SDK的朋友,可以点击下方链接访问。

    使用微信开放标签的前提条件

    由于微信各方面要求严格,因此在开发前需要自检自己是否具备集成微信SDK/微信开放标签的先决条件。根据本人的开发经历,在开发集成之前需要具备的先行条件如下:

    1. 拥有自己的服务器

    主要是用于安全认证和绑定JS接口安全域名

    1. 已经完成认证的微信服务号,以便使用开放标签

    如果仅集成SDK,根据官方文档说明,好像微信公众号也可以,具体是否可行,有待读者验证

    1. 良好的心态

    嗯!微信的文档你懂的,以及微信各种出于安全的限制让开发调试异常麻烦,因此一个良好的心态异常重要

    1. 满足微信官方的配置要求

    微信开放标签有最低的微信版本要求,以及最低的系统版本要求。
    微信版本要求为:7.0.12及以上。 系统版本要求为:iOS 10.3及以上、Android 5.0及以上。

    • 以上条件若有不满足的,请出门右拐

    如何使用微信的开放标签

    结合微信开发文档的说明和使用案列,根据提示在VUE项目中使用微信开放标签应当避免<template>标签冲突,需要使用<script type="text/wxtag-template"></script>【这里注意下,官方文档里<script>标签没有闭合,需要改正】进行代替。也就是在VUE项目中微信开放标签的使用案列如下:

    <wx-open-launch-weapp
      id="launch-btn"
      username="gh_xxxxxxxx"
      path="pages/home/index.html?user=123&action=abc"
    >
      <script type="text/wxtag-template">
        <style>.btn { padding: 12px }</style>
        <button class="btn">打开小程序</button>
      </script>
    </wx-open-launch-weapp>
    
    • 相关说明
    参数说明
    username小程序原始id,即gh_xx格式。而非小程序appid,注意区分
    path指定跳转到小程序具体页面的页面路径,必须以.html结尾 。不指定则跳转到小程序主页,初次指定建议不要填写,先保证开放标签接入成功

    VUE页面中使用开放标签案列

    <template>
      <view>
    	  <wx-open-launch-weapp
    		id="launch-btn"
    		username="gh_your_gh_id"
    		path=""
    	 >
    		<script type="text/wxtag-template">
    			<style>.btn { padding: 12px }</style>
    			<u-button type="primary">主要按钮</u-button>
    		</script>
    	</wx-open-launch-weapp> 
    	<view>
    	   页面中的其它内容
    	</view>
      </view>
      
    </template>
    
    • 注意事项
    1. 使用开放标签确保当前页面已经完成微信SDK集成。

    微信SDK集成参考UNI-APP/VUE 项目集成微信SDK教程和避坑指南

    1. 配置微信config文件时确保明确指定了将要使用的微信开放标签。如下方openTagList:['wx-open-launch-weapp'],指定将使用跳转到小程序的开放标签。
    //注入config权限配置  
        let wxConf = {
          debug: false,
          openTagList:['wx-open-launch-weapp'],  //将要使用的微信开放标签
          appId:"your_appid",
          timestamp,
          nonceStr,
          signature:res,
          jsApiList: [ //这里是需要用到的接口名称  
            'checkJsApi', //判断当前客户端版本是否支持指定JS接口  
            'updateAppMessageShareData', //分享给朋友及分享到QQ
            'updateTimelineShareData', //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
            'onMenuShareTimeline', // 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口(即将废弃)
            'onMenuShareAppMessage', // 获取“分享给朋友”按钮点击状态及自定义分享内容接口(即将废弃)
            'onMenuShareQQ', // 获取“分享到QQ”按钮点击状态及自定义分享内容接口(即将废弃)
            'onMenuShareQZone', // 获取“分享到QQ空间”按钮点击状态及自定义分享内容接口(即将废弃)
            'getLocation', //获取位置  
            'openLocation', //打开位置  
            'scanQRCode', //扫一扫接口  
            'chooseWXPay', //微信支付  
            'chooseImage', //拍照或从手机相册中选图接口  
            'previewImage', //预览图片接口  
            'uploadImage' //上传图片  
          ]
        };
    
    1. 请忽略控制台打印的Unknown custom element:<wx-open-launch-weapp>错误
      这个坑需要注意:如果通过控制台发现如下错误,请直接忽略。不要去百度解决办法什么的。
      在这里插入图片描述

    2. 必须真机调试才能看到效果

    这个必须引起重视!!!必须真机调试才能看到效果。
    也就是你必须将你的项目打包部署到设置了JS安全接口域名的服务器上,然后通过手机端访问,然后才能在手机上看到一个丑丑的打开小程序 的按钮。原谅我此处忘记截图了。

    可能出错的点

    如果按照上述配置未能成功出现打开小程序按钮,那么可能时如下几个地方有问题,请开发者自查。

    1. 是否已经成功集成了微信SDK

    若成功接入微信SDK,控制台会有明显的提醒

    1. 是否在微信config配置中声明了将要使用的开放标签。
    2. 是否已经将项目打包部署到设置JS安全接口域名的服务器。

    若是步骤3出现问题,则在微信开发者工具控制台会报40048错误

    1. 微信版本或者手机系统版本是否满足要求

    根据前文前提条件自查

    1. 如果还有其它问题,欢迎留言讨论。

    (正文完)

    最近一直在作微信公众号的开发,自己也申请了一个公众号,刚开始弄,主要是分享作者从各个平台收集的前端优质文章,优质教程和工具; 以知识小报的形式周更,避免打扰! 有感兴趣的同好可以扫码关注下
    🚀查看前端知识营地介绍
    在这里插入图片描述

    展开全文
  • 适用于微信开放标签签名算法wx-open-launch-weapp
  • 微信开放标签是微信公众平台面向网页开发者提供的扩展标签集合。通过使用微信开放标签,网页开发者可安全便捷地使用微信或系统的能力,为微信用户提供更优质的网页体验。此文档面向网页开发者,介绍微信开放标签如何...
    微信开放标签是微信公众平台面向网页开发者提供的扩展标签集合。通过使用微信开放标签,网页开发者可安全便捷地使用微信或系统的能力,为微信用户提供更优质的网页体验。此文档面向网页开发者,介绍微信开放标签如何使用及相关注意事项。需要注意的是,微信开放标签有最低的微信版本要求,以及最低的系统版本要求。微信版本要求为:7.0.12及以上。系统版本要求为:iOS 10.3及以上、Android 5.0及以上。

    开放标签使用步骤

    步骤一:绑定域名

    登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

    991eb64c741e84697281839cee8ded75.png

    步骤二:引入JS文件

    项目已使用旧SDK,使用此SDK需要升级分享方法。

    在需要调用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)

    备注:支持使用 AMD/CMD 标准模块加载方法加载。

    步骤三:通过config接口注入权限验证配置并申请所需开放标签

    与使用JS-SDK配置方式相同,所有需要使用开放标签的页面必须先注入配置信息,并通过openTagList字段申请所需要的开放标签,否则将无法使用(同一个url仅需调用一次)。开放标签的申请和JS接口的申请相互独立,因此是可以同时申请的。

    wx.config({  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印  appId: '', // 必填,公众号的唯一标识  timestamp: , // 必填,生成签名的时间戳  nonceStr: '', // 必填,生成签名的随机串  signature: '',// 必填,签名  jsApiList: ['updateAppMessageShareData'], // 必填,需要使用的JS接口列表,随便填  openTagList: ['wx-open-launch-app'] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app']});

    如何生成签名:https://www.cnblogs.com/willian/p/4254963.html#3117089

    使用说明

    所有开放标签都能像普通的HTML标签一样在页面中直接使用,不需要再进行额外的处理。

    如果所使用的标签允许提供插槽,由于插槽中模版的样式是和页面隔离的,因此需要注意在插槽中定义模版的样式。插槽模版及样式均需要通过进行包裹。对于Vue等视图框架,为了避免template标签冲突的问题,可使用

    展开全文
  • UNI-APP/VUE 项目集成微信SDK教程和...本项目是基于已经认证的微信服务号(是服务号不是微信公众号/订阅号)进行开发,根据官方文档微信公众号也是可以集成SDK的,但是微信开放标签,目前主要是跳转到小程序和跳转到APP

    UNI-APP/VUE 项目集成微信SDK教程和避坑指南

    文章同步发布于🚀前端知识营地,移动端用户可通过🐱‍🏍手机端查看以获得更佳的阅读体验和排版效果

    前言

    • 本文主要介绍在UNI-APP项目中集成 微信SDK / 微信开放标签 。由于UNI-APP是对Vue 的二次封装,因此本教程也适用与Vue项目。
    • 本项目是基于已经认证的微信服务号(是服务号不是微信公众号/订阅号)进行开发,根据官方文档微信公众号也是可以集成SDK的,但是微信开放标签,目前主要是跳转到小程序跳转到APP 都是需要已经认证的服务号才可调用,由于跳转到APP需要前往微信开放平台的管理中心-公众账号或小程序详情-接口信息-网页跳转移动应用-关联设置中绑定所需要跳转的App。本文暂未具备条件,下文仅说明说和适用开放标签跳转到微信小程序。具体细节还请参考微信官方的开发文档🚀微信公众号网页开发文档

    先行条件

    由于微信各方面要求严格,因此在开发前需要自检自己是否具备集成微信SDK/微信开放标签的先决条件。根据本人的开发经历,在开发集成之前需要具备的先行条件如下:

    1. 拥有自己的服务器

    主要是用于安全认证和绑定JS接口安全域名

    1. 已经完成认证的微信服务号,以便使用开放标签

    如果仅集成SDK,根据官方文档说明,好像微信公众号也可以,具体是否可行,有待读者验证

    1. 良好的心态

    嗯!微信的文档你懂的,以及微信各种出于安全的限制让开发调试异常麻烦,因此一个良好的心态异常重要

    1. 满足微信官方的配置要求

    微信开放标签有最低的微信版本要求,以及最低的系统版本要求。
    微信版本要求为:7.0.12及以上。 系统版本要求为:iOS 10.3及以上、Android 5.0及以上。

    • 以上条件若有不满足的,请出门右拐

    集成微信SDK

    使用微信开放标签之前需要先完成SDK集成,因此,本文先介绍如何集成微信SDK

    • 重要提示: 请不要上来就开始写代码,请一定按照步骤一步一步完成相关配置。
    步骤一:绑定JS接口安全域名

    这一部操作比较简单,跟着截图操作即可

    1. 进入公众号,通过左侧设置按钮,进入公众号设置或者点击公众号昵称,在弹出菜单中点击进入功能设置。
      在这里插入图片描述在这里插入图片描述
    2. 找到JS接口安全域名,点击右侧设置进入配置
      在这里插入图片描述
    3. 按照要求填写安全域名地址,填写好域名之后,请下载验证文件MP_verify_********并将其上传到对应服务器的根目录。
      后文获取签名时传递的url必须在此域名下

    在这里插入图片描述

    步骤二:引入微信SDK对应的JS文件

    官方介绍如下:

    • 在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.6.0.js
    • 如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:http://res2.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)。
    • 备注:支持使用 AMD/CMD 标准模块加载方法加载

    如果你根据官方介绍不知道怎么操作,或者引入后结果不正确,请继续查阅本文介绍:

    在 Vue 项目下引入微信SDK有如下几种方法:

    1. 访问http://res.wx.qq.com/open/js/jweixin-1.6.0.js 直接间代码拷贝到本地,然后在使用的页面中引入。
    2. 使用npm安装jweixin-modulejweixin-module其实就是将微信SDK的源代码发布到了npm上,因此这种方式和方法1是一样的。
    3. 在页面中创建script标签,通过script引入。

    方法3,需要操作DOM并创建script元素,这里不推荐,方法2和方法1原理和效果相同,这里就以方法2介绍,如何引入微信SDK,毕竟同一个世界,同一个NPM!

    1. 安装jweixin-module
    	npm install jweixin-module --save  
    
    1. 在项目合适的位置创建wx-js-sdk.js文件,通常将此类文件放到utils文件夹下。
    		// 引入 jweixin-module
    		const jweixin = require('jweixin-module')// 通过export 暴露常用的方法
    		export default {
     			 //判断是否在微信中    
    		   isWechat: function () {
    			  var ua = window.navigator.userAgent.toLowerCase();
    			    if (ua.match(/micromessenger/i) == 'micromessenger') {
    			      //console.log('是微信客户端')  
    			      return true;
    			    } else {
    			      //console.log('不是微信客户端')  
    			      return false;
    			    }
    			},
    
    			// 初始化WXSDK
    		  initJssdk: async function (callback) {
    		     /* ****************************************
    		      * 获取当前url然后传递给后台获取授权和签名信息
    		      # TODO: 后台返回签名
    		      *************************************** */  
    		    // let uri = encodeURIComponent(window.location.href.split('#')[0]);
    		    let uri = window.location.href.split('#')[0];
    		
    		    //返回需要的参数appId,timestamp,noncestr,signature等  
    		    let timestamp = parseInt(new Date().getTime() / 1000) + '';
    		    let nonceStr = Math.random().toString(36).substr(2, 15);
    
    			// 获取后台返回的签名
    			// 这里需要换成开发者自己的接口。
    			// 此处我对uni.request进行了封装,
    			// 直接采用uni.request方法然后在成功的回调里面完成SDK初始化也是可行的,根据实际情况处理
    		    let res = await GetSignature(nonceStr,timestamp,uri);  
    		    
       			 //注入config权限配置  
    		    let wxConf = {
    		      debug: false,  // 是否开启调试,第一次尝试,建议开启,后续可关闭
    		      openTagList:['wx-open-launch-weapp'],  //使用的开放标签列表,目前就两,本项目只用到跳转到小程序
    		      appId:"your_appid",  // 公众号或者服务号的appid,自行前往服务号管理后台查看
    		      timestamp,  // 上文计算的时间戳
    		      nonceStr,    // 随机字符串,注意是小驼峰式写法
    		      signature:res,  // 回台返回的签名
    		      jsApiList: [ //这里是需要用到的接口名称  
    		        'checkJsApi', //判断当前客户端版本是否支持指定JS接口  
    		        'onMenuShareAppMessage', //分享接口  
    		        'getLocation', //获取位置  
    		        'openLocation', //打开位置  
    		        'scanQRCode', //扫一扫接口  
    		        'chooseWXPay', //微信支付  
    		        'chooseImage', //拍照或从手机相册中选图接口  
    		        'previewImage', //预览图片接口  
    		        'uploadImage' //上传图片  
    		      ]
    		    };
    		    jweixin.config(wxConf);   //完成微信配置
    		  },
    		  
    		  /* ***************************************
    		   *
    		   *   微信SDK功能实例:调用微信扫码
    		   *  若没有初始化需要先调用initJssdk完成初始化
    		   *  若当前页面已经完成initJssdk初始化,调用扫码功能是可以直接调用 jweixin.scanQRCode
    		   * 
    		   * **************************************/
    		 scanCode:function(callback,needResult=1){
    		    if (!this.isWechat()) {
    		      console.log('不是微信客户端')  
    		      return;
    		    }
    		    this.initJssdk(function (res) {
    		      jweixin.ready(function () {
    		        jweixin.scanQRCode({
    		          needResult: needResult, // 0扫码结果由微信处理, 1是直接返回结果,由开发者处理
    		          scanType: ["qrCode","barCode"],
    		          success: function (rs) {
    		            console.log(rs);
    		            callback(rs)
    		          }
    		        })
    		      });
    		    });
    		  }
    		}
    
    • 扫码部分的代码来源自网络分享,仅供参考,在真实使用的时候同一个URL下SDK只需初始化一次即可,向上面这样的写法,每次调用扫码接口都要进行SDK初始化显然不够友好。
    • 比较好的做法是,在相同的页面中比如mounted生命周期里仅调用initJssdk初始化一次。然后直接使用jweixin.scanQRCode,就像下面这样。具体用法后续再介绍。
    methods:{
    	scan(needResult){
       		jweixin.scanQRCode({
             	  needResult: needResult, // 0扫码结果由微信处理, 1是直接返回结果,由开发者处理
            	  scanType: ["qrCode","barCode"],
            	  success: function (rs) {
             		   console.log(rs);
             		   // 干点啥呗!
             	  }
       	    })
       }
    
    }
    
    步骤三: 在具体页面引入步骤2创建的wx-js-sdk.js文件,并执行initJssdk初始化
    • 全局初始化(uni-app项目): 在APP.vue中执行初始化。

    Vue / UNI-APP 项目也可以直接在main.js中执行初始化

    <script>
    	import wxJsSdk from '@/utils/wx-js-sdk';
    	export default {
    		onLaunch: function() {
    			if(!this.ISWX){ //不是微信环境
    				// 不是微信环境怎么办呢?
    			}
    			else{
    				// 初始化WXSDK
    				wxJsSdk.initJssdk();
    			}
    		},
    		onShow: function() {
    
    		},
    		onHide: function() {
    
    		}
    	}
    </script>
    
    • 页面初始化 :在具体页面中引入并初始化
    <script>
    	import wxJsSdk from '@/utils/wx-js-sdk';
    	export default {
    		mounted() {
    			wxJsSdk.initJssdk();
    		},
    	}
    </script>
    
    步骤四:功能测试
    <script>
    	import wxJsSdk from '@/utils/wx-js-sdk';
    	const jweixin = require('jweixin-module'); // 引入SDK,参考微信官方文档调用各开放接口
    	export default {
    		mounted() {
    			wxJsSdk.initJssdk();
    		},
    		 methods:{
    		 	scan(needResult){
    					jweixin.scanQRCode({
    			      	  needResult: needResult, // 0扫码结果由微信处理, 1是直接返回结果,由开发者处理
    			     	  scanType: ["qrCode","barCode"],
    			     	  success: function (rs) {
    			      		   console.log(rs);
    			      		   // 干点啥呗!
    			      	  }
    				    })
    			}
    
    		}
    	}
    </script>
    
    • 将本地调试地址,粘贴到微信开发者工具/公众号网页调试模式下,访问调试地址如:http://192.168.1.9:8080/wxsdk/,此时控制台打印如下错误在这里插入图片描述
      遇到错误,不要慌!!!,40048错误说明你当前用于获取签名的url不在步骤一所在的安全域名下,这个时候需要将项目打包并部署到步骤一配置的安全域名对应的服务器上,然后再通过控制台访问,此时控制台打印如下信息,同时调用扫码接口也返回了ok。至此说明微信SDK集成成功。通过真机访问,可以拉起微信扫码,并返回扫描结果。
      在这里插入图片描述
    避坑指南

    通过上述步骤,已经完成了在Vue/UNI-APP项目中集成微信SDK,这里有几个常见问题,大家需要注意,如果根据上面的介绍无法实现扫码功能,请查看,是否有下属问题.

    1. 检查获取的当前页面的URL是否正确,本项目通过如下代码获取到当前页面的URL,不含#及其后面部分,注意注释掉的语句,这是不正确的写法,不要被网上的文档误导.

    确认url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认),包括http(s)://部分,以及?后面的GET参数部分,但不包括#hash后面的部分。

     // vue 项目,hash模式
     // let uri = encodeURIComponent(window.location.href.split('#')[0]);
     let uri = window.location.href.split('#')[0];
    
    1. 检查签名是否正确: 这里我的实现方式如下,前端获取随机字符串和时间戳可以参考如下写法.同时前端需将时间戳/随机字符串/当前页面url等传给后端,由后端实现签名算法并返回签名,可通过下方地址检验签名是否正确.

    🚀签名校验地址

    	   let uri = window.location.href.split('#')[0];
    	
    	   //返回需要的参数appId,timestamp,noncestr,signature等  
    	   let timestamp = parseInt(new Date().getTime() / 1000) + '';
    	   let nonceStr = Math.random().toString(36).substr(2, 15);
    	
    		// 获取后台返回的签名
    		// 这里需要换成开发者自己的接口。
    		// 此处我对uni.request进行了封装,
    		// 直接采用uni.request方法然后在成功的回调里面完成SDK初始化也是可行的,根据实际情况处理
    	   let res = await GetSignature(nonceStr,timestamp,uri);  
    
    1. 是否在页面中执行initJssdk初始化,若没有请参考教程在合适的地方进行初始化.
    2. 当前项目是否已经部署到安全域名对应的服务器上,若不是请打包部署.
    3. 微信公众号的appid是否正确

    (未完,微信开放标签的使用请见下一篇文章)


    最近一直在作微信公众号的开发,自己也申请了一个公众号,刚开始弄,主要是分享作者从各个平台收集的前端优质文章,优质教程和工具; 以知识小报的形式周更,避免打扰! 有感兴趣的同好可以扫码关注下
    🚀查看前端知识营地介绍
    在这里插入图片描述

    展开全文
  • 使用微信开放标签 <wx-open-launch-app></wx-open-launch-app>调起分享到微信网页中的app 此开放标签只能在线上显示,本地与测试环境均不显示。 在vue组件中,如果页面引入了 <wx-open-launch-app&...

    使用微信开放标签 <wx-open-launch-app></wx-open-launch-app>调起分享到微信网页中的app

    此开放标签只能在线上显示,本地与测试环境均不显示,且是真机测试。

    在vue组件中,如果页面引入了 <wx-open-launch-app>标签,页面没有显示出来,则需要在main.js中配置代码

    使用开放标签开放平台用例:

    为了避免template标签冲突的问题,在VUE中可使用<script type="text/wxtag-template"><script>进行代替,来包裹插槽模版和样式(如果不代替的话,vue会报错)效果如下,

    其中,样式只能写在该标签内,否则样式无效。

    其中<wx-open-launch-app>标签参数中的appid是移动应用id,不是公众号id

    launch:跳转成功函数

    error:跳转失败函数

     

    展开全文
  • 微信开放标签之Vue项目H5唤醒APP

    千次阅读 2020-09-09 22:51:13
    微信开放标签<wx-open-launch-app>之Vue项目H5唤醒APP 在微信开放标签出来之前,大多数人都是采用 URI Scheme 以及 ios 的universal Link来完成这一需求的,通过URI Scheme/universal Link这种方式,需要在...
  • H5跳转小程序(微信开放标签使用)

    千次阅读 2020-08-31 10:30:02
    微信开放标签使用步骤与微信JS-SDK类似,也需要引入JS文件等步骤。如果是公众号身份的网页,需要绑定安全域名,如果是使用小程序云开发静态网站托管的小程序网页,则不需绑定安全域名即可直接使用(即跳过下面"步骤...
  • 微信开放标签踩坑记录

    千次阅读 热门讨论 2021-01-14 10:16:00
    初始化wx.config时,需要在openTagList中增加自己需要的开放标签 wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log...
  • 在开发微信打开指定app功能的时候,需要引入微信开放标签,但是微信开放标签【wx-open-launch-app】又存在对微信版本的限制【7.0.12 是其最低版本】所以现在判断如果不是该版本及以上版本。 judgeWechat(){ let ...
  • 而在微信在2020年5月分推出了“微信开放标签”功能wx-open-launch-app 用于微信浏览器内直接唤醒 app ,也可通过携带参数直接进入app相应的内页。现在不是干儿子,只要按照规定接入微信SDK就直接可以使用此功能。一...
  • 在vue项目中,直接使用微信开放标签会报错,所以要配置忽略对微信标签的校验,在 vue.config.js 中增加如下配置。 module.exports = { //...其他配置 chainWebpack: config => { config.module .rule('vue...
  • 微信开放标签-H5跳转小程序 文章目录微信开放标签-H5跳转小程序原生H5跳转小程序一、准备工作1.配置JS接口安全域名2.引入JS-SDK文件3. 通过config接口注入权限验证配置并申请所需开放标签4.必要的参数二、功能实现1....
  • 开放标签使用:id="launch-btn"username="gh_xxxxxxxx"path="/a/b/c.html?d=1&e=2#fg">.btn { padding: 12px }打开小程序var btn = document.getElementById('launch-btn');btn.addEventListener('launch', ...
  • 待发布
  • 使用微信开放标签的踩坑日记

    万次阅读 多人点赞 2020-11-04 16:14:27
    最近在完成H5跳转小程序需求时,使用到了微信官方退出的开放标签<wx-open-launch-weapp>,来谈一谈使用的心得和不足。 1、适用环境 微信版本要求为:7.0.12及以上。 系统版本要求为:iOS 10.3及以上、Android ...
  • 微信开放标签wx-open-launch-app

    千次阅读 2020-09-09 22:48:55
    移动互联网时代,“用户增长”成为每个公司关注的重点话题。促活拉新是大多数公司的核心,为了将更多用户引导到...从环境、渠道来区分:微信内(重要渠道)、QQ内、各厂商的浏览器内(短信方式。vivo、oppo、qq浏览
  • 微信小程序绑定的微信公众号必须为已认证的服务号 让专门管理微信公众号的同仁帮忙设置“JS接口安全域名”和“IP白名单” 代码 index.js wx.config({  debug: true, // 开启调试模式,调用的所有api的返回值会在...
  • Element UI 一起搭配使用微信开放标签。 跟着官方文档的使用步骤走,因为开放标签使用步骤与微信 JS-SDK 类似,所以很多工作都不需要做,像 JS接口安全域名 之前已经配置过。然后引入 JS 文件,之前我用的是 1.4.0 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,677
精华内容 5,470
关键字:

微信开放标签