在手机、电脑使用频率如此高的当下，应用可以更换皮肤，以提升美观性，并减轻屏幕对眼睛的刺激，无疑对用户体验有很大的帮助
实现功能
要实现如上更换皮肤的效果，有几个思路：
1.准备皮肤相关的wxss，引入到app.wxss中，方便每个页面使用；
2.设置皮肤时，动态改变wxml中元素的类名或id，使页面应用对应的皮肤；
3.将选中皮肤的值保存在小程序本地缓存中，保证其他页面及下一次打开小程序时，页面展示正确的皮肤；
下面介绍一些实现的细节
wxml
<view class="page" id='{{skin}}'>
<view class="container">
...
</view>
</view>
wxml部分比较简单，只需要动态切换id即可，注意因为page无法动态设置背景色，所以这里的最外层需要width: 100%;height: 100%;，否则将无法使皮肤铺满页面。
wxss
/* app.wxss主题颜色 */
/* 深黑 */
#dark-skin{
background: #000;
}
#dark-skin .bColor{
background: #333;
color: #999;
}
#dark-skin .borderColor{
border-color:#999;
}
/* 粉红 */
#red-skin{
background: #f9e5ee;
}
#red-skin .bColor{
background: #f9e5ee;
color: #8e5a54;
}
#red-skin .borderColor{
border-color:#8e5a54;
}
/* 橘黄 */
#yellow-skin{
background: #f6e1c9;
}
#yellow-skin .bColor{
background: #f6e1c9;
color: #8c6031;
}
#yellow-skin .borderColor{
border-color:#8c6031;
}
写好皮肤对应的颜色样式，直接放入app.wxss中即可，如果样式过多，可以使用单独的wxss文件，方便管理。
@import "style/skin/dark.wxss";
js
存储选中的皮肤值
//wxml
//<view bindtap="setSkin" data-flag='yellow'>橘黄</view>
//bindtap事件函数
setSkin:function(e){
var skin = e.target.dataset.flag;
this.setData({
skin: skin + '-skin',
openSet:false
})
wx.setStorage({
key: "skin",
data: skin + '-skin'
})
app.setSkin(this);
}
这里使用setData使页面立即切换id，使用wx.setStorage存储值，app.setSkin是定义在app.js上的公共方法，下面会有介绍
//app.js
App({
data: {
},
setSkin:function(that){
wx.getStorage({
key: 'skin',
success: function(res) {
if(res){
that.setData({
skin: res.data
})
var fcolor = res.data == 'dark-skin' "htmlcode">
const app = getApp();
Page({
data: {
skin: 'normal-skin',
},
onLoad: function() {
app.setSkin(this);
},
onShow:function(){
app.setSkin(this);
}
})
在onLoad及onShow触发时设置皮肤，这里的onShow是为了避免重新设置皮肤时，页面还显示上一次的皮肤，由于首次加载会设置两次，onLoad里的app.setSkin其实可以去掉。
至此，一个精美的设置皮肤功能就实现了，小伙伴们快去试一试吧！
总结
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。