微信小程序引用公共js里的方法-猿码集

1. 引入公共js

在微信小程序中，可以使用App()、Page()等函数来创建小程序，但是小程序的函数库并不完备，我们可能需要用到一些公共的函数，这时我们可以将这些公共函数封装在一个js文件中，然后在需要用到这些函数的页面中引入即可。

我们可以将公共js文件存放在项目根目录下的utils文件夹中，并取名为common.js。

1.1 common.js的代码

function add(x, y) {
  return x + y;
}
function sub(x, y) {
  return x - y;
}
module.exports = {
  add: add,
  sub: sub
}

1.2 在页面中引入common.js

我们可以在需要用到公共函数的页面的js文件中使用require()函数引入common.js文件，并使用其中的函数。

var common = require('../../utils/common.js')
Page({
  data: {
    result: 0
  },
  onLoad: function () {
    var a = 10, b = 5;
    this.setData({
      result: common.add(a, b)
    })
  }
})

上面的代码中，我们在页面加载时调用common.js中的add()函数，并将结果保存在页面的data中，最终将结果显示在页面上。

2. 微信小程序中的组件化

微信小程序中的组件化是指将页面中的某一部分封装成一个组件（Component），以便在其他页面中重复使用。

2.1 创建组件

我们可以使用Component()函数来创建组件，它与Page()函数的使用方法类似。

Component()函数需要传入一个对象作为参数，对象中可以定义组件的属性、方法等。

2.2 组件的引入和使用

在需要使用组件的页面中，可以使用自定义标签来引入组件。自定义标签的名称就是创建组件时的name属性。

例如，我们创建了一个名为my-component的组件，那么在页面中就可以使用<my-component>标签来引入并使用该组件。

2.3 组件中的事件

组件中的事件需要在组件的方法中进行定义，然后在组件中的某个元素上绑定该事件。

例如，我们在组件的方法中定义了一个名为bindMyEvent的事件，在组件的wxml文件中的<button>元素上绑定该事件。

组件中定义事件的代码如下：

Component({
  methods: {
    bindMyEvent: function (event) {
      console.log(event.currentTarget.dataset.mydata)
    }
  }
})

组件中的wxml文件代码如下：


<button bindtap="bindMyEvent" data-mydata="foo">点击我</button>

3. 微信小程序中的模块化

微信小程序中的模块化是指将代码封装在模块中，以便在其他文件中重复使用。

在微信小程序中，一个文件即是一个模块，我们可以在一个模块中使用module.exports将需要导出的函数或变量导出，然后在其他模块中使用require()函数来引入该模块。

下面是一个示例：

3.1 创建模块

我们可以在根目录下的utils文件夹中创建一个名为my-module.js的文件，并在该文件中定义一个名为myModule的模块。

var myVariable = 'hello world';
function myFunction() {
  console.log(myVariable);
}
module.exports = {
  myVariable: myVariable,
  myFunction: myFunction
}

3.2 引入模块

我们可以在其他文件中使用require()函数引入my-module.js文件，并使用其中导出的变量或函数。

var myModule = require('../../utils/my-module.js')
myModule.myFunction(); // 输出'hello world'
console.log(myModule.myVariable); // 输出'hello world'

4. 总结

微信小程序中可以使用公共js、组件和模块化等技术来实现代码的复用和组件化。使用这些技术可以极大地提高代码的可维护性和重用性。

微信小程序引用公共js里的方法