Vue界面中关于APP端回调方法问题
在混合开发中,HTML界面经常性的需要调用APP端提供的原生方法,而且在很多时候,APP端需要各种回调,如果将所有的回调方法写在内部,不是很方便,而且有些时候,APP端需要定义一些主动触发HTML界面的方法,此时就会出现一个略坑的问题:
如果将该方法写在vue methods内,当APP主动去触发这些方法时,就会发现无法获取到这些方法,导致出错!
针对这个回调问题,在询问了一些同事之后找到问题所在:在APP端主动触发HTML方法的时候,会到window下面去查找该方法,但是如果将方法设置到methods中,就会导致APP端找不到该方法,调用失败,解决方法如下:
将方法定义到window下,代码如下:
// 将方法绑定到window下面,提供给外部调用
mounted(){
window['rightFunctionName'] = () => {
this.getRule(); //回调方法需要执行的代码
/*代码块*/
}
},
采用这种定义方式即可解决APP端调用问题
Vue界面中关于APP端回调方法问题的更多相关文章
- Vue.js中组件传参的方法 - 基于webpack模板
在Vuejs中, 组件之间的传参是今天第一次接触, 之前写的组件互相之间都是独立的, 弗敢专也, 必以分人 环境: node.js npm vue-cli 以上安装请自行百度 一.项目创建 $ vue ...
- vue项目中禁止移动端双击放大,双手拉大放大的方法
在vue打包后生成的dist目录文件下下面有index.html 打开里面 把原来的这个 <meta name=viewport content="width=device-width ...
- vue组件中—bus总线事件回调函数多次执行的问题
在利用vue组件进行事件监听时发现,如果对N个vue组件实例的bus总线绑定同一事件的回调函数,触发任意组件的对应事件,回调函数至少会被执行N次,这是为什么呢? 为此,调研了普通对象的事件绑定和触发实 ...
- Vue开发中的移动端适配(px转换成vw)
1.项目根目录下,创建 .postcssrc.js 文件. 2.安装插件. -D (开发依赖) postcss-import postcss-url cssnano-preset-advanced - ...
- 在vue项目中MD5加密的使用方法
1:安装 npm install --save js-md5 2.引入及使用 方法一:在需要的项目文件中引入 import md5 from 'js-md5'; 使用例子:md5('hello wor ...
- axios在vue项目中的一种封装方法
记录下之前领导封装的axios请求 npm install axios // 安装 单独写个文件配置axios,此处为request.js import axios from 'axios' //自定 ...
- vue项目中使用百度地图的方法
1.在百度地图申请密钥: http://lbsyun.baidu.com/ 将 <script type="text/javascript" src="http: ...
- vue项目中h5移动端中通过flex布局实现首尾固定,中间滚动(借鉴)
html中 <div class="flexLayoutr"> <div class="div_head"></div> & ...
- vue项目中总结用到的方法。
依赖 vue-router 获得当前字符串,对应当前路由的路径,总是解析为绝对路径. computed: { productIcon () { return this.imgMap[this.$rou ...
随机推荐
- context.xml文件配置
<?xml version='1.0' encoding='utf-8'?> <Context> <WatchedResource>WEB-INF/web.xml& ...
- [转帖]年经贴: ARM将为苹果开发高性能CPU核心 取代笔记本x86处理器?
ARM将为苹果开发高性能CPU核心 取代笔记本x86处理器? https://www.cnbeta.com/articles/tech/899421.htm . 之前苹果的哥们说过 谁特别在意自己的软 ...
- 请求部署在 IIS7.5 上的 REST 服务的 Put/Post/Delete 操作发生 HTTP Error 405.0 - Method Not Allowed 错误之解决
背景 请求部署在 IIS7.5 上的 REST 服务的 Put/POST/DELETE 操作发生 HTTP Error 405.0 - Method Not Allowed 错误. Issue 解决 ...
- oracle安装内核参数设置
安装oracle内核参数说明及设置 kernel.shmmax 说明: Linux进程可以分配的单独共享内存段的最大值(byte) 64位的linux操作系统,设置应该大于SGA_MAX_TARGET ...
- PowerBuilder学习笔记之3应用对象
教材地址:https://wenku.baidu.com/view/49121fdb6f1aff00bed51e05.html?sxts=1565760465744 3.1.1什么是应用对象(Appl ...
- error: snap "eclipse" has "install-snap" change in progress
在Ubuntu 18.04使用snap安装eclipse软件报时错: inuxidc@linuxidc:~$ snap install --classic eclipse error: snap &q ...
- layer.open自定义弹出位置
fixed:false,设置top才有效,待测试. 这个设置不起作用 var img = "<img src=\"/_temp/qrcodenet/m/book/book20 ...
- Visual Web Developer 2012安裝教程
1.打开网页链接http://www.w3school.com.cn/aspnet/mvc_intro.asp 点击Visual Web Developer 2012进行安装安装平台(WebPlatf ...
- 今天还是python游戏
话不多说,上源码: import random, pygame, sys from pygame.locals import * FPS = 30 # frames per second, the g ...
- Android利用系统原生BottomNavigationView实现底部导航
<android.support.design.widget.BottomNavigationView android:id="@+id/navigation" androi ...