微信小程序wxs封装使用以及公共js组件封装

wxs封装

wxs可以直接写在wxml页面中，并且在对应的位置调用，比如在{{ xxx.xxx() }}调用wxs的函数


<view><view>第{{m1.getMax(1)}}天</view>
</view><wxs module="m1">var getMax = function(index) {if(index == 1){return '一'} else {return '二'}}module.exports = {getMax : getMax};  // 导出getMax方法
</wxs>

注意
var getMax这个位置只能使用var

封装
1、在小程序的根目录新建一个wxs文件夹，内部新建文件，文件扩展名wxs。这里新建一个getMax.wxs文件举例。
2、在num.wxs文件中写入方法

 var getMax = function(index) {if(index == 1){return '一'} else {return '二'}}module.exports = {getMax : getMax};  // 导出getMax方法

3、在wxml页面中引入

// 在页面中使用 module名.方法名()
<view>第{{getMax.getMax(index + 1)}}天</view>// 引入getMax.wxs
<wxs src="../wxs/getMax.wxs" module="getMax"></wxs>

js公共组件封装

此处演示时间戳转时间的封装：
封装js
新建封装的js

 function timeExChange(time){// 时间戳 let timestamp = timelet date = new Date(parseInt(timestamp)  * 1000 );let Year = date.getFullYear();let Moth = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);let Day = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());let Hour = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());let Minute = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());let Sechond = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());let  GMT =  Year + '-' + Moth + '-' + Day + '   '+ Hour +':'+ Minute  + ':' + Sechond;return GMT}
// 此处要使用微信小程序的模板导出，es6导出会报错
module.exports = {timeExChange: timeExChange
};

页面使用
在需要使用的js中引入

import { timeExChange } from '../TimeExchange/time'let time = timeExChange(1662537367)
console.log(time )  // 2022-09-07 15:56:07

微信小程序wxs封装使用以及公共js组件封装相关推荐

微信小程序引入less并引入公共样式
微信小程序引入less并引入公共样式在原生微信小程序开发中,直接使用wxss来写组件样式是非常麻烦的,它不能进行嵌套书写,也不能声明变量,所以我们经常会引入一些css编译器来辅助我们书写样式,例如l ...
微信小程序把玩（二十七）audio组件
微信小程序把玩(二十七)audio组件原文:微信小程序把玩(二十七)audio组件音频播放已经封装的很好!只需配合属性设置即可! (method和data配合使用) 主要属性: wxml < ...
原生微信小程序，搜索框（search）组件
原生微信小程序,搜索框(search)组件首先创建组件及两个跳转页面,第一个是搜索框所在的页面(首页),第二个是搜索详细页搜索框的本质是:搜索框不是input,而是navigate,跳转到专门的搜 ...
微信小程序的启动和渲染过程(加组件分类和组件的基本使用以及API分类)
文章目录导航路线小程序的启动过程小程序页面渲染的过程小程序中组件的分类有九大类常用的视图容器类组件小程序宿主环境-API 导航路线关于微信小程序知识点一共做了六个博客,涵盖大部分内容,有 ...
微信小程序把玩（十九）radio组件
原文:微信小程序把玩(十九)radio组件 radio组件为单选组件与radio-group组合使用,使用方式和checkbox没啥区别主要属性: wxml <!--设置监听器,当点击radi ...
解决微信小程序textarea层级太高遮挡其他组件的问题
解决微信小程序textarea层级太高遮挡其他组件的问题参考文章: (1)解决微信小程序textarea层级太高遮挡其他组件的问题 (2)https://www.cnblogs.com/pansid ...
微信小程序下拉框插件_微信小程序自定义select下拉选项框组件的实现代码_清玖_前端开发者...
知识点:组件,animation,获取当前点击元素的索引与内容微信小程序中没有select下拉选项框,所以只有自定义.自定义的话,可以选择模板的方式,也可以选择组件的方式来创建. 这次我选择了组件, ...
微信小程序|开发实战篇之六-pagination分页组件
开发实战篇之六前言 1.分页组件pagination 2.pagination代码分析 2.1 wxml骨架文件 2.2 wxss样式 2.3 pagination的逻辑文件前言实战篇内容参考: ...
微信小程序图片上传九宫格拖拽组件
微信小程序图片上传&九宫格拖拽组件前言图片上传加九宫格拖拽是一个比较常用的组件,常用于发帖或者评论等内容上传模块,我这篇九宫格拖拽的思路是借鉴了一款优雅的小程序拖拽排序组件实现这篇文章实 ...

微信小程序wxs封装使用以及公共js组件封装

wxs封装

js公共组件封装

微信小程序wxs封装使用以及公共js组件封装相关推荐

最新文章

热门文章