微信小程序--2.设置主题颜色

设置主题颜色

1.在utils中新建文件userstyle.ts

let themecolor="#1F554F"  //绿色
let fcolor1="#0D2D2C"  //黑色
let fcolor2="#8F9A99"  //灰色

export const colors = {
  themecolor:
  '--themecolor:'+themecolor+';' +
  '--fcolor1:'+fcolor1+';' +
  '--fcolor2:'+fcolor2+';'
  ,
  themejscolor:{
    themecolor,
    fcolor1,
    fcolor2,
  },
}

2. 在ts文件中使用案例

1）在app.ts中引入配置公共颜色的文件

// app.ts
import { colors } from "./utils/userstyle"
App<IAppOption>({
  globalData: {
    colors
  }
})
//index.t.ts
interface IAppOption {
  globalData: {
    userInfo?: WechatMiniprogram.UserInfo,
    colors?:{}
  }
  userInfoReadyCallback?: WechatMiniprogram.GetUserInfoSuccessCallback,
}

2）在使用到对应页面的ts文件中引入app

// components/custom-tab-bar/index.tsconst app = getApp();
Component({
  data: {
    colors:app.globalData.colors.themejscolor,
  }
})
// components/custom-tab-bar/index.wxml
<view class="tab-bar">
  <view
   wx:for="{{list}}"
   wx:key="index"
   class="tab-bar-item"
   data-path="{{item.pagePath}}"
   data-index="{{index}}"
   bindtap="switchTab"
  >
    <image src="{{selected === index ? item.selectedIconPath : item.iconPath}}" />
    <view style="color: {{selected === index ? colors.themecolor : colors.fcolor2}}">{{item.text}}</view>
  </view>
</view>

3.在scss文件中引用案例

在ts页面引入，样式引入，csss使用变量

const app = getApp();
Component({
  data: {
    colors:app.globalData.colors.themecolor,
  }
})

<view class="container containerintab" style="{{colors}}"></view>

.container{
  background-color:var(--themecolor);
}