微信小程序引用公共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 相关文章推荐
jquery高效反选具体实现
May 05 Javascript
怎么选择Javascript框架(Javascript Framework)
Nov 22 Javascript
jQuery选择器源码解读(二):select方法
Mar 31 Javascript
详解JavaScript的while循环的使用
Jun 03 Javascript
纯javascript实现分页(两种方法)
Aug 26 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
Jul 04 Javascript
Node.js实现兼容IE789的文件上传进度条
Sep 02 Javascript
input输入密码变黑点密文的实现方法
Jan 09 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
Sep 13 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 Javascript
vue瀑布流组件实现上拉加载更多
Mar 10 Javascript
echarts实现晶体球面投影的实例教程
Oct 10 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
星际争霸任务指南——虫族
2020/03/04 星际争霸
建立动态的WML站点(一)
2006/10/09 PHP
实用函数3
2007/11/08 PHP
使用php判断服务器是否支持Gzip压缩功能
2013/09/24 PHP
php获取淘宝分类id示例
2014/01/16 PHP
PHP中echo,print_r与var_dump区别分析
2014/09/29 PHP
php准确获取文件MIME类型的方法
2015/06/17 PHP
JS延迟加载(setTimeout) JS最后加载
2010/07/15 Javascript
基于Jquery的动态创建DOM元素的代码
2010/12/28 Javascript
JavaScript中的私有/静态属性介绍
2012/07/26 Javascript
nodejs教程之异步I/O
2014/11/21 NodeJs
JavaScript字符串删除重复字符的方法
2015/12/25 Javascript
javascript事件委托的用法及其好处简析
2016/04/04 Javascript
表单中单选框添加选项和移除选项
2016/07/04 Javascript
详解AngularJS如何实现跨域请求
2016/08/22 Javascript
JavaScript实现三级联动菜单实例代码
2017/06/26 Javascript
详解jQuery中关于Ajax的几个常用的函数
2017/07/17 jQuery
JS实现显示当前日期的实例代码
2018/07/03 Javascript
[01:33]真香警告!DOTA2勇士令状不朽珍藏Ⅱ饰品欣赏
2018/06/26 DOTA
Python中请使用isinstance()判断变量类型
2014/08/25 Python
python实现textrank关键词提取
2018/06/22 Python
tensorflow实现二维平面模拟三维数据教程
2020/02/11 Python
解决pycharm每次打开项目都需要配置解释器和安装库问题
2020/02/26 Python
Python3实现打印任意宽度的菱形代码
2020/04/12 Python
python 从list中随机取值的方法
2020/11/16 Python
世界上最大的家庭自动化公司:Smarthome
2017/12/20 全球购物
美国婴儿和儿童服装购物网站:PatPat
2020/10/01 全球购物
电子技术专业中专生的自我评价
2013/12/17 职场文书
餐厅考勤管理制度
2014/01/28 职场文书
《王二小》教学反思
2014/02/27 职场文书
关于梦想的演讲稿
2014/05/05 职场文书
业务员工作态度散漫检讨书
2014/11/02 职场文书
歌剧魅影观后感
2015/06/05 职场文书
sqlserver2017共享功能目录路径不可改的解决方法
2021/04/16 SQL Server
golang 实现Location跳转方式
2021/05/02 Golang
详解Python中__new__方法的作用
2022/03/31 Python