安卓微信内页面用wx-open-launch-app标签拉起app

这篇具有很好参考价值的文章主要介绍了安卓微信内页面用wx-open-launch-app标签拉起app。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

问题描述

公司有一款APP,原本用的是openinstall调用拉起app功能。
ios上(网页、微信、钉钉等拉起app)都正常。
安卓上网页拉起没问题,但是在微信、钉钉内等一些环境中,都是用折中的办法,就是拉起app时,提示点击右上角,在浏览器内打开当前网页,然后在浏览器内打开app。

目前,公司的UI(公司的UI权力比较大,可以提需求)提出,他们在大众点评等app上看到,分享到微信后可以直接拉起app,而不需要打开浏览器。所以要求我们这边也要可以。

总结,就是在安卓的微信内可以直接打开app

解决方案

首先调研一下

  1. 先看微信官方文档
    https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#22
    安卓微信内页面用wx-open-launch-app标签拉起app
    注意几点:

1.App必须接入微信OpenSDK
2.已认证的服务号(必须要是服务号,而且已认证)
3.服务号中绑定你的app

  1. 然后就可以开发了(入坑的开始)
<wx-open-launch-app
  id="launch-btn"
  appid="your-appid"
  extinfo="your-extinfo"
>
  <script type="text/wxtag-template">
    <style>.btn { padding: 12px }</style>
    <button class="btn">App内查看</button>
  </script>
</wx-open-launch-app>

官方代码一贴,打开网页一看,啥有没有,按钮没出来。(这个问题排查了一天)
这里要注意几点:

1.因为我们公司这边服务号账号是有专门的人管理的,所以绑定账号也是通过远程沟通的,我这边和他再三确认下,发现他绑错账号了,他绑定到了公众号下面。下面重让他绑定了服务号,我让他截屏给我看,确认下(大概没问题)
2.绑定安全域名,后面开发测试要用

这边再打开网页看下,还是没出来。然后面向百度找问题。
发现<wx-open-launch-app>这个标签只有在微信内环境下才能看到,浏览器内是看不到的。
为此,我下载了微信开发者工具

安卓微信内页面用wx-open-launch-app标签拉起app
点开公众号网页项目,输入你的线上地址,查看。本地路径是看不到的

安卓微信内页面用wx-open-launch-app标签拉起app
如果这个时候,并没有看到按钮出现。排查wx.config是否请求到了wx-open-launch-app标签的权限。

安卓微信内页面用wx-open-launch-app标签拉起app
如果这里提示fail,按照对应的类型去排查错误原因。
我这里遇到过两个问题,
1.
安卓微信内页面用wx-open-launch-app标签拉起app
这个是地址不对,当前的地址应该用绑定后的线上地址。

2.这里找不到图了。不过提示的是签名错误。signature有问题。这里要排查下wx.config

wx.config({
   debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
   appId: '***********', // 必填,服务号的唯一标识,服务号的appid
   timestamp: res.data.timestamp, // 必填,生成签名的时间戳
   nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
   signature: res.data.signature, // 必填,签名,见附录1
   jsApiList: [
     'updateTimelineShareData', 
     'updateAppMessageShareData',
     'onMenuShareAppMessage',
     'onMenuShareTimeline',
     'onMenuShareQQ',
   ],
   openTagList: ['wx-open-launch-app'],
 });

wx.config内的appid要是服务号的appid。不是公众号的appid。
wx-open-launch-app内的appid就是你的app的appid

安卓微信内页面用wx-open-launch-app标签拉起app

最终的代码

最后放上我的最终的代码:

1.父组件

<template>
  <div id="app" class="page">
    <wxOpenApp :extinfoData="extinfoData"></wxOpenApp>
  </div>
</template>

<script>
import wxOpenApp from '@/components/wxOpenApp';

export default {
  components: {
    wxOpenApp,
  },
  data() {
    return {
      extinfoData: '携带的参数',
    };
  },
};
</script>
<style>
html,
body {
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
#app {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
</style>

<style lang="less" scoped>
@import './app';
</style>

2.wxOpenApp子组件

<template>
  <div id="openAppBox" class="openAppBox" v-if="isWeixinTag">
    <wx-open-launch-app
      id="launch-btn"
      appid="***************"
      :extinfo="extinfoData"
      @error="handleErrorFn"
      @launch="handleLaunchFn"
      style="width: 100vw"
    >
      <script type="text/wxtag-template">
        <style>.finalbtn {background:#18c984;width:100vw;display: block;height: 30rem;font-size: 0;padding:0;margin:0;border:none;text-align:center;}</style>
        <button class="finalbtn">App内查看</button>
      </script>
    </wx-open-launch-app>
  </div>
</template>

<script>
import {
  isWeixin,
  isIOS
} from '@/utils/appAssist';
import wx from 'weixin-js-sdk';
export default {
  props:{
    extinfoData:{
      type:String,
      default:''
    }
  },
  data() {
    return {
      isWeixinTag:true,
      isIOS:isIOS(),
    };
  },
  created() {
    if (isWeixin()) {
      this.authSDK()
    }
  },
  mounted(){
  },
  methods: {
    // 监听error 函数
    handleErrorFn(e) {
      console.log('跳转失败', JSON.stringify(e))
    },
    // 监听launch 函数
    handleLaunchFn(e) {
      console.log('跳转成功', JSON.stringify(e))
    },
    // 判断是否微信环境
    is_weixn() {
      let ua = navigator.userAgent.toLowerCase()
      if (ua.match(/MicroMessenger/i) == 'micromessenger') {
        return true
      } else {
        return false
      }
    },
    authSDK() {
      var doc = document,
      head = doc.head || doc.getElementsByTagName('head')[0] || doc.documentElement,
      ua = navigator.userAgent,
      wxapi = '//res2.wx.qq.com/open/js/jweixin-1.6.0.js';

      function require(url, onload) {
        var node = doc.createElement('script');
        node.onload = onload;
        node.async = true;
        node.src = url;
        head.appendChild(node);
      }

      if (ua.match(/MicroMessenger\/([\d\.]+)/)) {
        require(wxapi, function () {
          $.getJSON('/finchinaAPP/getJSSignForOpenAPP.action?url=' + encodeURIComponent(location.href), function (res) {
            console.log("res",res)
            wx.config({
              debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
              appId: 'wxf5eb231586ef036c', // 必填,服务号的唯一标识 //prod -> wxf5eb231586ef036c
              timestamp: res.data.timestamp, // 必填,生成签名的时间戳
              nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
              signature: res.data.signature, // 必填,签名,见附录1
              jsApiList: [
                'updateTimelineShareData', 
                'updateAppMessageShareData',
                'onMenuShareAppMessage',
                'onMenuShareTimeline',
                'onMenuShareQQ',
              ],
              openTagList: ['wx-open-launch-app'],
            });
          });
          wx.ready(function () {
            console.log('ready')
            wx.checkJsApi({
              jsApiList: ['wx-open-launch-app'], // 需要检测的JS接口列表,所有JS接口列表见附录2,
              success: function (res) {
                console.log('可用', res);
              },
              fail: (err) => {
                console.log(err, '不可用')
              }
            })
          })
          wx.error(function (err) {
            console.log(err)
          })
        });
      }
    },
    
  },
};
</script>

<style lang="less" scoped>
.openAppBox {
  overflow: hidden;
}
</style>

3.isWeixin与isIOS

/**
 * 是否是微信环境
 */
export const isWeixin = () => {
  let ua = navigator.userAgent.toLowerCase();
  if (ua.match(/MicroMessenger/i) == 'micromessenger') {
    return true;
  } else {
    return false;
  }
};

/**
 * 是否为IOS机型
 */
export const isIOS = () => {
  return !!window.navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
};

安卓微信内页面用wx-open-launch-app标签拉起app
最终,这一大片绿色都是可点击的范围。大小控制可以在父级div中控制大小,然后给个
overflow: hidden;
这里我隐藏了文字,用的font-size: 0;
最终要隐藏这一块,用visibility: hidden;
样式改改就行。用官方标准的方式写。
weixin-js-sdk用最新版的,目前是1.6的版本,项目里安装install一下就好。

最终测试

需要通过扫码、或分享的方式打开才有效,链接方式打开不生效。
最简单的就是,通过微信开发工具的右上角预览,用微信扫码测试
安卓微信内页面用wx-open-launch-app标签拉起app

还有其他问题的话可以留言评论,大家一起和谐讨论。文章来源地址https://www.toymoban.com/news/detail-433989.html

到了这里,关于安卓微信内页面用wx-open-launch-app标签拉起app的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信公众号H5跳转小程序,wx-open-launch-weapp

    直接上干货,不多哔哔~~ 注意事项 : 需要再公众号里面绑定需要跳转的小程序 获取 jssdk 配置的时候需要再公众平台绑定安全域名 微信版本要求为:7.0.12及以上。 系统版本要求为: iOS  10.3及以上、 Android 5.0及以上。 如若需要在微信的 wx-open-launch-weapp 添加 img 标签, img 的

    2024年02月02日
    浏览(54)
  • 微信h5跳转小程序wx-open-launch-weapp开放标签不显示(已解决)

    项目需要使用开放标签,按照各种博文上的各种解决方案都不显示, 我都服了,搞来搞去都没用。 最后我搞下来问题我都服了!!!!! 我下载的jweixin-1.6.0.js 不是 正确的 , 对你没看错,这个jssdk应该是我从某个项目里复制出来的 所以遇到不显示的问题没办法解决就需要

    2024年02月13日
    浏览(48)
  • 记录 wx-open-launch-weapp 使用react开发微信环境h5打开微信小程序

    准备工作  1、微信签名配合后端 2、必须已认证的公众号(开发模拟器不行,测试号不行) 遇见的问题: 本地调试麻烦,用的手机修改dns,和电脑一致,通过电脑代理,编译时配置host代理运行调试(因为本地开发没办法签名认证) 1、在微信编辑器,测试号内怎么试都不生效,最后发现正式

    2024年02月16日
    浏览(44)
  • uni-app H5中使用wx-open-launch-weapp打开微信小程序

    最近最H5开发,项目需要发起支付,因为原来我们app走的一套是小程序的支付,所以这边需要H5打开小程序实现支付; 微信文档地址:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html ​ 问题描述 项目开发中遇到的坑,我就不一一列举了,直接上小友的爬坑链接

    2024年02月11日
    浏览(74)
  • 微信小程序学习实录8:H5网页跳转小程序(微信开放标签、wx-open-launch-weapp按钮不显示、noPermissionJsApi)

    微信小程序学习实录7(H5嵌入小程序、获取微信收货地址、数组对象url传值、js获取url参数) 微信小程序学习实录6(百度经纬度采集、手动调整精度、H5嵌入小程序、百度地图jsAPI、实时定位、H5更新自动刷新) 微信小程序学习实录5(H5嵌入小程序、map组件、地图调起功能、腾讯百度

    2024年02月04日
    浏览(77)
  • 微信内H5页面唤醒App

    首先,简述一下这个需求的背景,产品希望能够让用户在微信内,打开一个h5页面,然后就能唤醒公司中维护的app,这个是为了能够更好的引流。 IOS系统-Universal Link(通用链接) Universal Links可以通过配置指定域名路径直接唤醒APP,一步到位 具体配置看这篇文章 https://juejin.

    2024年02月05日
    浏览(39)
  • H5跳转小程序 (wx-open-launch-weapp开放性标签跳转)

    最近公司有一个新的业务需求,企微分享卡片到企微、企微分享卡券到微信,点击领取、打开小程序进行领取。 企微好像不可以直接跳转微信小程序,没有这样的接口,所以只能想另一种方法实现跳转,通过H5跳转微信小程序      我是V2的写法 这是第一次写这种需求,脑袋

    2024年02月12日
    浏览(40)
  • vue2公众号跳转小程序 wx-open-launch-weapp 超完整流程

    根据微信网页开发 / 开放标签说明文档 (qq.com)看开放标签 wx-open-launch-weapp 说明,从上往下完整的看到2.1 根据签名算法见JS-SDK说明文档的附录,所有开放标签列表见文末的附录1 概述 | 微信开放文档 获取wx.config 中相关签名等配置参数(后端通过接口传给我们) 开发者调试需

    2024年04月14日
    浏览(35)
  • 微信内置浏览器调试和调试微信内的H5页面汇总(持续更新...)

    调试PC端微信内置浏览器(只支持3.2.1以下的) (1)添加以下代码, 查看chrome版本和内核安放位置 (2)运行起来,在浏览器打开,复制链接到微信里打开 微信浏览器: –resources-dir-path= 就是内核的位置 (3)打开,将 devtools_resources.pak(可以到网上搜一下 devtools_resources 或者

    2024年02月07日
    浏览(45)
  • 微信小程序中使用wx.navigateTo跳转时页面出现空白

    在微信小程序中当触发点击事件后跳转的页面时,跳转的页面出现空白,控制台报Page \\\"pages/outline-xi/outline-xi\\\" has not been registered yet.可能是因为使用了tabbar时导致的app.json没有使页面初始化,需要把不是tabbar的页面调在前面就能解决问题。  

    2024年02月16日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包