微信小程序引用公共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模拟JQuery的show与hide动画函数代码
Sep 20 Javascript
JS实现关键字搜索时的相关下拉字段效果
Aug 05 Javascript
javascript实现列表滚动的方法
Jul 30 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
Mar 02 Javascript
Javascript 动态改变imput type属性
Nov 01 Javascript
JavaScript编写一个贪吃蛇游戏
Mar 09 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
Jul 26 Javascript
vue轮播图插件vue-awesome-swiper
Nov 27 Javascript
ES6 中可以提升幸福度的小功能
Aug 06 Javascript
webpack@v4升级踩坑(小结)
Oct 08 Javascript
关于Node.js中频繁修改代码重启服务器的问题
Oct 15 Javascript
详细聊聊浏览器是如何看闭包的
Nov 11 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
MySQL中create table语句的基本语法是
2007/01/15 PHP
php获取服务器端mac和客户端mac的地址支持WIN/LINUX
2014/05/15 PHP
基于jQuery的仿flash的广告轮播代码
2010/11/04 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
2014/08/04 Javascript
jquery Validation表单验证使用详解
2020/09/12 Javascript
javascript中attachEvent用法实例分析
2015/05/14 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
2015/07/27 Javascript
高效的jquery数字滚动特效
2015/12/17 Javascript
jQuery实现进度条效果代码
2015/12/17 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
2016/08/11 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
2016/08/25 Javascript
jquery实现放大镜简洁代码(推荐)
2017/06/08 jQuery
Node.js  REPL (交互式解释器)实例详解
2017/08/06 Javascript
Jquery高级应用Deferred对象原理及使用实例
2020/05/28 jQuery
JS pushlet XMLAdapter适配器用法案例解析
2020/10/16 Javascript
Vue+Element-U实现分页显示效果
2020/11/15 Javascript
JavaScript中跨域问题的深入理解
2021/03/04 Javascript
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
python脚本实现xls(xlsx)转成csv
2016/04/10 Python
Python callable()函数用法实例分析
2018/03/17 Python
pandas通过loc生成新的列方法
2018/11/28 Python
python 通过文件夹导入包的操作
2020/06/01 Python
HTML5 Canvas实现烟花绽放特效
2016/03/02 HTML / CSS
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
宝拉珍选澳大利亚官方购物网站:Paula’s Choice澳大利亚
2016/09/13 全球购物
精致的手工皮鞋:Shoe Embassy
2019/11/08 全球购物
.net工程师笔试题
2012/06/09 面试题
十一个高级MySql面试题
2014/10/06 面试题
工作交流会欢迎词
2014/01/12 职场文书
联谊活动策划书
2014/01/26 职场文书
计算机数据库专业职业生涯规划书
2014/02/08 职场文书
学生会宣传部部长竞选演讲稿
2014/04/25 职场文书
税务干部个人整改措施思想汇报
2014/10/10 职场文书
商务邀请函
2015/01/30 职场文书
电影雷锋观后感
2015/06/10 职场文书
MySQL系列之八 MySQL服务器变量
2021/07/02 MySQL