微信小程序引用公共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定时机制
Oct 29 Javascript
javascript textarea光标定位方法(兼容IE和FF)
Mar 12 Javascript
Javascript算符的优先级介绍
Mar 20 Javascript
实例讲解JS中数组Array的操作方法
May 09 Javascript
node.js中的fs.mkdir方法使用说明
Dec 17 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
Jan 28 Javascript
JavaScript汉诺塔问题解决方法
Apr 21 Javascript
vue中的provide/inject的学习使用
May 09 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
Sep 13 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
Feb 12 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
Apr 23 Javascript
详解elementUI中input框无法输入的问题
Apr 27 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实现小写金额转换大写金额的代码(精确到分)
2012/01/10 PHP
PHP中Http协议post请求参数
2015/11/02 PHP
thinkPHP+phpexcel实现excel报表输出功能示例
2017/06/06 PHP
详解Laravel5.6 Passport实现Api接口认证
2018/07/27 PHP
tp5修改(实现即点即改)
2019/10/18 PHP
yii2.0框架多模型操作示例【添加/修改/删除】
2020/04/13 PHP
PHP安全之register_globals的on和off的区别
2020/07/23 PHP
jQuery 改变CSS样式基础代码
2010/02/11 Javascript
javascript中日期转换成时间戳的小例子
2013/03/21 Javascript
js通过地址栏给action传值(中文乱码全是问号)
2013/05/02 Javascript
juery框架写的弹窗效果适合新手
2013/11/27 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
2014/08/30 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
2014/10/14 Javascript
JavaScript计时器示例分析
2015/02/05 Javascript
简单介绍JavaScript的变量和数据类型
2015/06/03 Javascript
jquery.pagination.js分页使用教程
2018/10/23 jQuery
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
2018/11/02 Javascript
浅谈vux之x-input使用以及源码解读
2018/11/04 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
2019/08/06 Javascript
[02:35]DOTA2英雄基础教程 狙击手
2014/01/14 DOTA
[00:31]DOTA2上海特级锦标赛 Fnatic战队宣传片
2016/03/04 DOTA
在Python中使用dict和set方法的教程
2015/04/27 Python
Python删除空文件和空文件夹的方法
2015/07/14 Python
python 请求服务器的实现代码(http请求和https请求)
2018/05/25 Python
Python实现栈和队列的简单操作方法示例
2019/11/29 Python
利用HTML5 Canvas API绘制矩形的超级攻略
2016/03/21 HTML / CSS
详解canvas绘图时遇到的跨域问题
2018/03/22 HTML / CSS
俄罗斯极限运动网上商店:Board Shop №1
2020/12/18 全球购物
JAVA程序员面试题
2012/10/03 面试题
工商管理专业实习大学生自我鉴定
2013/09/19 职场文书
《问银河》教学反思
2014/02/19 职场文书
制作部班长职位说明书
2014/02/26 职场文书
化学教育专业自荐信
2014/07/04 职场文书
乡村教师党员四风问题对照检查材料思想汇报
2014/10/08 职场文书
2014年会计主管工作总结
2014/12/20 职场文书
Python爬虫进阶之Beautiful Soup库详解
2021/04/29 Python