微信小程序 - 样式wxss及wxs语法 - 09

本文探讨了微信小程序中wxss的rpx单位在响应式设计中的应用,以及wxs模块化思想。在wxss中,rpx用于根据屏幕宽度自适应调整元素尺寸。而在解决时间戳转换问题时,由于小程序不支持在模板中直接调用Page函数,文章介绍了如何利用wxs模块导出功能,通过module.exports创建模块,并在wxml中引入和调用,实现类似Vue的计算属性功能。
摘要由CSDN通过智能技术生成

1. 样式wxss - rpx

rpx 和 rem 其实一样,做自适应的响应式页面的,根据不同的屏幕宽度,自动变更尺寸

(设计稿一般选用iphone6的)

 

2. wxs语法 - 模块化思想

首先有个需求,就是根据传入一个时间戳,实现将时间戳转换为具体时间的功能,那么如果用 Vue 的思想的话,我直接计算属性,比如 { { getDate( ) }} 这个 getDate 为计算属性,里面 return 了时间戳的显示 

但是在微信小程序中,它不支持你这样,它不支持在 { {  }} 中去调用 Page 中的函数,那么如何去实现这样的调用功能呢,只能通过去调用其他 wxs 模块的函数,而不是调用 Page 中的函数,从而引入 wxs 的模块化思想

设置一个通过 module.exports  导出模块:

// date.wxs 新建模块
function handleDate(startTime){
 return getDate(startTime)
}

module.exports = handleDate

然后在 wxml 中 引入模块:<

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值