微信小程序封装独立公共js，其它页面调用

最新推荐文章于 2025-09-16 16:09:21 发布

原创最新推荐文章于 2025-09-16 16:09:21 发布 · 1.2w 阅读

12 ·

CC 4.0 BY-SA版权

微信小程序专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何在微信小程序中创建一个独立的公共JS文件，将常用功能进行封装，然后在其他页面中方便地进行调用，提高代码复用性和项目维护效率。

//index.js
var common = require("../../js/common.js");
Page({

  /**
   * 页面的初始数据
   */
  data: {
    shidu: "", //湿度
    pm25: 0, //pm2.5
    pm10: 0, //pm10
    quality: "", //空气质量
    wendu: "", //温度
    ganmao: "", //感冒提醒（指数）
    show: false
  },

  btnClick: function() {
    console.log("点击了按钮 " + new Date())
  },
  view1Clcik: function(e) {
    console.log("view1Clcik " + new Date())
    console.log(e);
  },
  view2Clcik: function() {
    console.log("view2Clcik " + new Date())
  },
  view3Clcik: function(e) {
    console.log("view3Clcik " + new Date())
    console.log(e);
  },
  btnQuery: function() {
    var that = this;
    common.queryExp(function(result) {
      console.log(result);
      that.setData({
        shidu: result.shidu, //湿度
        pm25: parseFloat(result.pm25), //pm2.5
        pm10: parseFloat(result.pm10), //pm10
        quality: result.quality, //空气质量
        wendu: result.wendu, //温度
        ganmao: result.ganmao, //感冒提醒（指数）
        show: true
      });
    })
  },
  inputChange: function(e) {
    console.log(e);
  }
})

//common.js 封装的函数
function queryExp(result) {
  wx.request({
    url: 'http://t.weather.sojson.com/api/weather/city/101030100',
    method: 'get',
    data: {},
    success: function (res) {
      var d = res.data.data;
      console.log(d);
      result(d);
    }
  })
}

//转化成小程序模板语言 这一步非常重要 不然无法正确调用
module.exports = {
  queryExp: queryExp
};