微信小程序引用公共js里的方法的实例详解


Posted in Javascript onAugust 17, 2017

微信小程序引用公共js里的方法的实例详解

一个小程序页面由四个文件组成,一个小程序页面的四个文件具有相同路径与文件名,由此我们可知一个小程序页面对应着一个跟页面同名的js文件。可是当有些公共方法,我们想抽离出来成为一个独立公共的js文件。我们该如何实现呢。

微信小程序引用公共js里的方法的实例详解

在根目录下有一个app.js文件。这个根目录的js 文件我们可以通过getApp()轻松调用。

//app.js

App({
  globaData:'huangenai'
 })
//test.js
var app = getApp();
Page({
 onLoad: function () {
 console.log(app.globaData);
 } 
})

在开发者工具的 Console可以看到

微信小程序引用公共js里的方法的实例详解

 那么当一些通用的公共方法我们抽出来,在根目录下有个utils文件夹(没有的话新建),里面util.js(没有的话新建)在这里我们可以将通用的方法写在这。

util.js

//正则判断
function Regular(str, reg) {
 if (reg.test(str))
  return true;
 return false;
}

//是否为中文
function IsChinese(str) {
 var reg = /^[\u0391-\uFFE5]+$/;
 return Regular(str, reg);
}
//去左右空格;
function trim(s){
  return s.replace(/(^\s*)|(\s*$)/g, "");
}

//最下面一定要加上你自定义的方法(作用:将模块接口暴露出来),否则会报错:util.trim is not a function;
module.exports = {
IsChinese: IsChinese,
trim: trim
}
//test.js

var util = require('../../utils/util.js');
Page({
  onLoad: function () {
  console.log("判断是否为中文:"+util.IsChinese('测试'));
  console.log("去除左右空格:" + util.trim(s));
  }
})

在开发者工具的 Console可以看到

微信小程序引用公共js里的方法的实例详解

注意了,在util.js里的 Regular()方法,我们不可以这样调用util.Regular(),因为我们没有用 module.exports 来暴露模块接口

如果直接 调用则会出现这样的错误

thirdScriptError
util.Regular is not a function;at "pages/test/test" page lifeCycleMethod onLoad function
TypeError: util.Regular is not a function

以上就是微信小程序引用公共js里的方法的实例详解,如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
JavaScript 中的replace方法说明
Apr 13 Javascript
JS网络游戏-(模拟城市webgame)提供的一些例子下载
Oct 14 Javascript
jQuery $.each的用法说明
Mar 22 Javascript
ExtJS4 组件化编程,动态加载,面向对象,Direct
May 12 Javascript
jQuery图片预加载 等比缩放实现代码
Oct 04 Javascript
Js与下拉列表处理问题解决
Feb 13 Javascript
JavaScript如何获取数组最大值和最小值
Nov 18 Javascript
jQuery实现复制到粘贴板功能
Feb 11 Javascript
JS中使用正则表达式g模式和非g模式的区别
Apr 01 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
May 10 Javascript
微信小程序获取用户信息并保存登录状态详解
May 10 Javascript
详解如何在Javascript和Sass之间共享变量
Nov 13 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
Aug 17 #Javascript
史上最全JavaScript数组去重的十种方法(推荐)
Aug 17 #Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
Aug 17 #Javascript
Javascript中的getter和setter初识
Aug 17 #Javascript
简单实现js进度条加载效果
Mar 25 #Javascript
你可能不知道的JSON.stringify()详解
Aug 17 #Javascript
vue组件Prop传递数据的实现示例
Aug 17 #Javascript
You might like
PHP图片上传类带图片显示
2006/11/25 PHP
PHP生成网页快照 不用COM不用扩展.
2010/02/11 PHP
三种php连接access数据库方法
2013/11/11 PHP
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
php目录遍历函数opendir用法实例
2014/11/20 PHP
修改Laravel5.3中的路由文件与路径
2016/08/10 PHP
php常用日期时间函数实例小结
2019/07/04 PHP
javascript 数组的方法集合
2008/06/05 Javascript
JavaScript 精粹读书笔记(1,2)
2010/02/07 Javascript
JavaScript小技巧 2.5 则
2010/09/12 Javascript
js中各浏览器中鼠标按键值的差异
2011/04/07 Javascript
jquery做的一个简单的屏幕锁定提示框
2014/03/26 Javascript
jQuery取id有.的值的方法
2014/05/21 Javascript
JavaScript严格模式禁用With语句的原因
2014/10/20 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
2015/08/26 Javascript
javascript 解决浏览器不支持的问题
2016/09/24 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
2018/09/12 Javascript
vue+element 实现商城主题开发的示例代码
2020/03/26 Javascript
[43:51]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS Secret
2018/03/31 DOTA
python实现下载指定网址所有图片的方法
2015/08/08 Python
Python微信库:itchat的用法详解
2017/08/14 Python
python中copy()与deepcopy()的区别小结
2018/08/03 Python
python numpy数组的索引和切片的操作方法
2018/10/20 Python
浅谈python实现Google翻译PDF,解决换行的问题
2018/11/28 Python
python3 实现验证码图片切割的方法
2018/12/07 Python
Python 多线程搜索txt文件的内容,并写入搜到的内容(Lock)方法
2019/08/23 Python
对Tensorflow中tensorboard日志的生成与显示详解
2020/02/04 Python
150行python代码实现贪吃蛇游戏
2020/04/24 Python
python 如何快速复制序列
2020/09/07 Python
如何利用CSS3制作3D效果文字具体实现样式
2013/05/02 HTML / CSS
PHP中如何使用Cookie
2015/10/28 面试题
爱国卫生月活动总结范文
2014/04/25 职场文书
超市商业计划书
2014/05/04 职场文书
大学生心理健康活动总结
2015/05/08 职场文书
《我和小伙伴》教学反思
2016/02/20 职场文书
如何利用Matlab制作一款真正的拼图小游戏
2021/05/11 Python