微信小程序提取公用函数到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 相关文章推荐
jscript之List Excel Color Values
Jun 13 Javascript
jquery实现更改表格行顺序示例
Apr 30 Javascript
基于豆瓣API+Angular开发的web App
Jan 02 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
May 09 Javascript
url传递的参数值中包含&时,url自动截断问题的解决方法
Aug 02 Javascript
功能强大的Bootstrap效果展示(二)
Aug 03 Javascript
对js中回调函数的一些看法
Aug 29 Javascript
jQuery中fadein与fadeout方法用法示例
Sep 16 Javascript
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
JS中跳出循环的示例代码
Sep 14 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
Dec 29 Javascript
jsonp跨域获取数据的基础教程
Jul 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 session实现多级目录存放实现代码
2016/02/03 PHP
laravel框架上传图片实现实时预览功能
2019/10/14 PHP
phpstudy2020搭建站点的实现示例
2020/10/30 PHP
JQuery打造PHP的AJAX表单提交实例
2009/11/03 Javascript
jquery 常用操作方法
2010/01/28 Javascript
vs2003 js文件编码问题的解决方法
2010/03/20 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
2014/04/23 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
2015/01/21 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
2017/02/06 Javascript
Bootstrap 模态框(Modal)带参数传值实例
2017/08/20 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
JavaScript实现的鼠标跟随特效示例【2则实例】
2018/12/22 Javascript
[01:23]一分钟告诉你 DOTA2为什么叫信仰2
2014/06/20 DOTA
[01:31:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第二场 1月10日
2021/03/11 DOTA
Python通过属性手段实现只允许调用一次的示例讲解
2018/04/21 Python
django输出html内容的实例
2018/05/27 Python
Django 多语言教程的实现(i18n)
2018/07/07 Python
Flask之pipenv虚拟环境的实现
2019/11/26 Python
实现Python与STM32通信方式
2019/12/18 Python
PyCharm使用Docker镜像搭建Python开发环境
2019/12/26 Python
Pytorch 计算误判率,计算准确率,计算召回率的例子
2020/01/18 Python
Python实现序列化及csv文件读取
2020/01/19 Python
python GUI库图形界面开发之PyQt5滚动条控件QScrollBar详细使用方法与实例
2020/03/06 Python
Python reversed函数及使用方法解析
2020/03/17 Python
Anaconda3中的Jupyter notebook添加目录插件的实现
2020/05/18 Python
Pytorch 使用opnecv读入图像由HWC转为BCHW格式方式
2020/06/02 Python
Django 用户认证Auth组件的使用
2020/11/30 Python
详解HTML5中的picture元素响应式处理图片
2018/01/03 HTML / CSS
Right-on官方网站:日本知名的休闲服装品牌
2019/07/12 全球购物
经理秘书求职自荐信范文
2014/03/23 职场文书
2014年三万活动总结
2014/04/26 职场文书
尊老爱幼演讲稿
2014/09/04 职场文书
2015年党员个人剖析材料
2014/12/18 职场文书
Django 如何实现文件上传下载
2021/04/08 Python
Python办公自动化之教你如何用Python将任意文件转为PDF格式
2021/06/28 Python