微信小程序引用公共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 remove 自定义数组删除方法
Oct 20 Javascript
Javascript自定义排序 node运行 实例
Jun 05 Javascript
jquery插件开发之实现jquery手风琴功能分享
Mar 10 Javascript
jQuery文件上传插件Uploadify使用指南
Jun 05 Javascript
javascript截取字符串小结
Apr 28 Javascript
在JavaScript中处理字符串之link()方法的使用
Jun 08 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
Aug 30 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
Nov 04 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
Jan 21 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
Dec 22 Javascript
微信小程序实现banner图轮播效果
Jun 28 Javascript
浅谈Vue中render中的h箭头函数
Nov 07 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
Linux下实现PHP多进程的方法分享
2012/08/16 PHP
ThinkPHP之foreach标签使用概述
2014/06/30 PHP
php将字符串全部转换成大写或者小写的方法
2015/03/17 PHP
Yii2第三方类库插件Imagine的安装和使用
2017/07/06 PHP
thinkphp5.1框架实现格式化mysql时间戳为日期的方式小结
2019/10/10 PHP
Yii框架学习笔记之应用组件操作示例
2019/11/13 PHP
Prototype Selector对象学习
2009/07/23 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
2012/09/02 Javascript
jquery 添加节点的几种方法介绍
2013/09/04 Javascript
js操作模态窗口及父子窗口间相互传值示例
2014/06/09 Javascript
jQuery插件zepto.js简单实现tab切换
2015/06/16 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
2015/08/18 Javascript
java必学必会之static关键字
2015/12/03 Javascript
你一定会收藏的Nodejs代码片段
2016/02/04 NodeJs
深入nodejs中流(stream)的理解
2017/03/27 NodeJs
js实现图片加载淡入淡出效果
2017/04/07 Javascript
Three.js基础学习教程
2017/11/16 Javascript
vue+axios+element ui 实现全局loading加载示例
2018/09/11 Javascript
vue通过cookie获取用户登录信息的思路详解
2018/10/30 Javascript
Antd表格滚动 宽度自适应 不换行的实例
2020/10/27 Javascript
python爬虫之百度API调用方法
2017/06/11 Python
详解如何设置Python环境变量?
2019/05/13 Python
Python2.7版os.path.isdir中文路径返回false的解决方法
2019/06/21 Python
给大家整理了19个pythonic的编程习惯(小结)
2019/09/25 Python
使用turtle绘制五角星、分形树
2019/10/06 Python
Python 解决火狐浏览器不弹出下载框直接下载的问题
2020/03/09 Python
Python 如何测试文件是否存在
2020/07/31 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
python利用google翻译方法实例(翻译字幕文件)
2020/09/21 Python
ZWILLING双立人法国网上商店:德国刀具锅具厨具品牌
2019/08/28 全球购物
楼面部长岗位职责范本
2014/02/14 职场文书
党课知识竞赛主持词
2014/04/01 职场文书
技术比武方案
2014/05/19 职场文书
村支部书记群众路线对照检查材料思想汇报
2014/10/08 职场文书
2017元旦、春节期间廉洁自律承诺书
2016/03/25 职场文书
PHP控制循环操作的时间
2021/04/01 PHP