动态主题设置

设置全局样式

app.wxss:

page {
  --theme-color: #910893;
}

页面样式使用(**.wxss)：

.order-detail {
  color: var(--theme-color);
}

动态主题设置

app.js:

App({
  globalData: {
    themeColor: '--themeColorVal: red',
    bgColor: 'green'
  }
})

页面引入globalData(**.js)：

Page({
  data: {
    themeColor: app.globalData.themeColor
  },
  onShow() {
    // 设置页面背景样式
    wx.setPageStyle({
      style: {
        background: app.globalData.bgColor
      }
    })
  },
})

页面设置顶级view标签(**.wxml):

<view style="{{ themeColor }}">
...
</view>

页面样式使用(**.wxss):

.status-wrap {
    color: var(--themeColorVal);
}

动态引入图片

app.js:

App({
  globalData: {
    orderImgObj: {
      phone3x: '/assets/phone3x.png',
      phone2x: '/assets/phone2x.png'
    }
  }
})

js引入(**.js)：

Page({
  data: {
    orderImgObj: app.globalData.orderImgObj,
  }
})

页面使用图片(**.wxml):

<image webp="{{true}}" wx:if="{{ pixelRatio === 3 }}" src="{{orderImgObj.phone3x}}" />
<image webp="{{true}}" wx:else src="{{orderImgObj.phone2x}}" />