微信小程序引用公共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 相关文章推荐
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
Mar 12 Javascript
070823更新的一个[消息提示框]组件 兼容ie7
Aug 29 Javascript
我遇到的参数传递中 双引号单引号嵌套问题
Feb 11 Javascript
值得分享和收藏的Bootstrap学习教程
May 12 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
Oct 10 Javascript
vuejs父子组件之间数据交互详解
Aug 09 Javascript
vue组件name的作用小结
May 23 Javascript
JS实现前端页面的搜索功能
Jun 12 Javascript
对angularJs中自定义指令replace的属性详解
Oct 09 Javascript
一步步教你利用Docker设置Node.js
Nov 20 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
Dec 14 Vue.js
Vue与React的区别和优势对比
Dec 18 Vue.js
微信小程序中使用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/10/09 PHP
PHP判断指定时间段的2个方法
2014/03/14 PHP
PHP中通过fopen()函数访问远程文件示例
2014/11/18 PHP
php多线程并发实现方法
2016/09/30 PHP
php opendir()列出目录下所有文件的实例代码
2016/10/02 PHP
PHP实现的贪婪算法实例
2017/10/17 PHP
php实现微信公众号企业转账功能
2018/10/01 PHP
php面向对象基础详解【星际争霸游戏案例】
2020/01/23 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
JavaScript对象模型-执行模型
2008/04/28 Javascript
用Javascript评估用户输入密码的强度实现代码
2011/11/30 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
2013/06/28 Javascript
使用js 设置url参数
2013/07/08 Javascript
jquery Tab效果和动态加载的简单实例
2013/12/11 Javascript
javascript获取鼠标点击元素对象(示例代码)
2013/12/20 Javascript
JavaScript模拟实现键盘打字效果
2015/06/29 Javascript
arcgis for js 修改infowindow样式的方法
2016/11/02 Javascript
Node.js安装配置图文教程
2017/05/10 Javascript
bootstrap3-dialog-master模态框使用详解
2017/08/22 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
2019/06/19 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
2020/06/05 Javascript
python实现对一个完整url进行分割的方法
2015/04/29 Python
Python中的lstrip()方法使用简介
2015/05/19 Python
Python使用matplotlib实现在坐标系中画一个矩形的方法
2015/05/20 Python
Python实现简单的语音识别系统
2017/12/13 Python
对python 命令的-u参数详解
2018/12/03 Python
django框架面向对象ORM模型继承用法实例分析
2019/07/29 Python
Python&&GDAL实现NDVI的计算方式
2020/01/09 Python
浅谈keras的深度模型训练过程及结果记录方式
2020/01/24 Python
CSS3打造百度贴吧的3D翻牌效果示例
2017/01/04 HTML / CSS
澳大利亚现代波西米亚风格女装网站:Bohemian Traders
2018/04/16 全球购物
橄榄树药房:OLIVEDA
2019/09/01 全球购物
优秀应届毕业生推荐信
2014/02/18 职场文书
学生社团文化节开幕式主持词
2014/03/28 职场文书
刑事附带民事代理词
2015/05/25 职场文书
中国十大神话动漫电影排行榜 哪吒登顶 白蛇缘起排第七
2022/03/21 国漫