微信小程序提取公用函数到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 相关文章推荐
JS是否可以跨文件同时控制多个iframe页面的应用技巧
Dec 16 Javascript
VBS通过WMI监视注册表变动的代码
Oct 27 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
Mar 10 Javascript
Node.js实现数据推送
Apr 14 Javascript
JS实现的自定义水平滚动字体插件完整实例
Jun 17 Javascript
js获取当前周、上一周、下一周日期
Mar 19 Javascript
jq checkbox 的全选并ajax传参的实例
Apr 01 Javascript
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
基于mpvue的小程序项目搭建的步骤
May 22 Javascript
js实现图片3D轮播效果
Sep 21 Javascript
分享JS表单验证源码(带错误提示及密码等级)
Jan 05 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
Oct 19 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
Yii中使用PHPExcel导出Excel的方法
2014/12/26 PHP
smarty内置函数section的用法
2015/01/22 PHP
php+Ajax处理xml与json格式数据的方法示例
2019/03/04 PHP
PHP语言对接抖音快手小红书视频/图片去水印API接口源码
2020/08/11 PHP
JavaScript 动态将数字金额转化为中文大写金额
2009/05/14 Javascript
JavaScript 封装Ajax传递的数据代码
2009/06/05 Javascript
JavaScript SetInterval与setTimeout使用方法详解
2013/11/15 Javascript
js 设置缓存及获取设置的缓存
2014/05/08 Javascript
js中的for如何实现foreach中的遍历
2014/05/31 Javascript
jquery序列化表单以及回调函数的使用示例
2014/07/02 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
基于模板引擎Jade的应用(详解)
2017/12/12 Javascript
webpack4 CSS Tree Shaking的使用
2018/09/03 Javascript
element-ui 上传图片后清空图片显示的实例
2018/09/04 Javascript
小程序实现授权登陆的解决方案
2018/12/02 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
2020/02/24 Javascript
layui使用及简单的三级联动实现教程
2020/12/01 Javascript
Python格式化压缩后的JS文件的方法
2015/03/05 Python
python模块导入的细节详解
2018/12/10 Python
Python如何获得百度统计API的数据并发送邮件示例代码
2019/01/27 Python
对python读取zip压缩文件里面的csv数据实例详解
2019/02/08 Python
python变量的存储原理详解
2019/07/10 Python
Python解析json时提示“string indices must be integers”问题解决方法
2019/07/31 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
django formset实现数据表的批量操作的示例代码
2019/12/06 Python
python删除某个目录文件夹的方法
2020/05/26 Python
python mysql中in参数化说明
2020/06/05 Python
Python代码执行时间测量模块timeit用法解析
2020/07/01 Python
加拿大国民体育购物网站:National Sports
2018/11/04 全球购物
玛蒂尔达简服装:Matilda Jane Clothing
2019/02/13 全球购物
C++:局部变量能否和全局变量重名
2014/03/03 面试题
师生聚会感言
2014/01/26 职场文书
暑假学习心得体会
2014/09/02 职场文书
党的群众路线教育实践活动组织生活会发言材料
2014/10/17 职场文书
2015年银行员工工作总结
2015/04/24 职场文书
详解JS WebSocket断开原因和心跳机制
2021/05/07 Javascript