微信小程序提取公用函数到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 相关文章推荐
使用Json比用string返回数据更友好,也更面向对象一些
Sep 13 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
Apr 18 Javascript
php is_numberic函数造成的SQL注入漏洞
Mar 10 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
jquery实现删除一个元素后面的所有元素功能
Dec 21 Javascript
浅谈jQuery before和insertBefore的区别
Dec 04 Javascript
Canvas放置反弹效果随机图形(实例)
Aug 17 Javascript
基于Vue实现图书管理功能
Oct 17 Javascript
JavaScript惰性求值的一种实现方法示例
Jan 11 Javascript
深入解析koa之异步回调处理
Jun 17 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
Mar 08 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
Oct 01 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
PHP个人网站架设连环讲(二)
2006/10/09 PHP
php和mysql中uft-8中文编码乱码的几种解决办法
2012/04/19 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
JavaScript判断两种格式的输入日期的正确性的代码
2007/03/25 Javascript
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
jQuery 开发者应该注意的9个错误
2012/05/03 Javascript
JS获取并操作iframe中元素的方法
2013/03/21 Javascript
A标签中通过href和onclick传递的this对象实现思路
2013/04/19 Javascript
JavaScript表单通过正则表达式验证电话号码
2014/03/14 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
2015/10/25 Javascript
详解获取jq ul第一个li定位的四种解决方案
2016/11/23 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
2017/04/23 jQuery
vue-cli+webpack在生成的项目中使用bootstrap实例代码
2017/05/26 Javascript
Form表单上传文件(type="file")的使用
2017/08/03 Javascript
vue中遇到的坑之变化检测问题(数组相关)
2017/10/13 Javascript
使用vux实现上拉刷新功能遇到的坑
2018/02/08 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
2019/10/31 Javascript
微信小程序实现底部弹出模态框
2020/11/18 Javascript
python实现360皮肤按钮控件示例
2014/02/21 Python
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
Python使用设计模式中的责任链模式与迭代器模式的示例
2016/03/02 Python
Python中安装easy_install的方法
2018/11/18 Python
python获取网络图片方法及整理过程详解
2019/12/20 Python
pytorch实现对输入超过三通道的数据进行训练
2020/01/15 Python
Pandas缺失值2种处理方式代码实例
2020/06/13 Python
html5 postMessage解决跨域、跨窗口消息传递方案
2016/12/20 HTML / CSS
俄罗斯购买自行车网站:Vamvelosiped
2021/01/29 全球购物
傲盾软件面试题
2015/08/17 面试题
秘书岗位职责
2013/11/18 职场文书
综合素质自我评价评语
2015/03/06 职场文书
捐款仪式主持词
2015/07/04 职场文书
2015年民兵整组工作总结
2015/07/24 职场文书
apache基于端口创建虚拟主机的示例
2021/04/22 Servers
图文详解nginx日志切割的实现
2022/01/18 Servers
手写Spirit防抖函数underscore和节流函数lodash
2022/03/22 Javascript
python中 Flask Web 表单的使用方法
2022/05/20 Python