微信小程序提取公用函数到util.js及使用方法示例


Posted in Javascript onJanuary 10, 2019

本文实例讲述了微信小程序提取公用函数到util.js及使用方法。分享给大家供大家参考,具体如下:

在小程序中,定义了一项工具文件utils,此文件的js旨在本文件之内有效,当其他子页面想调用其中的js方法或者变量时,需要两步骤:

1:在utils被调用的js文件中,面向对象的方式模型输出:

module.exports={要调用的函数名称:要调用的函数名称 };

2:在要调用的js文件中模块化引入utils的js文件

var object=require("utils被调用的js文件地址")

可以输出一下object就能看到被调用的方法了;

例子如下:

utils中被调用的js:

var URl='http://123.23.169';
 var getImageurl=function(imageurl){
  return URl+imageurl;
 }
 // 要引用这个文件的函数或者变量,除了在要引用的的js文件中模块化之外(var utils=require('js地址')),
 // 在被引用的的js中要通过 module.exports={a:a}作为面向对象的变量输出函数如下:
 module.exports={
  URl:URl,//要引用的函数 xx:xx
  getImageurl:getImageurl
}

要调用的js文件:

// 获得工具utils工具js里面函数,先模块化引用utils里面的js地址 reqiure('js地址')成一个面向对象
var utils=require('../../utils/app.js')
// console.log(utils) 可查看获得的函数
console.log(utils.getImageurl('iamgeaaddress.png'))

输出结果:

微信小程序提取公用函数到util.js及使用方法示例

补充:工具库的创建与使用

创建一个common文件夹

在common文件夹中创建一个utils文件夹

在utils文件夹中创建util.js

// 工具
function tool() {
  console.log('i am a tool function.');
}
module.exports = {
  tool: tool
}

在具体的页面js中调用

首先要引入工具文件

const util = require('../../common/utils/util');

然后在具体的位置使用即可。

onLoad: function (options) {
  util.tool();
  ...
}

i am a tool function.

这有点像,php中的common.php,里面有很多通用的函数库。其实,不论是前端,还是后端。一些思想都是相通的。

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
Sample script that displays all of the users in a given SQL Server DB
Jun 16 Javascript
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
Apr 07 Javascript
JavaScript 动态创建VML的方法
Oct 14 Javascript
前端弹出对话框 js实现ajax交互
Sep 09 Javascript
AngularJS自定义指令之复制指令实现方法
May 18 Javascript
在vue项目中引入highcharts图表的方法(详解)
Mar 05 Javascript
VUE重点问题总结
Mar 19 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
Dec 03 Javascript
axios携带cookie配置详解(axios+koa)
Dec 28 Javascript
微信小程序的线程架构【推荐】
May 14 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
May 23 Javascript
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
浅谈JavaScript 代码简洁之道
Jan 09 #Javascript
react组件从搭建脚手架到在npm发布的步骤实现
Jan 09 #Javascript
微信小程序公用参数与公用方法用法示例
Jan 09 #Javascript
微信小程序实现的日期午别医生排班表功能示例
Jan 09 #Javascript
Windows下Node爬虫神器Puppeteer安装记
Jan 09 #Javascript
jQuery简单实现根据日期计算星期几的方法
Jan 09 #jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 #jQuery
You might like
Php Cookie的一个使用注意点
2008/11/08 PHP
建站常用13种PHP开源CMS比较
2009/08/23 PHP
PHP技术开发技巧分享
2010/03/23 PHP
PHP获取和操作配置文件php.ini的几个函数介绍
2013/06/24 PHP
学习php开源项目的源码指南
2014/12/21 PHP
网站被黑的假象--ARP欺骗之页面中加入一段js
2007/05/16 Javascript
利用javascript移动div层-javascript 拖动层
2009/03/22 Javascript
c#和Javascript操作同一json对象的实现代码
2012/01/17 Javascript
表单的焦点顺序tabindex和对应enter键提交
2013/01/04 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
2013/05/13 Javascript
js监听键盘事件示例代码
2013/07/26 Javascript
jquery实现拖拽调整Div大小
2015/01/30 Javascript
小程序点赞收藏功能的实现代码示例
2018/09/07 Javascript
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
[50:02]完美世界DOTA2联赛循环赛 Magma vs IO BO2第一场 11.01
2020/11/02 DOTA
基于python实现微信模板消息
2015/12/21 Python
Python使用Scrapy保存控制台信息到文本解析
2017/12/27 Python
Python的numpy库中将矩阵转换为列表等函数的方法
2018/04/04 Python
Python使用scipy模块实现一维卷积运算示例
2019/09/05 Python
Python从列表推导到zip()函数的5种技巧总结
2019/10/23 Python
Python 程序报错崩溃后如何倒回到崩溃的位置(推荐)
2020/06/23 Python
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
HTML5引入的新数组TypedArray介绍
2012/12/24 HTML / CSS
在canvas上实现元素图片镜像翻转动画效果的方法
2018/03/20 HTML / CSS
法国面料和小百货在线商店:Mondial Tissus
2019/03/23 全球购物
素食餐饮项目创业计划书
2014/02/02 职场文书
社区母亲节活动记录
2014/03/06 职场文书
效能监察建议书
2014/05/19 职场文书
计算机网络专业求职信
2014/06/05 职场文书
幼儿园托班开学寄语(2015秋季)
2015/05/27 职场文书
钢琴师观后感
2015/06/12 职场文书
《圆的周长》教学反思
2016/02/17 职场文书
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android
Lakehouse数据湖并发控制陷阱分析
2022/03/31 Oracle
 Redis 串行生成顺序编码的方法实现
2022/04/03 Redis
python Tkinter模块使用方法详解
2022/04/07 Python