Vue与原生APP的相互交互

wudengzan 发布于2019-08-23 16:59 / 827人阅读

摘要：美团爱奇艺微信等知名移动应用，都是采用开发模式。开发已成为未来的一种发展趋势。原生与交互场景原生的头部标题栏，内容为页面。分享微信好友安卓识别不了对象将对象转为字符串

现在好多APP都采用了Hybrid的开发模式，这种模式特别适合那些内容变动更新较大的APP，从而使得开发和日常维护过程变得集中式、更简短、更经济高效，不需要纯原生频繁发布。但有利肯定有弊咯，性能方面能稍微差一点，还有就是两者之间的交互问题。美团、爱奇艺、微信等知名移动应用，都是采用Hybrid App开发模式。Hybrid开发已成为未来的一种发展趋势。

1、原生APP与Vue交互

场景：原生的头部标题栏，内容为H5页面。现在需要在原生头部增加一个时间帅选功能，原生筛选好时间后调用H5的查询方法。

mounted () {
  /* 将nativeCallToSearch方法绑定到window下面，提供给外部调用 */
  window.nativeCallToSearch = (res) => {
    this.nativeCallToSearch(res)
  }
}

methods () {
  /**
   * 原生时间筛选
   * @param {string} searchDate 查询的时间
   */
  nativeCallToSearch (searchDate) {
    // do something...
  }
}

2、Vue与原生APP交互

场景：H5页面中涉及分享功能（用H5来做分享坑太多），H5实现具体分享的内容，原生只负责分享操作。

methods () {
  /**
   * 分享微信好友
   */
  goWXFriend () {
    this.$loading.show()
    if (this.androidOrIos === "android") {
      /* eslint-disable */
      /* 安卓识别不了js对象 */
      javascript: share.shareWX(this.shareObj.link, this.shareObj.linkTitle, this.shareObj.linkContent, this.shareObj.linkImgUrl)
      /* eslint-enable */
      this.$loading.hide()
    } else if (this.androidOrIos === "ios") {
      /* 将对象转为字符串 */
      window.webkit.messageHandlers.shareWX.postMessage(JSON.stringify(this.shareObj))
      this.$loading.hide()
    }
  }
}

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103618.html

理解vue中的组件（二）

摘要：往往定义组件的构造器后，不需要手动的进行初始化，而是在其他组件的模板中当成标签来使用，这时候需要调用注册成组件。这样设计的目的是防止从子组件意外改变父级组件的状态，从而导致应用的数据流向难以理解。上节说到组件https://segmentfault.com/a/1190000009236700，这一节继续来学习组件：原文博客地址，欢迎学习交流:点击预览从github上获取本文代码：...

Nino 2019-08-23 12:11 评论0 收藏0
XCel 项目总结 - Electron 与 Vue 的性能优化

摘要：而这里的单元格信息是唯一的，所以直接通过为一个空对象赋值即可。和相关的知识和技巧高亮的列单元格采用展示。在中，被选中的单元格会高亮相应的行和列，以提醒用户。 showImg(https://segmentfault.com/img/bVGkdk?w=900&h=500); XCEL 是一个 Excel 数据清洗工具，其通过可视化的方式让用户轻松地对 Excel 数据进行筛选。 XCEL...

XUI 2019-08-22 10:45 评论0 收藏0
微信小程序mpvue框架总结

摘要：原理架构作为与之间相互通信的桥梁部分在环境中注入的实现代码，包含了协议的拼装发送参数池回调池等一些基础功能。部分在客户端中的功能映射代码，实现了拦截与解析环境信息的注入通用功能映射等功能。原理架构 JSBridge 作为native 与 JS 之间相互通信的桥梁JS部分(bridge): 在JS环境中注入 bridge 的实现代码，包含了协议的拼装/发送/参数池/回调池等一些基础功能...

microelec 2019-08-23 18:32 评论0 收藏0
指尖前端重构（React）技术调研分析

摘要：一为什么选择是当前前端应用最广泛的框架。目前来看的生态系统要比大的多，在等最大的技术社区搜索两者，的搜索结果是的十倍左右，另外据近期统计使用的站点是的几百倍以上。其中是基于技术，依然是浏览器应用。一、为什么选择React React是当前前端应用最广泛的框架。三大SPA框架 Angular、React、Vue比较。 Angular出现最早，但其在原理上并没有React创新的性能优化...

AlphaWallet 2019-08-23 18:18 评论0 收藏0
vue源码阅读之数据渲染过程

摘要：图在中应用三数据渲染过程数据绑定实现逻辑本节正式分析从到数据渲染到页面的过程，在中定义了一个的构造函数。一、概述 vue已是目前国内前端web端三分天下之一，也是工作中主要技术栈之一。在日常使用中知其然也好奇着所以然，因此尝试阅读vue源码并进行总结。本文旨在梳理初始化页面时data中的数据是如何渲染到页面上的。本文将带着这个疑问一点点追究vue的思路。总体来说vue模版渲染大致流程如图1所...

AlphaGooo 2019-05-22 16:53 评论0 收藏0