首页 >> 牛刀云小程序开发教程 >> 第2篇 开发模式 >> 页面开发 >> 开发JS

14.1.3 自定义JS文件

一个页面逻辑JS文件中定义的JS方法,另一个页面逻辑JS文件也想调用,应该如何实现?答案是:在一个JS文件中加载另一个JS文件,就可以调用另一个JS文件中的方法,如果形成JS文件的循环依赖,就容易产生未知问题,因此,正确的做法是:单独定义一个JS文件,作为公共JS文件,在其中定义JS方法,作为公共JS方法。在需要调用公共方法的页面逻辑JS文件中,加载公共JS文件,调用其中的公共JS方法。

 

1、添加自定义JS文件

在页面制作区的页面栏的“文件”目录下,添加JS文件,例如:pub.js文件。在其中定义JS方法。简单的做法是定义为静态方法,无需实例化,就可以调用。使用export定义对外接口,其它JS文件通过import命令加载这个文件

pub.js文件中定义一个静态方法sayHello,实现在页面上显示Hello。完整代码如下:

export default class PubJS{ 

    static sayHello(){ 

        wx.showToast({

            title: 'Hello',

            icon: 'success',

            duration: 2000

        })

    } 

}

2、加载自定义JS文件

在页面逻辑JS文件中调用其它JS文件中的JS方法,就需要在页面逻辑JS文件中加载要调用的JS文件。使用import在一个文件中加载另一个含有export接口的文件。例如:要在主页中调用pub.js文件中的sayHello方法,就在主页的JS文件中加载pub.js文件。加载时注意两个文件的相对位置。

在“文件”目录下创建的文件和“默认”分组下的文件在同一个目录下。新建的文件如果在其它目录下,可以切换到IDE的目录树,查看两个JS文件的相对位置。

“文件”目录下的pub.js文件和主页的逻辑JS文件index.js在同一目录下,加载的代码是import pubjs from "./pub.js" ,其中pubjs是加载的JS文件的引用名,在调用JS文件中的方法时使用。

 

2、调用自定义JS文件中的方法

    在加载JS文件时,定义了JS文件的引用名,即在当前文件中使用引用名访问加载的JS文件。例如:调用pub.js文件中的sayHello方法的代码是:pubjs.sayHello();

 

    在主页中增加一个按钮,在按钮的单击事件中,调用公共JS文件中的方法的完整代码如下:

import PageImpl from "$UI/wxsys/lib/base/pageImpl";

import pubjs from "./pub.js"

var app = getApp();

export default class IndexPage extends PageImpl {

constructor(...args){/*{{{*/this.comp = require("_comp").default;

this._e= require("_event_").default;/*代码提示的辅助代码}}}*/

        super(...args);

    }

    onButtonTap(event/*{{{*/=this._e.button_tap/*}}}*/){

        pubjs.sayHello();

    }

}