微信小程序引用公共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 相关文章推荐
自适应高度框架 ----属个人收藏内容
Jan 22 Javascript
在网站上应该用的30个jQuery插件整理
Nov 03 Javascript
jquery+easeing实现仿flash的载入动画
Mar 10 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
May 04 Javascript
javascript比较两个日期相差天数的方法
Jul 23 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
Oct 14 Javascript
Bootstrap使用基础教程详解
Sep 05 Javascript
JS实现的样式切换功能tableCSS实例
Dec 30 Javascript
vue.js获得当前元素的文字信息方法
Mar 09 Javascript
微信小程序使用swiper组件实现类3D轮播图
Aug 29 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
Sep 26 Javascript
vue如何获取自定义元素属性参数值的方法
May 14 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
php自动加载机制的深入分析
2013/06/08 PHP
php统计时间和内存使用情况示例分享
2014/03/13 PHP
php异步:在php中使用fsockopen curl实现类似异步处理的功能方法
2016/12/10 PHP
JScript中的"this"关键字使用方式补充材料
2007/03/08 Javascript
JQuery魔力之$("tagName")与selector
2012/03/05 Javascript
js使用eval解析json(js中使用json)
2014/01/17 Javascript
js实现仿爱微网两级导航菜单效果代码
2015/08/31 Javascript
早该知道的7个JavaScript技巧
2016/06/21 Javascript
详解JS去重及字符串奇数位小写转大写
2016/12/29 Javascript
JQuery和HTML5 Canvas实现弹幕效果
2017/01/04 Javascript
JS获得多个同name 的input输入框的值的实现方法
2017/01/09 Javascript
bootstrap下拉菜单使用方法解析
2017/01/13 Javascript
微信小程序 页面之间传参实例详解
2017/01/13 Javascript
Nodejs基于LRU算法实现的缓存处理操作示例
2017/03/17 NodeJs
easyui简介_动力节点Java学院整理
2017/07/14 Javascript
微信小程序自定义多选事件的实现代码
2018/05/17 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
2018/07/21 Javascript
详解webpack2异步加载套路
2018/09/14 Javascript
详解项目升级到vue-cli3的正确姿势
2019/01/28 Javascript
微信小程序与webview交互实现支付功能
2019/06/07 Javascript
python解决网站的反爬虫策略总结
2016/10/26 Python
python 筛选数据集中列中value长度大于20的数据集方法
2018/06/14 Python
pytorch .detach() .detach_() 和 .data用于切断反向传播的实现
2019/12/27 Python
Python实现敏感词过滤的4种方法
2020/09/12 Python
CSS3田字格列表的样式编写方法
2018/11/22 HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
2019/06/03 HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
2013/03/08 HTML / CSS
Bealls Florida百货商店:生活服饰、家居装饰和鞋子
2018/02/23 全球购物
DC Shoes澳大利亚官方网上商店:购买DC鞋子
2019/10/25 全球购物
2014年党员公开承诺践诺书
2014/03/25 职场文书
空气的环保标语
2014/06/12 职场文书
原料仓仓管员岗位职责
2014/07/08 职场文书
2019暑假学生安全口号
2019/06/27 职场文书
基于Redis过期事件实现订单超时取消
2021/05/08 Redis
Win7/8.1用户可以免费升级到Windows 11系统吗?
2021/11/21 数码科技