weex-怎么定义全局方法

简介: weex-怎么定义全局方法

博主是做iOS的,所以定义全局方法的是很了解了,有很多种方法吧可以来做,比如,扩展,单例,pch等,但是关于weex怎么来做一个全局的方法来方便引入呢?下面就来进行说明:


1.建立你的weex项目,这个不用多说了吧,实在不会的,去weex官网看吧;


2.新建一个js文件:


我们叫function.js吧,然后在里面写入你的方法:

export function getUrl(bundleUrl,fileName,dir,host){
    var nativeBase;
    var isAndroidAssets = bundleUrl.indexOf('file://assets/') >= 0;
    var isiOSAssets = bundleUrl.indexOf('file:///') >= 0 && bundleUrl.indexOf('WeexDemo.app') > 0;
    if (isAndroidAssets) {
        nativeBase = 'file://assets/';
    }
    else if (isiOSAssets) {
        nativeBase = bundleUrl.substring(0, bundleUrl.lastIndexOf('/') + 1);
    }
    else {
        host = host||'localhost:8081';
        var matches = /\/\/([^\/]+?)\//.exec(bundleUrl);
        if (matches && matches.length >= 2) {
            host = matches[1];
        }
        nativeBase = 'http://' + host + '/' + dir + '/';
    }
    var h5Base = './index.html?page=./' + dir + '/';
    // in Native
    var base = nativeBase;
    if (typeof window === 'object') {
        base = h5Base;
    }
    return base+fileName;
}

如果你需要多个方法怎么办?没关系,继续往里面添加,按照上面的格式:

export function 方法名1(参数){
}
export function 方法名2(参数){
}
export function 方法名3(参数){
}

是不是很简单呢?


3.使用,方法写好了,怎么来用呢:


在你用的地方,js里面,像引入文件一样直接引入方法名:

<script>
  import {getUrl} from "./function";  //这里的路径不同的位置可能存在差异,你懂的哦
</script>

然后在使用的时候,比如我要做一个本地的跳转:

bigAction(index){
        console.log('will jump')
        navigator.push({
          url: getUrl(weex.config.bundleUrl,'homeBig.js'),
          animated: "true"
        }, event => {
          modal.toast({ message: 'callback: ' + event })
        })
      },

直接用名字即可,缺点是每次用的时候都要引入,要想类似iOS中pch的效果博主还没有找到,如果知道了会再更新,欢迎知道的小伙伴留言。

目录
相关文章
|
移动开发 weex API
weex在iOS环境加载本地图片的方法
weex在iOS环境加载本地图片的方法
145 0
weex在iOS环境加载本地图片的方法
|
2月前
|
移动开发 前端开发 JavaScript
探究移动端混合开发技术:React Native、Weex、Flutter的比较与选择
移动端混合开发技术在移动应用开发领域日益流行,为开发者提供了更高效的跨平台开发方案。本文将比较三种主流混合开发技术:React Native、Weex和Flutter,从性能、生态系统和开发体验等方面进行评估,以帮助开发者在选择适合自己项目的技术时做出明智的决策。
158 2
|
2月前
|
移动开发 前端开发 weex
移动端混合开发技术:React Native、Weex、Flutter 之争
在移动应用开发领域,React Native、Weex 和 Flutter 是备受关注的混合开发技术。本文将对它们进行全面比较与评估,以帮助开发者做出明智的选择。我们将从开发生态、性能、跨平台能力和易用性等方面进行比较,为读者提供全面的参考和指导。
|
2月前
|
移动开发 Dart 前端开发
移动端混合开发技术:React Native、Weex、Flutter的比较与选择
移动应用的开发已经成为现代社会中的重要一环。本文将比较并评估三种主流的移动端混合开发技术:React Native、Weex和Flutter。通过对它们的特点、优势和劣势的分析,帮助开发者在选择适合自己项目的技术方案时做出明智的决策。
|
2月前
|
移动开发 开发框架 前端开发
移动端混合开发技术探析:React Native、Weex、Flutter的比较与选择
随着移动应用开发的高速发展,混合开发技术成为了一种备受关注的选择。本文将对移动端混合开发技术中的React Native、Weex和Flutter进行比较与探讨,分析它们在性能、开发体验、生态系统和跨平台支持等方面的差异,以及如何根据项目需求进行选择。
112 1
|
移动开发 JSON JavaScript
weex开发 - VS Code解除格式警告
weex开发 - VS Code解除格式警告
85 0
weex开发 - VS Code解除格式警告
|
移动开发 JavaScript weex
weex开发- 无法找到模块“weex-vue-render”的声明文件。引入vue报错,无法找到引入的vue模块
weex开发- 无法找到模块“weex-vue-render”的声明文件。引入vue报错,无法找到引入的vue模块
270 0
weex开发- 无法找到模块“weex-vue-render”的声明文件。引入vue报错,无法找到引入的vue模块
|
weex-ui 移动开发 JavaScript
weex开发-使用weex-ui绑定事件源注意事项
weex开发-使用weex-ui绑定事件源注意事项
124 0
|
移动开发 JavaScript weex
weex开发 - 方法的映射,在weex调用fetch方法,实际调用同名的原生方法,在回调中把数据传递回js
weex开发 - 方法的映射,在weex调用fetch方法,实际调用同名的原生方法,在回调中把数据传递回js
179 0
|
移动开发 编解码 weex
weex开发 - 加载index.js崩溃,白屏(may it has been destroyed so method:fireEvent is ignored,Url must be passe)
weex开发 - 加载index.js崩溃,白屏(may it has been destroyed so method:fireEvent is ignored,Url must be passe)
289 0