微信小程序引用公共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 Ajax 学习实例2 向页面发出请求 返回JSon格式数据
Mar 15 Javascript
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
Mar 16 Javascript
图片onload事件触发问题解决方法
Jul 31 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
Oct 23 Javascript
解决JS无法调用Controller问题的方法
Dec 31 Javascript
Javascript继承机制详解
May 30 Javascript
javascript按钮禁用和启用的效果实例代码
Oct 29 Javascript
Node.js使用Express.Router的方法
Nov 14 Javascript
Vue的data、computed、watch源码浅谈
Apr 04 Javascript
JavaScript内置对象之Array的使用小结
May 12 Javascript
vue.js实现h5机器人聊天(测试版)
Jul 16 Javascript
JavaScript控制台的更多功能
Apr 28 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代码优化技巧小结
2015/09/29 PHP
Yii框架模拟组件调用注入示例
2019/11/11 PHP
for 循环性能比较 提高for循环的效率
2009/03/19 Javascript
浅谈tudou土豆网首页图片延迟加载的效果
2010/06/23 Javascript
Document对象内容集合(比较全)
2010/09/06 Javascript
js 与 php 通过json数据进行通讯示例
2014/03/26 Javascript
Javascript遍历table中的元素示例代码
2014/07/08 Javascript
js 操作符汇总
2014/11/08 Javascript
jquery插件qrcode在线生成二维码
2015/04/26 Javascript
AngularJS基础学习笔记之控制器
2015/05/10 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
2016/05/19 Javascript
jQuery1.9+中删除了live以后的替代方法
2016/06/17 Javascript
AngularJs Injecting Services Into Controllers详解
2016/09/02 Javascript
JavaScript实现Java中Map容器的方法
2016/10/09 Javascript
Javascript数组循环遍历之forEach详解
2016/11/07 Javascript
详解springmvc 接收json对象的两种方式
2016/12/06 Javascript
微信小程序模板之分页滑动栏
2017/02/10 Javascript
jQuery滚动监听实现商城楼梯式导航效果
2017/03/06 Javascript
vue裁切预览组件功能的实现步骤
2018/05/04 Javascript
基于Vue-cli快速搭建项目的完整步骤
2018/11/03 Javascript
Echarts实现单条折线可拖拽效果
2019/12/19 Javascript
Vue 简单实现前端权限控制的示例
2020/12/25 Vue.js
[01:22:10]Ti4 循环赛第二日 DK vs Empire
2014/07/11 DOTA
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
[57:55]EG vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python实现京东秒杀功能代码
2019/05/16 Python
基于python3 的百度图片下载器的实现代码
2019/11/05 Python
Python ORM编程基础示例
2020/02/02 Python
了解一下python内建模块collections
2020/09/07 Python
英国著名的小众美容品牌网站:Alyaka
2017/08/08 全球购物
凯伦·米莲女装网上商店:Karen Millen
2017/11/07 全球购物
YOOX台湾:意大利奢侈品电商
2018/10/13 全球购物
大学毕业通用个人的求职信
2013/12/08 职场文书
创业计划书之养殖业
2019/10/11 职场文书
Python控制台输出俄罗斯方块移动和旋转功能
2021/04/18 Python
不要在HTML中滥用div
2021/05/08 HTML / CSS