小程序引用全局js与外部文件的方法

本文主要介绍了在小程序环境中，如何在本作用域下引用全局JS文件、调用全局方法以及使用全局属性。 在小程序开发中，有时我们需要在特定的页面或者组件中使用到全局的JS功能或者数据。以下是实现这一目标的步骤： ### 一、引用其他JS文件 1. 首先创建一个名为`common.js`的公共JS文件，并编写我们需要的函数，例如`myfunc`： ```javascript function myfunc() { console.log("myfunc..."); } module.exports.myfunc = myfunc; // 暴露接口以便其他文件引用 ``` 2. 在需要使用`common.js`的页面JS文件中，通过`require`引入该文件： ```javascript var common = require("../../common.js"); // 引入公共JS文件 ``` 注意，仅仅引入是不够的，还需要在适当的地方调用这些函数，比如在页面的`onLoad`函数中： ```javascript Page({ onLoad: function() { common.myfunc(); // 调用引入的函数 } }); ``` ### 二、在本作用域下调用全局JS 1. 在全局JS文件`app.js`中定义全局方法和属性，如： ```javascript App({ globalData: { appName: "hcoder" }, test: function() { console.log("ok"); } }); ``` 2. 在本地JS文件中，可以通过`getApp()`获取全局应用实例，然后调用其上的方法或访问属性： ```javascript var app = getApp(); this.setData({ version: app.globalData.appName }); // 设置页面数据 ``` ### 三、使用全局属性 微信小程序的`app.js`文件中的`globalData`对象可以用来存储全局的数据。例如，我们可以在`app.js`中定义一个`appName`属性： ```javascript App({ globalData: { appName: "hcoder" } }); ``` 在页面的JS文件中，可以获取并使用这个全局属性： ```javascript onLoad: function() { var app = getApp(); this.setData({ version: app.globalData.appName }); // 更新页面数据，显示全局属性 } ``` 同时，在WXML文件中，可以绑定这个数据来显示： ```html <view>app版本: {{version}}</view> ``` 这样，无论在哪个页面，只要通过`getApp()`获取到全局应用实例，就能访问到`globalData`中的属性。 通过以上方式，开发者可以在小程序的不同文件之间共享代码和数据，提高代码的复用性和可维护性。不过需要注意，全局数据的使用应当谨慎，避免造成数据混乱和性能问题。