微信小程序如何实现切换主题(更改皮肤)
一:基本原理
因为小程序中没有样式引入的概念,所以不能像传统的html中那样改变link标签的href值来达到切换样式文件。
在小程序中,可以在类名中定义变量,通过动态改边类名,最终达到修改样式的目的。
二:具体实现
在wxml文件中:
其中的变量theme来自welcome.js中,theme的值决定着使用哪个样式来影响页面
在wxss文件中:
这里需要把所有的样式文件都引入进来,因为小程序里不能像htnml中那样改边link标签的动态切换href值。
举例:例如在welcome.js中theme的值为blue,那么在上图wxml中view的类名最终为content-blue,
因此welcome-blue中的样式就会生效。其他样式文件的则不会生效。
最终实现了主题切换
三 总结
在实现小程序主题切换的时候,需要把当前页面的所有的样式文件都引入进来。我们也可以把这些样式文件写在一个wxss文件中,不过那样样式不太好区分,后期维护会有困难。
缺点:
在wxml中使用变量的方式编写页面,会增加开发时间。
另外,在小程序中组件只能继承页面的字体,背景等极少数的样式,如果添加主题切换功能,需要在每个组件在其内部重新书写一套样式,会增加组件的开发时间。
微信小程序如何实现切换主题(更改皮肤)相关推荐
- uni-app 微信小程序根据角色动态的更改底部tabbar
文章目录 1. 需求背景 1.1 源码下载 2. 问题前提及思路 3. 开始撸 3.1 设置 `tabbar.js` 配置不同角色不同的菜单 3.2 设置 `page.json` 3.3 vue 配置 ...
- 微信小程序Tab选项卡切换大集合
代码地址如下: http://www.demodashi.com/demo/14028.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.c ...
- PHP更新小程序,微信小程序Tab页切换更新数据详细介绍
这篇文章主要介绍了微信小程序 Tab页切换更新数据的相关资料,需要的朋友可以参考下 微信小程序 Tab页切换更新数据 微信小程序还处于内测阶段,最不方便的莫过于官方在不停的更新,前几天写的功能隔个几天 ...
- 如何实现两个微信小程序之间的切换跳转
如何实现两个微信小程序之间的切换跳转 wx.navigateToMiniProgram({appId: '***************', //跳转目标小程序的appIdpath: '/pages/ ...
- 微信小程序 点击切换tab跟随动画
微信小程序 点击切换tab跟随动画 <view class='tabbox'><view wx:for="{{title}}" class='tab {{curr ...
- 微信小程序:用户头像的更改与保存
在小程序中一般使用用户的微信头像作为其小程序头像,但有时用户不用微信头像,我们就要提供可更改的方法. 完成这项功能需要两个微信官方的api wx.chooseImage和wx.uploadFile w ...
- 微信小程序 左右滑动切换页面(炫酷效果)以及点赞特效
#效果图 gif放不上来..我就直接口述了..需要看具体效果戳GitHub>>>>>demo地址 首先左右滑动的时候整个页面会以动画效果切换(demo里是反转和水平淡出) ...
- [微信小程序]点击切换卡片动画效果
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 先上效果图, GIF: <!--pages/roll/roll.wxml--> <! ...
- c语言触屏滑动图片,微信小程序左右滑动切换图片酷炫效果(附效果)(示例代码)...
开门见山,先上效果吧!感觉可以的用的上的再往下看. 心动吗?那就继续往下看! 先上页面结构吧,也就是wxml文件,其实可以理解成微信自己封装过的html,这个不多说了,不懂也没必要往下看了. 1 2 ...
最新文章
- 机器学习数据预处理之缺失值:众数(mode)填充
- crontab工具类 断给定的时间 是否 满足 crontab 表达式.md
- [改善Java代码] 避免instanceof非预期结果
- HALCON基于形变的模板匹配实现
- 2018春季德国第八届工业4.0考察之旅正式启航
- 检测Java对象所占内存大小 (转载)
- 【重难点】【Java集合 01】HashMap 和 ConcurrentHashMap
- 分布式架构入门心得小结(1)
- 计算机组成原理(白中英) 第八章 课后题答案
- 2021-09-30 拐点可能存在的地方总结, 关于弧微分的理解
- 计算机病毒怎么取消,电脑病毒恶意软件无法删除。怎么办?
- linux下编译ffmpeg很多报错,linux下ffmpeg库 ARM交叉编译
- 深入浅出—一文看懂支持向量机(SVM)
- i78700k配什么显卡好_i7 8700k配什么主板好?适合Intel八代i7-8700k处理器搭配的主板推荐...
- 本人博客目录 [实时更新]
- 联盛德 HLK-W806 (十): 在 CDK IDE开发环境中使用WM-SDK-W806
- Vue+Koa2移动电商实战 (四)easymock和axios的使用
- 【计算机图形学实验二——实现圆的中点算法、椭圆的中点算法】
- ClientJS是什么?
- win7安装android驱动,win7系统安装手机驱动的详细教程