整理一:

现在有这么个需求,如下图

app端点击右上角的 加 号 ,弹出模态框

这个项目是基于vue写的,客户端需要调用H5页面里定义的js方法,但是在vue里,所有的方法都是在组件内部声明的,也只能在组件内部调用,并没有绑定window对象下面,这样一来,vue组件里定义的方法怎么暴露给window对象,提供给外部调用呢?

解决办法:通过window.变量名方式进行申明,这种方式没有位置限制。

mounted: function () {
var _self=this
//此方法绑定到window下面,提供给外部调用
window['showAdd'] = function(){
_self.showAdd()
}
}

这样 showAdd就暴露在外部了,打开控制台,输入 showAdd() 即可弹出模态框

整理二:

修改车间状态底部有一个确定按钮,点击确定按钮之后 需要把列表的数据返回给app端

confirmList(){
var that=this;
that.$ajax({
method: 'PUT',
url:`${that.api}/api/workshop/all`,
data:that.workshopList,
}).then(function (response) {
//重点是这里
window.webkit.messageHandlers.submitClick.postMessage(JSON.stringify(response.data.data))
}).catch(function (error) {
console.log(error);
});
}

window.webkit.messageHandlers.submitClick.postMessage(JSON.stringify(response.data.data))

整理三:

app端点击右上角的 加 号 ,表示修改成员 确认 按钮

window.webkit.messageHandlers.avatarClick.postMessage(JSON.stringify(this.chosenList))

整理四

现遇到这样的问题,用vue项目做成的单页面应用,在app返回时,需要阻止页面关闭,路由回退(常见的场景是:答题页面还没结束,用户点击返回,需要给一个返回提示)

//防止页面后退
history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
history.pushState(null, null, document.URL);
});

H5与APP混合开发相关知识点总结的更多相关文章

  1. h5与app混合开发,jsbridge

    https://juejin.im/post/5bda6f276fb9a0226d18931f https://juejin.im/post/5abca877f265da238155b6bc http ...

  2. Hybrid APP混合开发的一些经验和总结

    http://www.cnblogs.com/kingplus/p/5588339.html 写在前面: 由于业务需要,接触到一个Hybrid APP混合开发的项目.当时是第一次接触混合开发,有一些经 ...

  3. Hybrid APP混合开发

    写在前面: 由于业务需要,接触到一个Hybrid APP混合开发的项目.当时是第一次接触混合开发,有一些经验和总结,欢迎各位一起交流学习~ 1.混合开发概述 Hybrid App主要以JS+Nativ ...

  4. iOS之H5和Native混合开发

    今天需要用到一个H5和Native 混合开发的项目,简单的写一点入门的东西,很简答: 先介绍一下简单的配置步骤: 1.新建项目:SB拖一个UIWebView 按住Ctrl 拖线delegate 设置为 ...

  5. hybird app混合开发介绍

    一 概念 1 Hybird App,是用现有前端(html,js,css)技术来开发的app.特点:1 灵活(开发灵活 ,部署灵活) 2 拥有类似原生的性能体验. 2 不是h5页面,也不是在webvi ...

  6. AngularJS 之iOS 移动 APP 混合开发(原生+JS)

    Ionic 简介 Ionic框架是什么 Ionic 是目前最有潜力的一款 HTML5 手机应用开发框架.通过 SASS 构建应用程序,它 提供了很多 UI 组件来帮助开发者开发强大的应用. 它使用 J ...

  7. Vue+原生App混合开发手记#1

    项目的大致需求就是做一个App,里面集成各种功能供用户使用,其中涉及到很多Vue的使用方法,单独总结太麻烦,所以通过这几篇笔记来梳理一下.原型图如下: 路由配置 主界面会用到一些原生App方法,比如验 ...

  8. vue app混合开发蓝牙串口连接(报错java.io.IOException: read failed, socket might closed or timeout, read ret: -1;at android.bluetooth.BluetoothSocket.connect at js/BluetoothTool.js:329)

    我使用的uni-app <template> <view class="bluetooth"> <!-- 发送数据 --> <view c ...

  9. odoo开发 相关知识点

    (1)导入模块可以起别名: (2) 新的模型前端要调用显示有关联的另一个模型的相关字段 (3) 传递上下文 搜索视图打开默认按照接收的参数搜索显示: 发起端视图 上下文写法: 目标端 触发显示,搜索视 ...

随机推荐

  1. [AlwaysOn Availability Groups]AlwaysOn Ring Buffers

    AlwaysOn Ring Buffers 一些AlwaysOn的诊断信息可以从SQL Server ring buffers.或者从sys.dm_os_ring_buffers.ring buffe ...

  2. Java中@Override的作用

    @Override是伪代码,表示重写(当然不写也可以),不过写上有如下好处: 1.可以当注释用,方便阅读:2.编译器可以给你验证@Override下面的方法名是否是你父类中所有的,如果没有则报错.例如 ...

  3. Android开发学习之路-RecyclerView的Item自定义动画及DefaultItemAnimator源码分析

    这是关于RecyclerView的第二篇,说的是如何自定义Item动画,但是请注意,本文不包含动画的具体实现方法,只是告诉大家如何去自定义动画,如何去参考源代码. 我们知道,RecyclerView默 ...

  4. iOS网络

    iOS开发系列--网络开发 2014-10-22 08:34 by KenshinCui, 1253 阅读, 19 评论, 收藏,  编辑 概览 大部分应用程序都或多或少会牵扯到网络开发,例如说新浪微 ...

  5. oracle之时间格式的应用

    ${,""," and rs.count_date >= '"+start_date+"'||' 00:00:00'")} ${,&q ...

  6. 随机法解决TSP问题

    TSP问题一直是个头疼的问题,但是解决的方法数不胜数,很多的算法也都能解决.百度资料一大堆,但是我找到了代码比较简练的一种.随机法.下面只是个人的看法而已,如果有任何问题虚心接受. 顾名思义,随机法就 ...

  7. vba读文本如果文本文件太大会提示错误!

    Sub 文本文件太大会提示错误() Dim TT, p Open "I:\xxxxx\yyyzz.txt" For Input As #1       '读取txt文件 Do Wh ...

  8. java多线程(2)---生命周期、线程通讯

    java生命周期.线程通讯 一.生命周期 有关线程生命周期就要看下面这张图,围绕这张图讲解它的方法的含义,和不同方法间的区别.    1.yield()方法 yield()让当前正在运行的线程回到就绪 ...

  9. WinForm 自动完成控件实例代码简析

    在Web的应用方面有js的插件实现自动完成(或叫智能提示)功能,但在WinForm窗体应用方面就没那么好了. TextBox控件本身是提供了一个自动提示功能,只要用上这三个属性: AutoComple ...

  10. 从Maven仓库中导出jar包

    从Maven仓库中导出jar包:进入工程pom.xml 所在的目录下,输入以下命令:mvn dependency:copy-dependencies -DoutputDirectory=lib更简单的 ...