微信小程序引用公共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 相关文章推荐
通过event对象的fromElement属性解决热区设置主实体的一个bug
Dec 22 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
Sep 12 Javascript
node.js中的fs.appendFileSync方法使用说明
Dec 17 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
Sep 01 Javascript
JavaScript设计模式经典之工厂模式
Feb 24 Javascript
javascript 中的console.log和弹出窗口alert
Aug 30 Javascript
vue多级多选菜单组件开发
Sep 08 Javascript
vue-cli+webpack记事本项目创建
Apr 01 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
Jul 10 Javascript
微信小程序错误this.setData报错及解决过程
Sep 18 Javascript
Javascript实现鼠标点击冒泡特效
Dec 24 Javascript
JS数组Reduce方法功能与用法实例详解
Apr 29 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
用phpmyadmin更改mysql5.0登录密码
2008/03/25 PHP
CI框架源码阅读,系统常量文件constants.php的配置
2013/02/28 PHP
PHP+iFrame实现页面无需刷新的异步文件上传
2014/09/16 PHP
PHP实现的比较完善的购物车类
2014/12/02 PHP
thinkPHP js文件中U方法不被解析问题的解决方法
2016/12/05 PHP
PHP开发之用微信远程遥控服务器
2018/01/25 PHP
PHPStorm 2020.1 调试 Nodejs的多种方法详解
2020/09/17 NodeJs
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
2010/11/11 Javascript
JavaScript中的6种运算符总结
2014/10/16 Javascript
javascript中if和switch,==和===详解
2015/07/30 Javascript
JavaScript实现的经典文件树菜单效果
2015/09/08 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
2015/09/14 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
2016/12/29 Javascript
js, jQuery实现全选、反选功能
2017/03/08 Javascript
原生js实现选项卡功能
2017/03/08 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
2017/06/08 Javascript
让div运动起来 js实现缓动效果
2017/07/06 Javascript
使用JavaScript实现链表的数据结构的代码
2017/08/02 Javascript
老生常谈javascript的面向对象思想
2017/08/22 Javascript
Node.js笔记之process模块解读
2018/05/31 Javascript
通过函数作用域和块级作用域看javascript的作用域链
2018/08/05 Javascript
微信小程序 image组件遇到的问题
2019/05/28 Javascript
jquery实现垂直手风琴菜单
2020/03/04 jQuery
Python常用内置函数总结
2015/02/08 Python
Python元组 tuple的概念与基本操作详解【定义、创建、访问、计数、推导式等】
2019/10/30 Python
Python函数式编程指南:对生成器全面讲解
2019/11/19 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
python属于解释型语言么
2020/06/15 Python
门卫人员岗位职责
2013/12/24 职场文书
暑期实践思想汇报
2014/01/06 职场文书
中秋节礼品促销方案
2014/02/02 职场文书
学校领导班子成员查摆问题及整改措施
2014/10/28 职场文书
2015年酒店工作总结范文
2015/04/07 职场文书
2019升学宴主持词范本5篇
2019/10/09 职场文书
MySQL数据库必备之条件查询语句
2021/10/15 MySQL
Python实现自动玩连连看的脚本分享
2022/04/04 Python