微信小程序中怎么样实现换肤功能

　　介绍

小编给大家分享一下微信小程序中怎么样实现换肤功能,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!

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

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

1。需要换肤的wxs,正常的wxs。

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

3 .在应用程序。js的globalData里设置默认的皮肤类型。

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

例子:

第一步:结构

& lt; view 类=& # 39;页面# 39;,id=& # 39; {{SkinStyle}} & # 39;比; 　　,& lt; view 类=& # 39;头# 39;比; 　　& lt;才能view 类=& # 39;h-skin  iconfont  {{SkinStyle !==爸行浴?。“icon-moon":“icon-sun"}} & # 39;, bindtap=& # 39; bgBtn& # 39;祝辞& lt;/view>,, 　　,& lt;/view> 　　& lt;/view>

备注:由于不能直接操作微信小程序的根节点页面,要实现全屏背景色的修改,只能模仿一个高度宽度都是100%的p(视图)。上面就是类为页面的这个p(视图)。

id=& # 39; {{SkinStyle}} & # 39;设置id是为了根据当前皮肤类型,让皮肤的wxs样式的权重大于正常wxs样式的权重,这样有时候就没必要加上!重要了。

根节点页面需要在wxs中设置宽度:100%;高度:100%,然后设置类为页面的p(视图)宽高都是100%。这样就相当于有个能操作的根节点页面了。

{{SkinStyle !==爸行浴?。“icon-moon":“icon-sun"}}这句是判断当前的皮肤类型,如果是正常的就是icon-sun,否则就是icon-moon。

<强>第二步:样式wxs

皮肤wxs:

# dark  { 　　背景:大敌;# 333; 　　} 　　# dark  .header  .h-skin { 　　,颜色:白色; 　　}

正常wxs:

.page  .header  .h-skin  { 　　,颜色:# 060505; 　　,填充:0,32 rpx; 　　,字体大小:40 rpx; 　　}

公用wxs:

page  { 　　,高度:100%; 　　,宽度:100%; 　　} 　　.page  { 　　,宽度:100%; 　　,高度:100%; 　　}

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

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

<强>第三步: js

首先:在app.js的文件中,页面里的globalData中设置:皮肤:“中性”,即默认为正常皮肤

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

var 应用=getApp (); 　　页面({ 　　,数据:{ 　　,,SkinStyle:“中性”,,。//这里其实可以不要 　　},大敌; 　　,bgBtn:函数(){ 　　if 才能;(this.data.SkinStyle===爸行浴?。{ 　　,,app.globalData.skin =,“dark",,//设置应用()中皮肤的类型 　　,,this.setData ({ 　　,,,SkinStyle:, app.globalData.skin //设置SkinStyle的值 　　,,}) 　　,,wx.setStorage({,,//设置存储 　　,,,关键:& # 39;皮肤# 39; 　　,,,数据:,app.globalData.skin, 　　,,,}) 　　}{其他才能 　　,,app.globalData.skin=罢！? 　　,,this.setData ({ 　　,,,SkinStyle:,“正常”; 　　,,}) 　　,,wx.setStorage ({ 　　,,,关键:& # 39;皮肤# 39; 　　,,,数据:,app.globalData.skin, 　　,,,}),, 　　,,}, 　　,} 　　})

最后:在每个页面,包括切换皮肤的页面的页面中的onLoad事件里,读取存储并设置SkinStyle的值:

onLoad:, function (选项),{, 　　,var 这=; 　　,wx.getStorage ({ 　　,关键:& # 39;皮肤# 39; 　　,成功:函数(res), { 　　that.setData({才能 　　,,SkinStyle: res.data 　　})才能 　　}, 　　,}) 　　}

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

最终效果图:

微信小程序中怎么样实现换肤功能

看完了这篇文章,相信你对“微信小程序中怎么样实现换肤功能”有了一定的了解,如果想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!

微信小程序中怎么样实现换肤功能