微信小程序引用公共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 相关文章推荐
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
Jan 27 Javascript
利用div+jquery自定义滚动条样式的2种方法
Jul 18 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
Mar 18 Javascript
Area 区域实现post提交数据的js写法
Apr 22 Javascript
JS实现仿京东淘宝竖排二级导航
Dec 08 Javascript
jQuery中text() val()和html()的区别实例详解
Jun 28 Javascript
Angular.js中数组操作的方法教程
Jul 31 Javascript
简单理解Vue中的nextTick方法
Jan 30 Javascript
Vue.js进阶知识点总结
Apr 01 Javascript
vue中使用protobuf的过程记录
Oct 26 Javascript
layui实现tab的添加拒绝重复的方法
Sep 04 Javascript
JavaScript中的执行环境和作用域链
Sep 04 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
第九节 绑定 [9]
2006/10/09 PHP
PHP中strpos、strstr和stripos、stristr函数分析
2016/06/11 PHP
php的api数据接口书写实例(推荐)
2016/09/22 PHP
thinkPHP自动验证、自动添加及表单错误问题分析
2016/10/17 PHP
PHP接口类(interface)的定义、特点和应用示例
2020/05/18 PHP
extjs 学习笔记(二) Ext.Element类
2009/10/13 Javascript
javascript 动态修改样式和层叠样式表代码
2010/04/27 Javascript
这些年、我收集的JQuery代码小结
2012/08/01 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
2012/12/02 Javascript
jquery ztree实现下拉树形框使用到了json数据
2014/05/14 Javascript
jQuery中[attribute^=value]选择器用法实例
2014/12/31 Javascript
JavaScript多图片上传案例
2015/09/28 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
2017/01/25 Javascript
Vue.js中的图片引用路径的方式
2017/07/28 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
2017/09/21 Javascript
VUE引入第三方js包及调用方法讲解
2019/03/01 Javascript
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
Python编程之属性和方法实例详解
2015/05/19 Python
详解python中executemany和序列的使用方法
2017/08/12 Python
Python下载网络文本数据到本地内存的四种实现方法示例
2018/02/05 Python
Python爬取YY评级分数并保存数据实现过程解析
2020/06/01 Python
一篇文章带你搞定Ubuntu中打开Pycharm总是卡顿崩溃
2020/11/02 Python
详解Open Folder as PyCharm Project怎么添加的方法
2020/12/29 Python
Jmeter调用Python脚本实现参数互相传递的实现
2021/01/22 Python
日本亚马逊官方网站:Amazon.co.jp
2020/04/14 全球购物
工商管理应届生求职信
2013/10/07 职场文书
趣味体育活动方案
2014/02/08 职场文书
2015年幼儿园毕业感言
2014/02/12 职场文书
《一本男孩子必读的书》教学反思
2014/02/19 职场文书
经典演讲稿汇总
2014/05/19 职场文书
Java 将PPT幻灯片转为HTML文件的实现思路
2021/06/11 Java/Android
解决springboot druid数据库连接失败后一直重连的方法
2022/04/19 Java/Android
2022微信温控新功能上线
2022/05/09 数码科技
SQL SERVER中的流程控制语句
2022/05/25 SQL Server
MySQL存储过程及语法详解
2022/08/05 MySQL