quickapp_快应用_快应用与h5交互

快应用与h5交互

      • h5跳转到快应用
        • [1] 判断当前环境是否支持组件跳转快应用
        • [2] h5跳转到快应用
          • (1)deeplink方式进行跳转(推荐)
          • (2)h5点击组件(接收参数存在问题)
          • (3)url配置跳转(官方不推荐)
        • 问题-浏览器问题
      • web组件
        • h5页面嵌入快应用
        • 快应用发送消息到h5页面
        • h5页面接收快应用发送的消息
        • h5页面发送消息到快应用
        • 快应用页面接收h5页面传递的消息
        • 通信前提- trustedurl

h5跳转到快应用

[1] 判断当前环境是否支持组件跳转快应用

首先并不是所有机型都支持在h5页面跳转到快应用页面的，因此在进行跳转之前需要先判断当前机型是否支持跳转做好兜底。

  • 首先在网页嵌入如下 js
    <script type="text/javascript" src="//statres.quickapp.cn/quickapp/js/qa_router.min.js"></script>
    在网页嵌入如上js后，会给window对象添加一个方法channelReady,可以通过这个方法检验当前机型是否支持跳转；
    if (window.channelReady) {
  window.channelReady(function (bAvailable) {
    // bAvailable为true表示允许跳转-跳转
    // bAvailable为false表示不允许跳转-兜底
  })
}else{
  // 不允许跳转-兜底
}
  • 注意：并不是所有机型都支持如上判断
    在这里插入图片描述
[2] h5跳转到快应用

h5跳转到快应用有以下几种方式

(1)deeplink方式进行跳转(推荐)

可以通过deeplink的形式进行跳转

deeplink支持格式如下：

  • http://hapjs.org/app/<package>/[path][?key=value]
  • https://hapjs.org/app//[path][?key=value]
  • hap://app//[path][?key=value]

参数说明如下：

  • package: 应用包名(与manifest.json中package属性相同)，必选

  • path: 应用内页面的 path，可选，默认为首页

  • key-value: 希望传给页面的参数，可选，可以有多个

    快应用内获取参数： 快应用内会自动获取key-value并赋值给public内的同名参数

    若是public内没有同名参数，则不会新增这个属性(相当于🈚️成功获取)

说明：不同的厂商对该能力可能有不同限制，使用前请和相应厂商确认(本人试了华为、荣耀、小米、OPPO的几部测试机，目前并没有发现问题)

流程

 clickmethod(){
   if (window.channelReady) {
     window.channelReady(function (bAvailable) {
       if (bAvailable) {
         location.href = `https://hapjs.org/app/com.klang.benz/pages/Front?phone=${_this.phone}&channel=${_this.channel}`
       }else{
         // 不允许跳转- 兜底(下载对应app)
       }
     }
   }else{
     // 不允许跳转- 兜底(下载对应app)
   }
 }
(2)h5点击组件(接收参数存在问题)

h5点击组件是指：网页开发者可以在其H5 页面中使用快应用官方推荐的点击组件，用于跳转指定快应用。使用点击组件时，必须由用户主动点击方可发起跳转快应用请求。

  • 在网页嵌入如下 js：
    <script type="text/javascript" src="//statres.quickapp.cn/quickapp/js/qa_router.min.js"></script>
    在网页嵌入如上js后，会给window对象添加一个方法channelReady,可以通过这个方法检验当前机型是否支持跳转；
    在网页嵌入如上js后，会有一个全局组件 ，可以在页面合适位置插入(样式可自行调整)，组件属性如下
    在这里插入图片描述

    tips: 虽然官方文档上说会将参数赋值给public同名属性，但是在真机上很多型号接收不到参数！！！

(3)url配置跳转(官方不推荐)

官方文档不推荐使用url配置跳转方式进行跳转
在这里插入图片描述

  • 在网页嵌入如下js文件
    <script type="text/javascript" src="//statres.quickapp.cn/quickapp/js/routerinline.min.js"></script>
    嵌入之后会在window上添加appRouter 和 channelReady方法，其中channelReady用来检验是否可以跳转，appRouter方法用来进行跳转，具体语法请看文档。
问题-浏览器问题

在进行快应用开发时我最先使用的是“h5点击组件跳转”，发现很多测试机型参数都接收不到，因此我就尝试了“deeplink”方式进行跳转，万幸～这次可以成功拿到参数。

但是此时出现了一个新的问题：有的手机点击跳转中间页的“手动打开”不起作用，如下
在这里插入图片描述
流程相当于被卡在这里了…
但是同样的跳转地址我在快应用预览版->启动应用测试->Deeplink启动测试里面进行跳转就可以成功打开，如下：
在这里插入图片描述
让我不禁怀疑是不是h5里面的跳转写的有问题，经过一番测试发现是浏览器的问题，只有手机自带的浏览器才有下面这个请求提示！！！

总结： 有的机型在点击手动打开时就可跳转到快应用，而有的手机型号点击时无反应，若是在手机自带浏览器会弹出下面打开快应用中心提示，若是其他浏览器则会中断流程…

web组件

作用：用于显示在线的 html 页面(可以嵌入三方页面或者某些不太重要的页面)

h5页面嵌入快应用

可以使用web组件将h5页面嵌入快应用页面中

缺点：打开会比原生慢一点，可能存在白屏现象。

示例：

<web src='https://doc.quickapp.cn/tutorial/framework/lifecycle.html'></web>

渲染结果如下：
在这里插入图片描述

在当前h5页面嵌入快应用之后，快应用就可以和当前h5页面进行消息互通了。

快应用发送消息到h5页面

  • 语法

    this.$element('web').postMessage({
  message: messageString,
  success: function(){},
  fail: function(){}
})

  • 注意点1：message必须为String类型，若是传递其他数据类型如对象，在真机环境会报错

    this.$element('web').postMessage({
  message: {str: '11111'} // 发送消息为一个对象
})

    上述代码报如下错误

    java.lang.ClassCastException: org.json.JSONObject cannot be cast   to java.lang.String
at org.hapjs.widgets.Web.f(SourceFile:535)
at org.hapjs.widgets.Web.invokeMethod(SourceFile:681)
at org.hapjs.render.b.a.a(SourceFile:30)
at org.hapjs.render.RootView.applyAction(SourceFile:1134)
at org.hapjs.render.RootView.applyActions(SourceFile:1120)
at org.hapjs.render.RootView.a(SourceFile:1105)
at org.hapjs.render.RootView.e(SourceFile:1088)
at org.hapjs.render.RootView$a.handleMessage(SourceFile:365)
at android.os.Handler.dispatchMessage(Handler.java:117)
at android.os.Looper.loopOnce(Looper.java:205)
at android.os.Looper.loop(Looper.java:293)
at android.app.ActivityThread.main(ActivityThread.java:9596)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:586)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1204)

    this.$element('web').postMessage({
  message: '111111' //发送的消息为111111
})

    上述代码成功发送

    若是想发送对象类型可以使用 JSON.stringify进行转换但是在接收时要注意使用try catch包裹，因为快应用默认发送的数据是对象类型且并没有stringify

    mounted () {
  const _this = this
  if (window.system && window.system.onmessage) {
    window.system.onmessage = function (data) {
      let d
      try {
        d = JSON.parse(data)
      } catch (err) {
      }
      if (d && d.page === 'quick_app') {
        _this.getInfo(d)
      }
   }
}

  • 注意点2:注意发送数据的时机，发送数据一定要等待网页渲染完毕之后，否则在网页端将接收不到数据

    示例：

    我想在页面渲染完成之后发送信息给web页面，因此我选择在快应用的onReady生命周期发送数据

    onReady(){
  this.$element('web').postMessage({
    message: '111111'
  })
}

    但是我发现在网页在拿不到指定的信息

    原因是因为在发送数据的时候web网页还没有渲染完成！

    我们可以在web组件的pagefinish事件时传送数据，此事件在web页面渲染完成时触发！

     @pagefinish="pagefinish"

    pagefinish(){
  this.$element('web').postMessage({
    message: '111111'
  })
}
h5页面接收快应用发送的消息

当网页被嵌入快应用时，默认会向该页面的windows中添加system对象，该对象上存在onmessage方法用于接收快应用中发送过来的消息。
在这里插入图片描述

注意： 该方法只有在快应用嵌套的web页面中可以使用，否则这个方法将不存在(在web页面做好兼容)！

mounted () {
  if (window.system && window.system.onmessage) {
    window.system.onmessage = function (data) {
      console.log('message received: ' + data) // data为快应用发送的消息
    }
  }
}
h5页面发送消息到快应用

当网页被嵌入快应用时，默认会向该页面的windows中添加system对象，该对象上存在postMessage方法用于向快应用中发送消息。
在这里插入图片描述

注意： 该方法只有在快应用嵌套的web页面中可以使用，否则这个方法将不存在(在web页面做好兼容)！

// 通过条件判断当前页面是否嵌入在快应用中(做好兼容)
if (xxx) { 
  window.system.postMessage(string)
  window.system.postMessage(JSON.stringify(obj))
}

tips: postMessage方法的参数为string，若是想传输对象需要使用stringify进行转换

快应用页面接收h5页面传递的消息

在这里插入图片描述

  @message="message"

message(data){
   // data:{message: messageString, url: urlString}
}
通信前提- trustedurl

web页面可以与快应用通信的前提是：只有在互相信任的页面路径才会允许通信。

web组件的trustedurl属性就是表示可信任的网址的集合。只有 trustedurl 中链接或者 src 链接的网页可以和框架进行双向通信(支持正则表达式)。

有人可能会疑惑：我没有添加trustedurl属性，但是现在通信没有问题？ 原因是因为在默认情况下会添加web组件的src属性到trustedurl中。

因此若是URL永远不变，则可以省略，若是路径携带参数或url不是固定值，则必须添加trustedurl！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/221272.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

NFC物联网解决方案应用实例：基于NFC的通用物流链防伪溯源

NFC物联网解决方案应用实例：基于NFC的通用物流链防伪溯源

NFC物联网系统解决方案已在某局进行推广应用&#xff0c;给出了某省内出口蔬菜水果检验检疫监管的物联网解决方案。 依据相关法规&#xff0c;出口蔬菜必须在质检总局注册种植基地进行种植&#xff0c;出口前按批次向产地检验检疫部门进行申报&#xff0c;按时在集中监管区统一…
阅读更多...
Windows XP安装SVN软件

Windows XP安装SVN软件

SVN全称为SubVersion&#xff0c;是Apache开源软件协议下&#xff0c;一个用于代码分布式管理的工具&#xff0c;其孵化的软件产品是TortoiseSVN&#xff0c;该软件是带图形界面的代码管理工具&#xff0c;类似于Git&#xff0c;多了一个图形界面&#xff0c;方便鼠标操作。  …
阅读更多...
Android : 篮球记分器app _简单应用

Android : 篮球记分器app _简单应用

示例图&#xff1a; 1.导包 在build.gradle 中 加入 // 使用androidx版本库implementation androidx.lifecycle:lifecycle-extensions:2.1.0-alpha03 2. 开启dataBinding android{...// 步骤1.开启data bindingdataBinding {enabled true}...} 3.写个类继承 ViewModel pac…
阅读更多...
设计一个简易版本的分布式任务调度系统

设计一个简易版本的分布式任务调度系统

&#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是爱吃芝士的土豆倪&#xff0c;24届校招生Java选手&#xff0c;很高兴认识大家&#x1f4d5;系列专栏&#xff1a;Spring源码、JUC源码、Kafka原理、分布式技术原理&#x1f525;如果感觉博主的文章还不错的话&#xff…
阅读更多...
96基于matlab的GMDH神经网络对YPML120 时间序列进行预测

96基于matlab的GMDH神经网络对YPML120 时间序列进行预测

基于matlab的GMDH神经网络对YPML120 时间序列进行预测&#xff0c;输出训练数据和测试数据的结果&#xff0c;及预测均方根误差结果和正态分布。数据可更换自己的&#xff0c;程序已调通&#xff0c;可直接运行。 96matlabGMDH神经网络 (xiaohongshu.com)
阅读更多...
MQTT框架和使用

MQTT框架和使用

目录 MQTT框架 1. MQTT概述 1.1 形象地理解三个角色 1.2 消息的传递 2. 在Windows上体验MQTT 2.1 安装APP 2.2 启动服务器 2.3 使用MQTTX 2.3.1 建立连接 2.3.2 订阅主题 2.3.3 发布主题 2.4 使用mosquitto 2.4.1 发布消息 2.4.2 订阅消息 3. kawaii-mqtt源码分析…
阅读更多...
音乐律动效果

音乐律动效果

先上图 代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>音乐律动效果</title><style>* {margin: 0;padding: 0;}li {list-style: none;}.container .img {width: 200px;height: 200…
阅读更多...
k8s之镜像拉取时使用secret

k8s之镜像拉取时使用secret

k8s之secret使用 一、说明二、secret使用2.1 secret类型2.2 创建secret2.3 配置secret 一、说明 从公司搭建的网站镜像仓库&#xff0c;使用k8s部署服务时拉取镜像失败&#xff0c;显示未授权&#xff1a; 需要在拉取镜像时添加认证信息. 关于secret信息,参考: https://www.…
阅读更多...
微信小程序之猜数字和猜拳小游戏

微信小程序之猜数字和猜拳小游戏

目录 效果图 app.json 一、首页&#xff08;index3&#xff09;的代码 wxml代码 wxss代码 二、猜数字页面&#xff08;index&#xff09;代码 wxml代码 wxss代码 js代码 三.游戏规则页面&#xff08;logs&#xff09;代码 wxml代码 wxss代码 四.猜拳页面&#xff…
阅读更多...
pthread学习遇到的问题

pthread学习遇到的问题

1.pthread_t 是个类型&#xff0c;指的是线程ID。pthread_create&#xff08;&#xff09;的时候穿地址进去&#xff0c;线程创建好后就会成为线程ID&#xff08;即输出型参数&#xff09; 2.pthread_self() pthread_self()获得是调用这个函数的线程ID &#xff08;我以为是…
阅读更多...
随着互联网的快速发展，日常网站监测工具显得越发重要

随着互联网的快速发展，日常网站监测工具显得越发重要

德迅云安全-领先云安全服务与解决方案提供商 如今&#xff0c;随着互联网的快速发展&#xff0c;网站安全问题日益凸显。恶意攻击、数据泄露、黑客入侵等威胁不断涌现&#xff0c;给企业和个人的信息安全带来了巨大风险。因此&#xff0c;选择一个强大的网站安全监测工具成为了…
阅读更多...
Django 开发 web 后端，好用过 SpringBoot ？

Django 开发 web 后端，好用过 SpringBoot ？

基础语法 Django&#xff08;Python&#xff09;&#xff1a;以简洁和直观著称。它允许更快的开发速度&#xff0c;特别适合快速迭代的项目。例如&#xff0c;一个简单的视图函数&#xff1a; from django.http import HttpResponsedef hello_world(request):return HttpRespon…
阅读更多...
26、pytest使用allure解读

26、pytest使用allure解读

官方实例 # content of pytest_quick_start_test.py import allurepytestmark [allure.epic("My first epic"), allure.feature("Quick start feature")]allure.id(1) allure.story("Simple story") allure.title("test_allure_simple_te…
阅读更多...
Mybatis XML 配置文件

Mybatis XML 配置文件

我们刚开始就有说Mybatis 的开发有两种方式: 1.注释 2.XML 注解和 XML 的方式是可以共存的 我们前面说的都是注释的方式,接下来是XML方式 XML的方式分为三步 : 1.配置数据库(配在 application.yml 里面) 这个跟注释的配置是一样的,username应该都是一样的,password记得写…
阅读更多...
使用消息队列遇到的问题—kafka

使用消息队列遇到的问题—kafka

目录 1 分区2 消费者3 Kafka 如何保证消息的消费顺序&#xff1f;3.1 方案一3.2 方案二 在项目中使用kafka作为消息队列&#xff0c;核心工作是创建生产者—包装数据&#xff1b;创建消费者----包装数据。 欠缺一些思考&#xff0c;特此梳理项目中使用kafka遇到的一些问题和解决…
阅读更多...
【4】密评-网络和通信安全测评

【4】密评-网络和通信安全测评

0x01 依据 GB/T 39786 -2021《 信息安全技术 信息系统密码应用基本要求》针对等保三级系统要求&#xff1a; 网络和通信层面&#xff1a; a&#xff09;应采用密码技术对通信实体进行身份鉴别&#xff0c;保证通信实体身份的真实性&#xff1b; b&#xff09;宜采用密码…
阅读更多...
Linux gtest单元测试

Linux gtest单元测试

1 安装git sudo apt-get install git2 下载googletest git clone https://github.com/google/googletest.git3 安装googletest 注意1: 如果在 make 过程中报错，可在 CMakeLists.txt 中增加如下行，再执行下面的命令: SET(CMAKE_CXX_FLAGS “-std=c++11”) 注意2: CMakeLists…
阅读更多...
【GIT】.gitignore 在忽略目录中放开某目录

【GIT】.gitignore 在忽略目录中放开某目录

示例&#xff1a;忽略build下面的所有目录&#xff0c;只放开build/ast2500-default/workspace/recipes-phosphor/ 目录 .gitignore 实现文件代码 # 忽略 build 目录下的所有目录 # 并放开build/ast2500-default/workspace/recipes-phosphor/ build/* !build/ast2500-defaul…
阅读更多...
【从零开始学习JVM | 第一篇】快速了解JVM

【从零开始学习JVM | 第一篇】快速了解JVM

前言&#xff1a; 在探索现代软件开发的丰富生态系统时&#xff0c;我们不可避免地会遇到一个强大而神秘的存在——Java虚拟机&#xff08;JVM&#xff09;。作为Java语言最核心的组成之一&#xff0c;JVM已经超越了其最初的设计目标&#xff0c;成为一个多语言的运行平台&…
阅读更多...
微前端 无界基本用法

微前端 无界基本用法

目录 无界方案​ 应用加载机制和 js 沙箱机制​ 路由同步机制​ iframe 连接机制和 css 沙箱机制​ 通信机制​ 优势​ 无界入门 无界方案​ 在乾坤的issue中一个议题非常有意思&#xff0c;有个开发者提出能否利用iframe来实现js沙箱能力&#xff0c;这个idea启发了无…
阅读更多...
最新文章

Copyright @ 2022~2023