微信小程序引用公共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 相关文章推荐
JSON 入门指南 想了解json的朋友可以看下
Aug 26 Javascript
今天是星期几的4种JS代码写法
Sep 17 Javascript
Bootstrap每天必学之表格
Nov 23 Javascript
Node.js刷新session过期时间的实现方法推荐
May 18 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
May 26 Javascript
jquery实现下拉框左右选择功能
Feb 21 Javascript
Web纯前端“旭日图”实现元素周期表
Mar 10 Javascript
如何解决vue与传统jquery插件冲突
Mar 20 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
Aug 08 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
Jan 12 Javascript
js判断在哪个浏览器打开项目的方法
Jan 21 Javascript
Vue用mixin合并重复代码的实现
Nov 27 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
2019年漫画销量排行榜:鬼灭登顶 海贼单卷制霸 尾田盛赞鬼灭
2020/03/08 日漫
PHP实现文件安全下载
2006/10/09 PHP
PHP新手上路(十一)
2006/10/09 PHP
DISCUZ 分页代码
2007/01/02 PHP
php实现事件监听与触发的方法
2014/11/21 PHP
PHP实现发送邮件的方法(基于简单邮件发送类)
2015/12/17 PHP
PHP利用超级全局变量$_POST来接收表单数据的实例
2016/11/05 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
javascript中万恶的function实例分析
2011/05/25 Javascript
jQuery阻止事件冒泡具体实现
2013/10/11 Javascript
jquery 日期控件datepicker属性详细解析
2013/11/08 Javascript
JsRender for object语法简介
2014/10/31 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
2015/10/25 Javascript
整理Javascript基础语法学习笔记
2015/11/29 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
2016/09/24 Javascript
微信小程序 wxapp画布 canvas详细介绍
2016/10/31 Javascript
手机软键盘弹出时影响布局的解决方法
2016/12/15 Javascript
微信小程序通过api接口将json数据展现到小程序示例
2017/01/20 Javascript
常用的几个JQuery代码片段
2017/03/13 Javascript
深入浅析JSONAPI在PHP中的应用
2017/12/24 Javascript
使用JS判断移动端手机横竖屏状态
2018/07/30 Javascript
通过函数作用域和块级作用域看javascript的作用域链
2018/08/05 Javascript
vue解决弹出蒙层滑动穿透问题的方法
2018/09/22 Javascript
vue里的data要用return返回的原因浅析
2019/05/28 Javascript
vue开发中遇到的问题总结
2020/04/07 Javascript
vue使用axios实现excel文件下载的功能
2020/07/16 Javascript
[14:19]2018年度COSER大赛-完美盛典
2018/12/16 DOTA
python使用xmlrpc实例讲解
2013/12/17 Python
解决Django migrate不能发现app.models的表问题
2019/08/31 Python
Python多线程实现支付模拟请求过程解析
2020/04/21 Python
Python django框架 web端视频加密的实例详解
2020/11/20 Python
Why we need EJB
2016/10/20 面试题
医校毕业生自我鉴定
2014/01/25 职场文书
人力资源主管职责范本
2014/03/05 职场文书
迎国庆横幅标语
2014/10/08 职场文书
8个JS的reduce使用实例和reduce操作方式
2021/10/05 Javascript