小程序服务器换肤,微信小程序实现换肤功能

pc或者移动端实现换肤功能还是比较简单的，大致就是需要换肤的css，还有正常的css；把当前皮肤类型存入本地；然后通过js读取并判断当前应该加载哪套css。

由于微信小程序没有操作wxss的api，所以实现的方式有点不一样，大致如下：

1.需要换肤的wxss，正常的wxss。

2.每个页面都引入换肤的wxss(因为换肤每个页面都需要改变)。

3.在app.js的globalData里设置默认的皮肤类型。

4.每个页面onload的时候，读取storage里的数据并设置当前皮肤类型的值。

例子：

第一步：结构

备注：由于不能直接操作微信小程序的根节点page，要实现全屏背景色的修改，只能模仿一个高度宽度都是100%的div(view)。上面就是class为page的这个div(view)。

id='{{SkinStyle}}'，设置id是为了根据当前皮肤类型，让皮肤的wxss样式的权重大于正常wxss样式的权重，这样有时候就没必要加上！important了。

根节点page需要在wxss中设置width:100%;height:100%。然后设置class为page的div(view)宽高都是100%。这样就相当于有个能操作的根节点page了。

{{SkinStyle!=="normal"?"icon-moon":"icon-sun"}}这句是判断当前的皮肤类型，如果是normal就是icon-sun，否则就是icon-moon。

第二步：样式wxss

皮肤wxss：

正常wxss：

公用wxss：

备注：这分别是三个文件。皮肤是theme.wxss，正常是index.wxss，公用是com.wxss

因为换肤是所有页面都变化，所以我建议把皮肤的wxss文件 @import "../theme-bg/theme"; 加载到com.wxss文件中。然后每个页面的wxss都@import这个公用的com.wxss文件。

第三步：js

首先：在app.js的文件中，Page里的globalData中设置：skin:"normal";即默认为normal皮肤

然后：在切换皮肤按钮的页面，添加切换按钮的点击事件bgBtn：

最后：在每个页面，包括切换皮肤的页面的Page中的onLoad事件里，读取storage并设置SkinStyle的值：

这样每次启动都能自动设置上一次设置的皮肤了。

最终效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

总结

以上是编程之家为你收集整理的微信小程序实现换肤功能全部内容，希望文章能够帮你解决微信小程序实现换肤功能所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小程序服务器换肤,微信小程序实现换肤功能相关推荐

微信小程序服务器开小差了,微信小程序wx.request请求封装
微信小程序 wx.request RequestTask wx.request(Object object)发起 HTTPS 网络请求. 示例代码 wx.request({ url: 'test.ph ...
微信小游戏服务器数据持久化,微信小程序wx.setStorage数据缓存实现缓存过期时间...
为了项目性能等方面的考虑,有时候有必要为用户经常访问的页面使用缓存机制:在技术上,服务端和前端都有相应的缓存机制.比如传统的session及cookie等等,在微信小程序中,并没有cookie机制,但 ...
微信小程序服务器新手教程,微信小程序新手教程上手开发与使用总结
微信小程序新手教程上手开发与使用总结,本篇默认已经成功安装微信小程序工具,来和小编一起看看吧一.模板 WXML提供模板组件给我们使用,可以在模板定义公用的代码片段,然后在需要引用的地方进行调用. 定 ...
微信小程序服务器未响应,微信小程序点击事件失效
想在主页上添加一个搜索功能但是加上之后发现原有的页面点击事件没有反应了个人怀疑是input和bindtap互相影响? 有人碰到类似的情况吗是怎么解决的 {{item}} this is a te ...
微信小程序服务器支付sdk,微信小程序之支付后如何调用SDK的异步通知
微信小程序之支付后如何调用SDK的异步通知发布时间:2021-07-05 10:47:33 来源:亿速云阅读:57 作者:小新这篇文章主要介绍微信小程序之支付后如何调用SDK的异步通知,文中介绍 ...
微信小程序服务器连接失败,微信小程序在苹果上出现[request:fail 发生了 SSL 错误无法建立与该服务器的安全连接。]错误的解决方案...
由于原本的服务器出故障,在使用临时服务器的时候出现苹果无法加载小程序出现 request:fail 发生了 SSL 错误无法建立与该服务器的安全连接.的问题问题原因: 2017年1月1日起,苹果强 ...
微信小程序服务器触发事件,微信小程序组件间通讯与事件
##组件间通讯与事件一.前言如果小程序中有可复用的UI且具有一定的功能性,就可以使用自定义组件将其封装起来.(如果仅仅只需要复用UI可使用template)下面介绍父子组件的数据传递方法,以及一个 ...
小程序服务器gbk编码,微信小程序实现GBK和UTF-8互转
js虽然有第三方支持的GBK工具,但是小程序没有:而我开发中又需要进行格式的转化,就依据前人的经验做了一份出来. 分为两部分:Decode.js和Encode.js.分别是GBK格式的二进制文件转化为 ...
微信小程序服务器错误500,微信小程序配置参数缺少，报错500
开发作者可能在fecshop\appserver\config\fecshop_local_modules\Wx.php文件配置了['home4TipImg'],但是现在默认的最新版本暂时是没有配置的 ...
阿里云服务器上搭建微信小程序服务端环境。
无论是搭建个人博客空间也好,微信小程序也罢,搭建环境必需的两点:云服务器.域名,下面一步步给搭建演示如果在一台阿里云服务器上搭建微信小程序服务端环境. 1.云服务器准备:可在阿里云购买ECS服务器 ...

小程序服务器换肤,微信小程序实现换肤功能

小程序服务器换肤,微信小程序实现换肤功能相关推荐

最新文章

热门文章