微信小程序提取公用函数到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 相关文章推荐
Javasipt:操作radio标签详解
Dec 30 Javascript
二叉树的非递归后序遍历算法实例详解
Feb 07 Javascript
从零学jquery之如何使用回调函数
May 16 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
Feb 26 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
Apr 18 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
Oct 15 Javascript
Jquery树插件zTree实现菜单树
Jan 24 Javascript
Vue实战之vue登录验证的实现代码
Oct 31 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
Aug 06 Javascript
微信小程序methods中定义的方法互相调用的实例代码
Aug 07 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
Jul 18 Javascript
Layui弹出层 加载 做编辑页面的方法
Sep 16 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
MYSQL数据库初学者使用指南
2006/11/16 PHP
php中OR与|| AND与&&的区别总结
2013/10/26 PHP
php中用memcached实现页面防刷新功能
2014/08/19 PHP
浅析PHP中Session可能会引起并发问题
2015/07/23 PHP
JavaScript与DOM组合动态创建表格实例
2012/12/23 Javascript
js数组依据下标删除元素
2015/04/14 Javascript
JS实现简单的图书馆享元模式实例
2015/06/30 Javascript
Bootstrap每天必学之表单
2015/11/23 Javascript
BootStrap tooltip提示框使用小结
2016/10/26 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
2017/02/21 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
2017/04/19 Javascript
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
解决vue路由后界面没有变化,但是链接有的问题
2018/09/01 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
2019/12/10 Javascript
element跨分页操作选择详解
2020/06/29 Javascript
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
浅谈插入排序算法在Python程序中的实现及简单改进
2016/05/04 Python
Django项目中model的数据处理以及页面交互方法
2018/05/30 Python
python去除文件中重复的行实例
2018/06/29 Python
python调用百度地图WEB服务API获取地点对应坐标值
2019/01/16 Python
Flask框架踩坑之ajax跨域请求实现
2019/02/22 Python
python判断两个序列的成员是否一样的实例代码
2020/03/01 Python
解决matplotlib.pyplot在Jupyter notebook中不显示图像问题
2020/04/22 Python
keras处理欠拟合和过拟合的实例讲解
2020/05/25 Python
Python引入多个模块及包的概念过程解析
2020/09/21 Python
Python调用飞书发送消息的示例
2020/11/10 Python
python分布式爬虫中消息队列知识点详解
2020/11/26 Python
英国领先的狗和宠物美容专家:Christies Direct
2017/04/03 全球购物
大专生工程监理求职信
2013/10/04 职场文书
申报职称专业技术个人的自我评价
2013/12/12 职场文书
转党组织关系介绍信
2014/01/08 职场文书
大学总结自我鉴定
2014/01/18 职场文书
本科生导师推荐信范文
2014/05/18 职场文书
四风对照检查材料思想汇报
2014/09/20 职场文书
职业生涯规划书之大学四年
2019/08/07 职场文书