8

微信中H5页面唤起 APP方案_直接打开appStore

 2 years ago
source link: https://www.fly63.com/article/detial/12298
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

wx-open-H5网页在微信上是无法直接打开app链接的，需要使用微信开放标签wx-open-launch-app，它主要用于微信H5网页唤醒app，该标签只有在微信中才会显示。下面由“fly63前端网”为大家整理记录使用wx-open-launch-app跳转app的历程，方便大家以后查阅和参考。

步骤一：域名和应用Appid的绑定

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

关联移动应用：移动应用Appid在开放平台管理中心/移动应用中，根据自己的应用进行选择；开放平台绑定的每个移动应用都有一个AppID。需要注意的是：目前安全域名只绑定了一个移动应用。

关于微信外部链接内容管理规范的声明：点击查看

步骤二、获取签名

获取签名这一块由后端的同事来完成，原因很简单，因为获取access_token要的ip必须加入服务号的ip白名单中，而我们本地的IP不是固定的

官网文档：后端获取签名方式

调用这个接口我们会获取到如下参数appId、timestamp、nonceStr、signature。

步骤三、前端引入微信的jssdk

网页中需要引入weixin.js

<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.j"></script>

如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）

当然也支持npm的方式安装：

npm install weixin-js-sdk
import wx from 'weixin-js-sdk'

步骤四、前端完整示例

<wx-open-launch-app id="openApp" appid="xxx" extinfo="">
  <!-- template为必选项 -->
  <template>
	<!-- 样式写在了template中的style里才生效哦 -->
	<style>
        .wx-btn{
            width:100%;
            color: #666;
        }
    </style>
    <button>App内查看</button>
  </template>
</wx-open-launch-app>

<script>
  wx.config({
      debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开
      appId: '', // 必填，开发者ID
      timestamp: , // 必填，生成签名的时间戳
      nonceStr: '', // 必填，生成签名的随机串
      signature: '',// 必填，签名
      jsApiList: ["onMenuShareAppMessage"], // 必填，需要使用的JS接口列表
      openTagList: ['wx-open-launch-app'] // 可选，需要使用的开放标签列表
  });
  wx.ready(() => {
      console.log("ready")
  })
  wx.error(() => {
      console.log("error")
  })
  var btn = document.getElementById('openApp');
  btn.addEventListener('launch', () => {
      console.log('success');
  });
  btn.addEventListener('error', (e) => {
      console.log('fail', e.detail);
  });
 </script>

config的appId为开发者ID是公众号的获取的。wx-open-launch-app标签里的appid为步骤一里配置的移动应用Appid（不要跟wx.config里面的appid弄混了）。 

标签里的extinfo通常传入的是一个url，用来打开指定的页面，这里有一点需要注意的是，我们应使用一个自定义的scheme，否则我们在打开App 的过程中会出现一个选取浏览器的过程。

关于标签的样式问题：

1. wx-open-launch-app 这个标签可以加样式style
2. wx-open-launch-app 标签外部样式和内部样式是隔离的

在开发中，我们需要判断是否是微信环境，根据环境不同做相应的处理，判断微信的方法：

is_weixn() {
    let ua = navigator.userAgent.toLowerCase()
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
	return true
    } else {
	return false
    }
}

关于未成功唤醒App

当我们完成上述工作之后，准备唤起我们的app的时候，发现居然不好使！！

你遇见的问题可能是这样的：

1. IOS能成功唤起，Android无法唤起
2. Android在后台运行时，能成功唤起app，当结束app进程时，无法唤起
3. Android唤起app之后，出现一层蒙版导致无法点击

出现这一系列问题，大概率是SDK关于Android和IOS的接入配置有问题。参考以下文档

IOS接入指南
Android接入指南
  • 配置需严格按照文档，wx.config调用时，jsApiList必须传入至少一项Api，不能只传openTagList。
  • 外部样式无法影响标签内样式，因为template下生成了document-fragment单独的doc，样式已于外界隔离。
  • template样式无法使用position。
  • 标签本身可以设置样式，因此对其设置absolute，外部按正常方式写，只是样式多一个relative即可。
  • 内部高度无法使用百分比，需要传入真实高度，因此不适用不知道外部高度的场景。
  • 弹窗唤起后，不报错的情况下，点击允许和取消都会进入launch事件，按现在逻辑无法区分用户是点击的允许还是取消的。

链接: https://www.fly63.com/article/detial/12298


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK