微信小程序引用公共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 相关文章推荐
33种Javascript 表格排序控件收集
Dec 03 Javascript
几个有趣的Javascript Hack
Jul 24 Javascript
JS获取后台Cookies值的小例子
Mar 04 Javascript
纯文字版返回顶端的js代码
Aug 01 Javascript
JavaScript实现梯形乘法表的方法
Apr 25 Javascript
详解jQuery Mobile自定义标签
Jan 06 Javascript
JavaScript代码实现图片循环滚动效果
Mar 19 Javascript
jQuery实现打开页面渐现效果示例
Jul 27 Javascript
vue上传图片组件编写代码
Jul 26 Javascript
小程序云函数调用API接口的方法
May 17 Javascript
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
vue实践---vue不依赖外部资源实现简单多语操作
Sep 21 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类的反射用法实例
2014/11/03 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
js 字符串转化成数字的代码
2011/06/29 Javascript
基于jquery的大众点评,分类导航实现代码
2011/08/23 Javascript
用js判断输入是否为中文的函数
2014/03/10 Javascript
javascript实现数组中的内容随机输出
2015/08/11 Javascript
js实现音乐播放控制条
2017/09/09 Javascript
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
原生JS进行前后端同构
2018/04/22 Javascript
解决vue中修改export default中脚本报一大堆错的问题
2018/08/27 Javascript
如何获取vue单文件自身源码路径
2019/05/06 Javascript
原生js实现each方法实例代码详解
2019/05/27 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
2020/05/13 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
微信小程序实现购物车小功能
2020/12/30 Javascript
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
Python中分数的相关使用教程
2015/03/30 Python
python中map、any、all函数用法分析
2015/04/21 Python
python中子类调用父类函数的方法示例
2017/08/18 Python
python实现requests发送/上传多个文件的示例
2018/06/04 Python
Linux下远程连接Jupyter+pyspark部署教程
2019/06/21 Python
python实现门限回归方式
2020/02/29 Python
Python把图片转化为pdf代码实例
2020/07/28 Python
让你相见恨晚的十个Python骚操作
2020/11/18 Python
全球知名提供各类营养保健品的零售商:Vitamin Shoppe
2016/10/09 全球购物
S’well Bottle保温杯官网:绝缘不锈钢水瓶
2018/05/09 全球购物
作为网站管理者应当如何防范XSS
2014/08/16 面试题
庆元旦迎新年广播稿
2014/02/18 职场文书
教师新年寄语
2014/04/03 职场文书
政府班子四风问题整改措施
2014/10/04 职场文书
结婚典礼主持词
2015/06/29 职场文书
《秋天的图画》教学反思
2016/02/19 职场文书
责任书格式
2019/04/18 职场文书
Linux中sftp常用命令整理
2022/06/28 Servers