微信小程序提取公用函数到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 相关文章推荐
关于javascript event flow 的一个bug详解
Sep 17 Javascript
javascript感应鼠标图片透明度显示的方法
Feb 24 Javascript
js获取当前日期时间及其它操作汇总
Apr 17 Javascript
浅谈javascript中replace()方法
Nov 10 Javascript
原生JS实现旋转木马式图片轮播插件
Apr 25 Javascript
VUE element-ui 写个复用Table组件的示例代码
Nov 18 Javascript
深入理解js A*寻路算法原理与具体实现过程
Dec 13 Javascript
基于vue.js实现购物车
Jan 15 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
May 11 Javascript
js实现轮播图特效
May 28 Javascript
JavaScrip如果基于url实现图片下载
Jul 03 Javascript
vue 动态创建组件的两种方法
Dec 31 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的无限分类实现想法~
2007/01/02 PHP
微信公众平台开发教程⑤ 微信扫码支付模式介绍
2019/04/10 PHP
建议大家看下JavaScript重要知识更新
2007/07/08 Javascript
javascript比较文档位置
2008/04/08 Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
2010/01/31 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
2012/11/08 Javascript
javascript实现验证身份证号的有效性并提示
2015/04/30 Javascript
Jquery Easyui日历组件Calender使用详解(23)
2016/12/18 Javascript
Vue+mui实现图片的本地缓存示例代码
2018/05/24 Javascript
Vue中插入HTML代码的方法
2018/09/21 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
2019/05/28 Javascript
JavaScript创建表格的方法
2020/04/13 Javascript
javascript 代码是如何被压缩的示例代码
2020/05/06 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
2020/12/01 Javascript
Python isinstance判断对象类型
2008/09/06 Python
Python中input和raw_input的一点区别
2014/10/21 Python
浅谈python for循环的巧妙运用(迭代、列表生成式)
2017/09/26 Python
tensorflow saver 保存和恢复指定 tensor的实例讲解
2018/07/26 Python
利用nohup来开启python文件的方法
2019/01/14 Python
Python批量修改图片分辨率的实例代码
2019/07/04 Python
PHP统计代码行数的小代码
2019/09/19 Python
销售业务实习自我鉴定
2013/09/23 职场文书
四年大学自我鉴定
2014/02/17 职场文书
小组口号大全
2014/06/09 职场文书
关于读书的演讲稿800字
2014/08/27 职场文书
大三学生学年自我鉴定
2014/09/12 职场文书
领导班子对照检查材料
2014/09/22 职场文书
小班下学期幼儿评语
2014/12/30 职场文书
学生上课迟到检讨书
2015/01/01 职场文书
六一文艺汇演开幕词
2015/01/29 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
2015年助理工程师工作总结
2015/04/03 职场文书
2015年纪念“卢沟桥事变”78周年活动方案
2015/05/06 职场文书
呼兰河传读书笔记
2015/06/30 职场文书
公安忠诚教育心得体会
2016/01/23 职场文书