微信小程序 简单的换肤

微信小程序 简单的换肤

以两套皮肤为例：红色和绿色
两套要切换的图标分别放在两个文件夹中

img_h:

img_l：

确定两套主题颜色
#DE3C33
#02A95C

通过app.js控制

globalData: {
  userInfo: null,
  skin:{
    file:"../img_h",//../img_l
    color:"#DE3C33"//#02A95C
  }
}

运用到页面
js:

Page({
  data: {
    skin:getApp().globalData.skin,
  },
  onLoad: function () {
   // 动态设置 tabBar 的整体样式
     wx.setTabBarStyle({
      selectedColor: slet.data.skin.color//tab 上的文字选中时的颜色
    })
    //设置 tabBar 某一项的内容
    wx.setTabBarItem({
      index: 0,//tabBar 的哪一项，从左边算起
      selectedIconPath: '/pages/' + slet.data.skin.file + '/homet-active.png'//选中时的图片路径
    })
    //页面导航条颜色
    wx.setNavigationBarColor({
      frontColor:"#ffffff",
      backgroundColor:slet.data.skin.color
    })
  },
})

wxml:

<view style="color:{{skin.color}}">
  文字
</view>
<image src="{{skin.file}}/gx@2x.png"/>

看看效果




本人学习前端一年，努力努力再努力