微信小程序提取公用函数到util.js及使用方法示例

2024-07-30 04:41:00

本文实例讲述了微信小程序提取公用函数到util.js及使用方法。分享给大家供大家参考，具体如下：

在小程序中，定义了一项工具文件utils,此文件的js旨在本文件之内有效，当其他子页面想调用其中的js方法或者变量时，需要两步骤：

1：在utils被调用的js文件中，面向对象的方式模型输出：

module.exports={要调用的函数名称：要调用的函数名称 };

2：在要调用的js文件中模块化引入utils的js文件

var object=require("utils被调用的js文件地址")

可以输出一下object就能看到被调用的方法了；

例子如下：

utils中被调用的js：

var URl='http://123.23.169';
 var getImageurl=function(imageurl){
  return URl+imageurl;
 }
 // 要引用这个文件的函数或者变量，除了在要引用的的js文件中模块化之外（var utils=require('js地址')），
 // 在被引用的的js中要通过 module.exports={a:a}作为面向对象的变量输出函数如下：
 module.exports={
  URl:URl,//要引用的函数 xx:xx
  getImageurl:getImageurl
}

要调用的js文件：

// 获得工具utils工具js里面函数,先模块化引用utils里面的js地址 reqiure('js地址')成一个面向对象
var utils=require('../../utils/app.js')
// console.log(utils) 可查看获得的函数
console.log(utils.getImageurl('iamgeaaddress.png'))

输出结果：

补充：工具库的创建与使用

创建一个common文件夹

在common文件夹中创建一个utils文件夹

在utils文件夹中创建util.js

// 工具
function tool() {
  console.log('i am a tool function.');
}
module.exports = {
  tool: tool
}

在具体的页面js中调用

首先要引入工具文件

const util = require('../../common/utils/util');

然后在具体的位置使用即可。

onLoad: function (options) {
  util.tool();
  ...
}

i am a tool function.

这有点像，php中的common.php，里面有很多通用的函数库。其实，不论是前端，还是后端。一些思想都是相通的。

希望本文所述对大家微信小程序开发有所帮助。

微信小程序使用第三方库Underscore.js步骤详解

前言 Underscore.js是一个很精干的库,压缩后只有4KB.Underscore 提供了100多个函数,包括常用的:map.filter.invoke - 当然还有更多专业的辅助函数,如:函数绑定.JavaScript 模板功能.创建快速索引.强类型相等测试等等.弥补了标准库的不足,大大方便了JavaScript的编程. 微信小程序无法直接使用require( 'underscore.js' )进行调用. 微信小程序模块化机制微信小程序运行环境支持CommoJS模块化,通过module
微信小程序登录session的使用

获取微信小程序登录的session,整个过程如下: 第一步:小程序取得要往服务端传的 js_code App({ onLaunch: function() { wx.login({ success: function(res) { if (res.code) { //TODO } else { console.log('获取用户登录态失败!' + res.errMsg) } } }); } }) 第二步:服务器接收js_code,然后调用微信接口验证,获取session_key 接口调用地址:h
微信小程序富文本渲染引擎的详解

微信小程序富文本渲染引擎的详解步骤把 wxParser 目录放到小程序项目的根目录下在需要富文本解析的 WXML 内引入 wxParser/index.wxml 在页面 JS 文件内使用 wxParser.parse(options) 方法解析 HTML 内容在小程序项目根目录的 app.wxss 内引入 wxParser 的默认样式库 wxParser.parse(options) 方法的 options 参数说明参数名类型必填描述 bind String 是要绑定的数据名称
activemq整合springboot使用方法(个人微信小程序用)

主题 ActiveMQ Spring Boot 小程序开发 1.引入依赖 <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>1.5.3.RELEASE</version> <relativePath /> <!-- lookup
微信小程序富文本转文本实例详解

微信小程序-富文本转文本最近小程序这么火,我也来搞搞.发现了一个恶心的问题.小程序没有组件能支持富文本内容的,改接口又不太合适,于是有了这问,没技术含量纯粹记录首先我们看眼没有被格式的富文本显示: *.wxml内代码.content是富文本内容 <view> <text>{{content}}</text> </view> 显示结果: 由以上图片看到,小程序无法解析html文件我们需要处理html富文本内容,让其显示好看点下面直接上代码了,主要功能就
微信小程序整合使用富文本编辑器的方法详解

本文实例讲述了微信小程序整合使用富文本编辑器的方法.分享给大家供大家参考,具体如下: 使用WxParse插件实现小程序的富文本显示 ,下载地址:富文本插件WxParse 具体使用步骤: 1. 复制插件文件夹到项目根目录,emojis是表情包,可选择性删除 2. 在.js文件中引入WxParse模块 var WxParse= require('../../../wxParse/wxParse.js'); 3. 在.wxss文件中引入WxParse.wxss样式,也可以在app.wxss中引入 @i
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器

在获取富文本后,又只要显示部分内容,需要去除富文本标签,然后再截取其中一部分内容:然后就是过滤器,在微信小程序中使用还是挺多次的,在vue及react中也遇到过 1.富文本去除html标签去除html标签及空格 let richText = ' <p style="font-size: 25px;color: white"> sdaflsjf的丰富及饿哦塞尔</p><span>dsfjlie</span>'; /* 去除富
微信小程序使用第三方库Immutable.js实例详解

前言 Immutable JS 提供一个惰性 Sequence,允许高效的队列方法链,类似 map 和 filter ,不用创建中间代表.immutable 通过惰性队列和哈希映射提供 Sequence, Range, Repeat, Map, OrderedMap, Set 和一个稀疏 Vector. 微信小程序无法直接使用require( 'immutable.js' )进行调用,需要对下载的Immutable代码进行修改,才能使用. 原因分析 Immutable使用了UMD模块化规范 (f
基于Vue实现微信小程序的图文编辑器

由于微信小程序不能使用常规的图文编辑器(比如百度的UEditor )编辑新闻内容之类的,所以用vue写了个针对小程序用的图文编辑器.效果如下多图上传图片用到了 ajaxfileupload.js (不知道哪位仁兄写的,拿来用了,很好用) 最终形成一串Json数据(转成字符串,传入后台存入数据库,小程序端用JSON.parse 转成JSON ,按照后台一样的方式渲染即可[小程序端代码还没写,后面再贴出来吧]) json格式如 [{"mytype":1,"content&qu
微信小程序使用腾讯地图SDK详解及实现步骤

微信小程序使用腾讯地图SDK详解及实现步骤近期在做一款彩票服务类项目中用到了腾讯地图提供的小程序解决方案,拿来给大家分享一下! 使用起来非常简单,就是一些功能还有待完善. 官方文档:http://lbs.qq.com/qqmap_wx_jssdk/index.html 步骤: 申请开发者密钥(key):申请密匙下载微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.0 安全域名设置,需要在微信公众平台添加域名地址https://apis.map.qq.com
微信小程序实现富文本图片宽度自适应的方法

引言:在微信小程序里,比如商品展示页面的商品详情会有图片展示,PC端设置的商品详情是PC端的宽度,所以在小程序里图片会显示不全,这时就应该做相应的处理,使小程序里图片显示正确思路把图片的宽度改为手机屏幕对应的宽度微信小程序需要知道的知识需要知道微信小程序里有自己的宽度标准,单位为rpx: 针对所有不同尺寸的浏览器,微信小程序里规定屏幕宽为750rpx: 解决 WXML <view class='html_detail'> <rich-text nodes='{{artical}}

微信小程序提取公用函数到util.js及使用方法示例

相关推荐

随机推荐