作者:凹凸曼-冥冥
小程序的简化版 css-modules,比标准 css-modules 代码量更少的优化方案
css-modules 是一种 css 模块化方案,它在构建过程中生成一个原类名与新类名的 map,根据 map 引用样式,通过设定 hash 规则,实现了对 CSS 类名作用域的限定,它通常用来解决页面类名冲突的问题。由于微信小程序内组件样式默认隔离,为什么要使用 css-modules 呢?
有以下 2 个原因:
weapp-css-modules 做了哪些事?
标准 css-modules 方案:
import style from './index.wxss'
<view class="{{style.banner}}"></view>
.index_banner_xkpkl { xx }
module.exports ={'banner' : 'index_banner_xkpkl'} // 额外生成的 map 文件
weapp-css-modules 编译后效果:
let style = {}
<view class="a"></view>
.a { xx }
目前只开发了适用于使用 gulp 编译小程序的 gulp 插件,后续计划开发 webpack 可用的插件实现相同功能
npm i gulp-weapp-css-modules gulp-sort
// gulpfile.js
const { weappCssModule, wcmSortFn } = require('gulp-weapp-css-modules')
const sort = require('gulp-sort');
gulp.task('css-module', () => {
return gulp.src('./src/**/*')
.pipe(sort(wcmSortFn)) // 由于处理文件有顺序依赖,需要先对文件排序
.pipe(weappCssModule())
.pipe(gulp.dest('./dist'))
})
小程序页面不具备隔离功能,因此只有具备样式隔离的 Component 可以改造使用 weapp-css-modules
1、css 文件改名字: weapp-css-modules 通过 css 文件是否带 module 来识别需要替换的内容
index.wxss -> index.module.wxss
// 或者使用 scss/其他
index.scss -> index.module.scss
2、js 内新增样式文件的引入,目的是建立 css-modules 的样式与 js 关系
import styles from './index.module.wxss
data:{
...,
styles:styles
}
3、修改 js 内类名的地方替换为 styles 的间接引入
query.select('.banner')
.boundingClientRect()
.exec(function (res) {...})
// 改为
query.select('.' + styles['banner'])
.boundingClientRect()
.exec(function (res) {...})
4、修改 wxml 内类名的使用
4.1. 普通类名
<view class="banner"></view>
// 改为
<view class="{{styles.banner}}"></view>
// 或者
<view class="{{styles['banner']}}"></view>
4.2. 三目运算符
<view class="banner__dot {{ 'banner__dot--' + (index == swiperCurrent ? 'cur' : '')}"></view>
// 改为
<view class="{{styles['banner__dot'] + ' ' + (index == swiperCurrent ? styles['banner__dot--cur'] : '')}}"></view>
// 或者
<view class="{{`${style['banner__dot']} ${index == swiperCurrent ? style['banner__dot--cur'] : ''}`}}"></view>
这里需要注意几种有问题的写法:
4.2.1. 类名间未加空格
<view class="{{styles['banner__dot'] + (index == swiperCurrent ? styles['banner__dot--cur'] : '')}}"></view>
4.2.2. 三目表达式未加括号,运算优先级不明
<view class="{{styles['banner__dot'] + ' ' + index == swiperCurrent ? styles['banner__dot--cur'] : ''}}"></view>
4.2.3. styles 的属性需要是具体的字符串,不能使用变量表达式(这是 weapp-css-modules 需要单独关注的地方,因为编译阶段会对 styles.xx 进行求值,所以不能把表达式写在属性位置)
<view class="{{styles['banner__dot'] + ' ' + styles[index == swiperCurrent ? 'banner__dot--cur': '']}}"></view>
5、构建过程中关注脚本的红色提示,类似于这种:
这是由于在 js/wxml 内使用了一个banner__swiper_2,而 css 内并没有定义banner__swiper_2,css-module 编译的 map 文件是根据 css 内的样式定义来生成 key 名的,因此styles['banner__swiper_2']是undefined, 针对这种情况有两种处理方式:
5.1. 如果 js 内需要通过这个类名选择到某个元素,但是 css 内不需要编写样式,那么可以将它视为不需要编译的类名,即:
query.selector('.banner__swiper_2') // 不改成 styles.xx 的写法
<view class="banner__swiper_2"></view> // 相应的元素也不索引到 styles
// 这样实现了一个组件内不会被编译的样式
5.2. 如果 js 内无引用,那么删掉 wxml 内该类名的定义吧~
6、构建完进行检查,关注样式和交互是否正常
gulp 项目:路径 /demo/gulp-project-demo
欢迎关注凹凸实验室博客:aotu.io
或者关注凹凸实验室公众号(AOTULabs),不定时推送文章。
开发小程序的过程中踩的坑不可谓不多,而有些坑也实在是让人郁闷,不扒一扒难以平我心头之愤呐。
小程序的启动方式:冷启动和热启动,小程序冷启动时,会检查小程序是否有最新版本。如果有则将异步下载最新版本,但是仍将运行当前版本等到下一次冷启动时再运行最新版本。
最近在做小程序开发的时候,发现小程序老是报Do not have xxx handler in current page... 惊不惊喜,意不意外,这是什么原因引起的呢?下面就整排查错误的解决办法。
微信小程序-微信小程序可以通过API获取当前位置的经纬度,在微信小程序开发文档中可以找到这个API的使用示例,但是需要获取具体地址就需要使用到外部的API(此处用到的是腾讯的位置服务)
选择优秀的框架,能帮助我们节省开发时间,提高代码重用性,让开发变得更简单。下面就整理关于微信小程序的前端框架,推荐给大家。
小程序开放至今,许多公司企业已经开发出了自己的小程序。这篇文章主要整理分享:微信小程序UI组件、开发框架、实用库、开发工具、服务端、Demo等
这篇文章主要讲解微信小程序如何实现 侧边栏滑动 功能 ,首先实现的思路为:wxml页面结构分为2层:侧边栏菜单、正文部分;正文部分监听touchstart、touchmove、touchend触摸事件
微信小程序生命周期函数:onLoad: 页面加载。onShow: 页面显示每次打开页面都会调用一次。onReady: 页面初次渲染完成,onHide: 页面隐藏,onUnload: 页面卸载。在小程序中所有页面的路由全部由框架进行管理
三种办法实现小程序的动画效果: 每帧setData()、使用Animation实现旋转效果、使用keyfreams。在wxss中通过控制transform组件的属性,来实现旋转效果,我也是采用的这种方式,性能上面提示非常多
在小程序进行socket链接的时候发现:在1.7.0版本之前,一个微信小程序同时只能有一个 WebSocket 连接,而且在连接socket的时候,发现在还没有进行subscribe的情况下,就直接进行了广播,并且自动关闭了socket连接。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!