关于VUE使用微信开放性标签的解读

对于微信开放性标签文档的爬坑

对于一个初步设计此类需求的开发任务 第一次看开发文档 上级只给了开发文档的链接! 当第一眼看到的时候也是一脸懵逼
链接: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html

对开发文档的解读

当我打开开发文档可以清楚的看到五个步骤在此就不一 一解读了直接看用例吧
在这里插入图片描述

  1. appid:微信开放平台的appid(绑定了要拉起APP的ID如果步骤1不是你做的可能要找你上级索要)
  2. extinfo:携带额外信息,往细里面的说,就是你拉起app指定跳转的到的页面所需要给的参数

解读2

在这里插入图片描述

  1. 关于上面的图片使用vue的朋友可能一开始看到 wx.config 这应该写到哪里?

  2. 在这wx.config里面的数据又是什么!

    其实很简单 在开发文档中的步骤二 按要求引入JS文件即可使用wx.config而其中的内容完全由后端给的接口数据做的,在这注意一下此处的appID和之前说的并非相同,其中jsApiList 和 oppenTagList 需要直接根据本地配置

友情提示

  1. 在标签和方法中的appID 并非相同,请勿混淆
  2. 在使用wx开发标签中 控制台会报错并不识别[‘wx-open-launch-app’],解决方法在main.js中添加配置 Vue.config.ignoredElements = [‘wx-open-launch-app’]; 至于用处就是忽略报错!
  3. 在如今的开发中我们都相对于以来组件库开发!而在开发中测试到微信开放性标签并不支持组件的使用!(个人爬坑测试并不确定,可能是我写法问题,欢迎测试回复)
  4. 在用例中 < template > 包裹 样式和标签 在vue中也会报错 在此我们把template 改为 < script type=“text/wxtag-template” >即可
  5. 由于微信开放性标签只能在生产环境下测试 看不到样式的问题! 我们可以给标签加一个背景色即可在电脑测试中看到具体的位置! 而 在部分组件中修改列如:一个按钮的时候 可能遇到添加样式并不成功的时候, 列如其中的宽高! 需要使用定位的方法来固定位置!

学海无涯

  1. 有不懂的地方欢迎留言
  2. 如感觉此文章对您有帮助欢迎一键三连
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值