微信小程序-开放标签

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

33子～

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

阅读量1.5k

点赞数

分类专栏：工作中接触到的

本文链接：https://blog.csdn.net/weixin_46254175/article/details/112365772

版权

工作中接触到的专栏收录该内容

41 篇文章 1 订阅

订阅专栏

本篇背景

最近做了一个h5的需求，不知道大家会不会这样，一直写小程序说实话提手有点忘了该怎么敲html。。。通过这个需求，还学到了很多东西：开放标签，JS-SDK等等，此篇作为沉淀下子的文章。PS：虽然写这个需求一顿咨询公司大佬，嘻嘻嘻。

微信官方文档

官网PS：微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包
通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫等微信特有的能力，为微信用户提供更优质的网页体验。

JSSDK使用步骤

步骤一：绑定域名

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

步骤二：引入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）。

步骤三：通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。

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

步骤四：通过ready接口处理成功验证

wx.ready(function(){
  // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

步骤五：通过error接口处理失败验证

wx.error(function(res){
  // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});

需要注意：开放标签，样式的写法

<wx-open-launch-weapp
  id="launch-btn"
  username="gh_xxxxxxxx"
  path="pages/home/index.html?user=123&action=abc"
>
  <template>
    <style>.btn { padding: 12px }</style>
    <button class="btn">打开小程序</button>
  </template>
</wx-open-launch-weapp>
<script>
  var btn = document.getElementById('launch-btn');
  btn.addEventListener('launch', function (e) {
    console.log('success');
  });
  btn.addEventListener('error', function (e) {
    console.log('fail', e.detail);
  });
</script>

目前开放标签：

小程序跳转按钮<wx-open-launch-weapp>
用于页面中提供一个可跳转指定小程序的按钮。使用此标签后，用户需在网页内点击标签按钮方可跳转小程序。H5通过开放标签打开小程序的场景值为1167.

App跳转按钮<wx-open-launch-app>
用于页面中提供一个可跳转指定App的按钮。此功能仅开发给已认证的服务号。

额外
因为我们的项目是用vue写的，在微信环境会不识别，解决办法就是，通过js写进去。类似下面这样：

<div  v-show="isMobile && isWeixin"  id="public-web-container"></div>

const html =`<wx-open-launch-weapp
              id="launch-btn"
              username="gh_a5624dd2db4e"
              :path="wxPath"
            >
              <template>
                <style>.text {text-align: center}</style>
                <p class="text">点击按钮进入小程序</p>
                <style>.goWeixinBtn { display: flex;align-items: center;justify-content: center;margin: 30px auto;width: 200px;height: 45px;text-align: center;font-size: 17px;border-radius: 4px;background-color: #FF9A2E;color:#fff;}</style>
                <button class="goWeixinBtn">进入小程序</button>
              </template>
            </wx-open-launch-weapp>`;
    const node = document.getElementById('public-web-container');
    node.innerHTML = html;