微信小程序引用公共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 1.8 Release版本发布了
Aug 14 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
Jun 18 Javascript
文本框只能选择数据到文本框禁止手动输入
Nov 22 Javascript
$(document).ready(function() {})不执行初始化脚本
Jun 19 Javascript
jQuery中innerHeight()方法用法实例
Jan 19 Javascript
跟我学习javascript的最新标准ES6
Nov 20 Javascript
XMLHttpRequest Level 2 使用指南
Aug 26 Javascript
JS简单去除数组中重复项的方法
Sep 13 Javascript
老生常谈javascript中逻辑运算符&&和||的返回值问题
Apr 13 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
Nov 27 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
Jun 22 Javascript
Vue与Node.js通过socket.io通信的示例代码
Jul 25 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设计模式 Builder(建造者模式)
2011/06/26 PHP
php中获取远程客户端的真实ip地址的方法
2011/08/03 PHP
探讨PHP中OO之静态关键字以及类常量的详解
2013/06/07 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
PHP+swoole+linux实现系统监控和性能优化操作示例
2019/04/15 PHP
fromCharCode和charCodeAt 方法
2006/12/27 Javascript
Jquery实战_读书笔记2 选择器
2010/01/22 Javascript
编写可维护面向对象的JavaScript代码[翻译]
2011/02/12 Javascript
JavaScript打开word文档的实现代码(c#)
2012/04/16 Javascript
$.getJSON在IE下失效的原因分析及解决方法
2013/06/16 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
2015/08/08 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
2015/08/15 Javascript
js实现select下拉框菜单
2015/12/08 Javascript
学习JavaScript设计模式之享元模式
2016/01/18 Javascript
探寻JavaScript中this指针指向
2016/04/23 Javascript
JavaScript字符集编码与解码详谈
2017/02/02 Javascript
nodejs个人博客开发第三步 载入页面
2017/04/12 NodeJs
详解Node.js利用node-git-server快速搭建git服务器
2017/09/27 Javascript
原生JS控制多个滚动条同步跟随滚动效果
2017/12/22 Javascript
微信小程序分享海报生成的实现方法
2018/12/10 Javascript
[02:23]2014DOTA2国际邀请赛中国战队回顾
2014/08/01 DOTA
[01:10]DOTA2英雄背景故事第四期之混沌法则混沌骑士
2020/07/16 DOTA
Python实现感知器模型、两层神经网络
2017/12/19 Python
python实现用户管理系统
2018/01/10 Python
django搭建项目配置环境和创建表过程详解
2019/07/22 Python
python matplotlib模块基本图形绘制方法小结【直线,曲线,直方图,饼图等】
2020/04/26 Python
Python gevent协程切换实现详解
2020/09/14 Python
css3 按钮样式简单可扩展创建
2013/03/18 HTML / CSS
5分钟弄清楚html5的drag and drop(小结)
2019/04/10 HTML / CSS
长曲棍球装备:Lacrosse Monkey
2020/12/02 全球购物
《蜗牛的奖杯》教后反思
2014/04/24 职场文书
服务承诺书范文
2014/05/19 职场文书
自荐信格式模板
2015/03/27 职场文书
2016暑期师德培训心得体会
2016/01/09 职场文书
2016年读书月活动总结范文
2016/04/06 职场文书
Python实现拼音转换
2021/06/07 Python