微信小程序引用公共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 相关文章推荐
推荐dojo学习笔记
Mar 24 Javascript
转换json格式的日期为Javascript对象的函数
Jul 13 Javascript
JS随机生成不重复数据的实例方法
Jul 17 Javascript
在子窗口中关闭父窗口的一句代码
Oct 21 Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 Javascript
jquery自适应布局的简单实例
May 28 Javascript
Angular 4 指令快速入门教程
Jun 07 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
Jul 24 Javascript
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
Angular实现下拉框模糊查询功能示例
Jan 03 Javascript
ES6基础之 Promise 对象用法实例详解
Aug 22 Javascript
vue 实现单选框设置默认选中值
Nov 07 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
[FAQ]PHP中的一些常识:类篇
2006/10/09 PHP
8个PHP程序员常用的功能汇总
2014/12/18 PHP
php简单分页类实现方法
2015/02/26 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
PHP简单验证码功能机制实例详解
2019/03/27 PHP
批量实现面向对象的实例代码
2013/07/01 Javascript
js 获取radio按钮值的实例
2013/08/17 Javascript
JavaScript的各种常见函数定义方法
2014/09/16 Javascript
DOM基础教程之使用DOM设置文本框
2015/01/20 Javascript
JS代码防止SQL注入的方法(超简单)
2016/04/12 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
2016/06/20 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
react开发教程之React 组件之间的通信方式
2017/08/12 Javascript
vue实现商城购物车功能
2017/11/27 Javascript
ES6小技巧之代替lodash
2019/06/07 Javascript
JS实现关闭小广告特效
2021/01/29 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
2020/07/20 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
2020/11/11 Javascript
python实现获取客户机上指定文件并传输到服务器的方法
2015/03/16 Python
Django添加feeds功能的示例
2018/08/07 Python
PyQt编程之如何在屏幕中央显示窗体的实例
2019/06/18 Python
对PyQt5中的菜单栏和工具栏实例详解
2019/06/20 Python
Python利用多线程同步锁实现多窗口订票系统(推荐)
2019/12/22 Python
Python如何使用内置库matplotlib绘制折线图
2020/02/24 Python
如何解决pycharm调试报错的问题
2020/08/06 Python
HTML5 本地存储 LocalStorage详解
2016/06/24 HTML / CSS
h5调用摄像头的实现方法
2016/06/01 HTML / CSS
英国领先的高街书籍专家:Waterstones
2018/02/01 全球购物
The North Face北面法国官网:美国著名户外品牌
2019/11/01 全球购物
本科生学习总结的自我评价
2013/10/02 职场文书
年度考核自我鉴定
2014/03/19 职场文书
群众路线对照检查剖析材料
2014/10/09 职场文书
2015建军节87周年演讲稿
2015/03/19 职场文书
Python如何配置环境变量详解
2021/05/18 Python
详解MySql中InnoDB存储引擎中的各种锁
2022/02/12 MySQL
Java实现字符串转为驼峰格式的方法详解
2022/07/07 Java/Android