欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

微信小程序 简单的换肤

程序员文章站 2022-05-05 22:03:24
...

微信小程序 简单的换肤

以两套皮肤为例:红色和绿色
两套要切换的图标分别放在两个文件夹中
微信小程序 简单的换肤

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}}/aaa@qq.com"/>

看看效果
微信小程序 简单的换肤
微信小程序 简单的换肤
微信小程序 简单的换肤
微信小程序 简单的换肤
本人学习前端一年,努力努力再努力

相关标签: 小程序