UNI-APP/VUE 项目集成微信SDK /微信开放标签教程和避坑指南（下）——微信开放标签篇

最新推荐文章于 2024-09-11 17:26:38 发布

mingyong.g

最新推荐文章于 2024-09-11 17:26:38 发布

阅读量1.5k

点赞数

分类专栏： VUE UNI-APP 点滴DayUP 文章标签：微信开放标签 uni-app使用微信开放标签 vue使用开放标签开放标签无效微信开放标签无效

本文链接：https://blog.csdn.net/weixin_44670973/article/details/108546179

版权

点滴DayUP 同时被 3 个专栏收录

102 篇文章 3 订阅

订阅专栏

VUE

28 篇文章 7 订阅

订阅专栏

UNI-APP

22 篇文章 7 订阅

订阅专栏

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

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

手机端访问地址:UNI-APP/VUE 项目集成微信开放标签教程和避坑指南

前言

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

🚀UNI-APP/VUE 项目集成微信SDK教程和避坑指南
本文接着UNI-APP/VUE 项目集成微信SDK教程和避坑指南介绍，如何在UNI-APP/VUE 项目中使用微信开放标签。

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

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

拥有自己的服务器

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

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

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

良好的心态

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

满足微信官方的配置要求

微信开放标签有最低的微信版本要求，以及最低的系统版本要求。
微信版本要求为：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>

注意事项

使用开放标签确保当前页面已经完成微信SDK集成。

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

配置微信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' //上传图片  
      ]
    };