微信小程序提取公用函数到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 相关文章推荐
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
Oct 13 Javascript
JavaScript中的apply和call函数详解
Jul 20 Javascript
js对象基础实例分析
Jan 13 Javascript
jQuery实现带有洗牌效果的动画分页实例
Aug 31 Javascript
JavaScript中的return语句简单介绍
Dec 07 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
May 09 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
Jun 12 Javascript
Vue.js实战之组件之间的数据传递
Apr 01 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
Nov 12 Javascript
JS中判断字符串存在和非空的方法
Sep 12 Javascript
深入了解query和params的使用区别
Jun 24 Javascript
js实现前端界面导航栏下拉列表
Aug 27 Javascript
浅谈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
桌面中心(三)修改数据库
2006/10/09 PHP
认识并使用PHP超级全局变量
2010/01/26 PHP
php数组函数序列之rsort() - 对数组的元素值进行降序排序
2011/11/02 PHP
php从完整文件路径中分离文件目录和文件名的方法
2015/03/13 PHP
thinkphp3.x中session方法的用法分析
2016/05/20 PHP
让JavaScript和其它资源并发下载的方法
2014/10/16 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
2014/12/18 Javascript
AngularJS学习第一篇 AngularJS基础知识
2017/02/13 Javascript
深入理解vuex2.0 之 modules
2017/11/20 Javascript
nodejs简单实现TCP服务器端和客户端的聊天功能示例
2018/01/04 NodeJs
一秒学会微信小程序制作table表格
2019/02/14 Javascript
layui数据表格重载实现往后台传参
2019/11/15 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
2020/09/21 Javascript
[14:25]教你分分钟做大人:主宰(HEROS)
2014/12/08 DOTA
Python编写生成验证码的脚本的教程
2015/05/04 Python
详解Python的Django框架中manage命令的使用与扩展
2016/04/11 Python
深入了解Python iter() 方法的用法
2019/07/11 Python
Python生命游戏实现原理及过程解析(附源代码)
2019/08/01 Python
Python学习笔记之While循环用法分析
2019/08/14 Python
python 获取当前目录下的文件目录和文件名实例代码详解
2020/03/10 Python
后端开发使用pycharm的技巧(推荐)
2020/03/27 Python
Python代码需要缩进吗
2020/07/01 Python
python写文件时覆盖原来的实例方法
2020/07/22 Python
css3 border-radius属性详解
2017/07/05 HTML / CSS
HTML5 embed标签定义和用法详解
2014/05/09 HTML / CSS
西班牙英格列斯百货法国官网:El Corte Inglés法国
2017/07/09 全球购物
Amara美国站:英国高端家居礼品网站,世界各地的奢侈家具品牌
2017/07/26 全球购物
IGK Hair官网:喷雾、洗发水、护发素等
2020/11/03 全球购物
惠而浦美国官网:Whirlpool.com
2021/01/19 全球购物
四年的大学生生活自我评价
2013/12/09 职场文书
简历里的自我评价
2014/01/31 职场文书
2014年综治宣传月活动总结
2014/04/28 职场文书
公务员爱岗敬业演讲稿
2014/08/26 职场文书
敬老月活动总结
2014/08/28 职场文书
2015年机关作风和效能建设工作总结
2015/07/23 职场文书
描述鲁迅的名言整理,一生受用
2019/08/08 职场文书