微信小程序提取公用函数到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 RadioButtonList获取选中值
Apr 09 Javascript
JavaScript高级程序设计 客户端存储学习笔记
Sep 10 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
Jun 26 Javascript
常用js字符串判断方法整理
Oct 18 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
May 16 Javascript
JavaScript实现斗地主游戏的思路
Feb 29 Javascript
jQuery实现手机上输入后隐藏键盘功能
Jan 04 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
May 03 Javascript
JS集合set类的实现与使用方法示例
Feb 01 Javascript
layui 弹出层回调获取弹出层数据的例子
Sep 02 Javascript
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
vue中的可拖拽宽度div的实现示例
Apr 08 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
超强分页类2.0发布,支持自定义风格,默认4种显示模式
2007/01/02 PHP
四个PHP非常实用的功能
2015/09/29 PHP
php使用ftp远程上传文件类(完美解决主从文件同步问题的方法)
2016/09/23 PHP
PHP 无限级分类
2017/05/04 PHP
thinkPHP框架中layer.js的封装与使用方法示例
2019/01/18 PHP
PDO::setAttribute讲解
2019/01/29 PHP
主页面中的两个iframe实现鼠标拖动改变其大小
2013/04/16 Javascript
window.print打印指定div指定网页指定区域的方法
2014/08/04 Javascript
jQuery自定义添加"$"与解决"$"冲突的方法
2015/01/19 Javascript
js自定义回调函数
2015/12/13 Javascript
剖析Node.js异步编程中的回调与代码设计模式
2016/02/16 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
2017/05/11 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
2019/09/24 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
Nodejs 微信小程序消息推送的实现
2021/01/20 NodeJs
[02:12]2015国际邀请赛 SHOWOPEN
2015/08/05 DOTA
[48:38]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs Secret
2018/03/31 DOTA
[59:44]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 paiN vs iG
2018/03/31 DOTA
[01:04:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第二场 1月31日
2021/03/11 DOTA
使用python BeautifulSoup库抓取58手机维修信息
2013/11/21 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
python requests包的request()函数中的参数-params和data的区别介绍
2020/05/05 Python
基于Python第三方插件实现西游记章节标注汉语拼音的方法
2020/05/22 Python
Pycharm中如何关掉python console
2020/10/27 Python
Python3.9.1中使用match方法详解
2021/02/08 Python
使用HTML5拍照示例代码
2013/08/06 HTML / CSS
html5开发之viewport使用
2013/10/17 HTML / CSS
Wallis官网:英国女装零售商
2020/01/21 全球购物
C++的几个面试题附答案
2016/08/03 面试题
武汉瑞得软件笔试题
2015/10/27 面试题
学校介绍信范文
2014/01/14 职场文书
社团招新策划书
2014/02/04 职场文书
营销总监岗位职责范本
2014/02/26 职场文书
2014年督导工作总结
2014/11/19 职场文书
写给导师的自荐信
2015/03/06 职场文书
JS前端使用canvas实现扩展物体类和事件派发
2022/08/05 Javascript