Апплет WeChat реализует функцию скиннинга

Апплет WeChat

В то время, когда мобильные телефоны и компьютеры используются так часто, приложения могут менять свои скины, чтобы улучшить эстетику и уменьшить раздражение экрана для глаз, что, несомненно, очень помогает пользователю.

Не сплетничайте, давайте сначала выложим код

  адрес на гитхабе:Моя годовая цель - апплет WeChat

демо

Отсканируйте код, чтобы попробовать, или выполните поиск по запросу «Моя цель на год».

我的年目标-微信小程序

Ниже приведен эффект смены скина

首页

реализовать функцию

Чтобы добиться эффекта изменения кожи, как указано выше, есть несколько идей:

  1. Подготовить wxss, относящийся к скину, и внедрить его в app.wxss, что удобно для каждой страницы;
  2. При установке скина динамически меняйте имя класса или id элемента в wxml, чтобы страница применяла соответствующий скин;
  3. Сохраните значение выбранного скина в локальном кэше апплета, чтобы другие страницы и при следующем открытии апплета отображали правильный скин;

Вот некоторые детали внедрения

wxml

<view class="page" id='{{skin}}'>  
  <view class="container">
  	...
  </view>
</view>

Часть wxml относительно проста, вам нужно только динамически переключать идентификатор.Обратите внимание, что, поскольку страница не может динамически устанавливать цвет фона, для самого внешнего слоя здесь требуется ширина: 100%; высота: 100%; иначе скин не будет в состоянии покрыть страницу.

wxss

/* app.wxss主题颜色 */

/* 深黑 */
#dark-skin{
  background: #000;
}
#dark-skin .bColor{
  background: #333;
  color: #999;
}
#dark-skin .borderColor{
  border-color:#999;
}
/* 粉红 */
#red-skin{
  background: #f9e5ee;
}
#red-skin .bColor{
  background: #f9e5ee;
  color: #8e5a54;
}
#red-skin .borderColor{
  border-color:#8e5a54;
}
/* 橘黄 */
#yellow-skin{
  background: #f6e1c9;
}
#yellow-skin .bColor{
  background: #f6e1c9;
  color: #8c6031;
}
#yellow-skin .borderColor{
  border-color:#8c6031;
}
...

Напишите цветовой стиль, соответствующий скину, и поместите его прямо в app.wxss.Если стилей слишком много, вы можете использовать отдельный файл wxss для удобства управления.

@import "style/skin/dark.wxss";

js

Сохранить выбранное значение скина

//wxml
//<view bindtap="setSkin" data-flag='yellow'>橘黄</view> 
//bindtap事件函数
  setSkin:function(e){
    var skin = e.target.dataset.flag;

    this.setData({
      skin: skin + '-skin',
      openSet:false
    })

    wx.setStorage({
      key: "skin",
      data: skin + '-skin'
    })
    app.setSkin(this);
  }

Здесь setData используется для немедленного создания идентификатора переключения страниц, а wx.setStorage используется для хранения значения app.setSkin — это общедоступный метод, определенный в app.js, который будет представлен ниже.

//app.js
App({
  data: {
  },
  setSkin:function(that){
    wx.getStorage({
     key: 'skin',
     success: function(res) {
       if(res){
         that.setData({
          skin: res.data
        })
         var fcolor = res.data == 'dark-skin' ? '#ffffff' : '#000000',
             obj = {
               'normal-skin':{
                 color:'#000000',
                 background:'#f6f6f6'
               },
               'dark-skin': {
                 color: '#ffffff',
                 background: '#000000'
               },
               'red-skin': {
                 color: '#8e5a54',
                 background: '#f9e5ee'
               },
               'yellow-skin': {
                 color: '#8c6031',
                 background: '#f6e1c9'
               },
               'green-skin': {
                 color: '#5d6021',
                 background: '#e3eabb'
               },
               'cyan-skin': {
                 color: '#417036',
                 background: '#d1e9cd'
               },
               'blue-skin': {
                 color: '#2e6167',
                 background: '#bbe4e3'
               }
             },
           item = obj[res.data],
           tcolor = item.color,
           bcolor = item.background;

         wx.setNavigationBarColor({
           frontColor: fcolor,
           backgroundColor: bcolor,
         })

         wx.setTabBarStyle({
           color: tcolor,
           backgroundColor: bcolor,
         })
       }
     }
   })
    }
})

app.setSkin предоставляется для всех вызовов страниц и устанавливает цвет фона и текста заголовка и области навигации с помощью существующего цвета темы оформления.

Откройте обычную страницу wxml и установите скин

const app = getApp();

Page({
  data: {
    skin: 'normal-skin',
  },
  onLoad: function() {
    app.setSkin(this); 
  },
  onShow:function(){
    app.setSkin(this); 
  }
})

Установите скин, когда запускаются onLoad и onShow. OnShow здесь, чтобы избежать сброса скина, и на странице также будет отображаться последний скин. Поскольку первая загрузка будет установлена ​​дважды, app.setSkin в onLoad фактически может быть удален.

Пока что реализована изысканная функция настройки скина, друзья, заходите и пробуйте!

наконец

Новый 2019 год, новые жизненные цели, добро пожаловать в апплет WeChat «Мои годовые цели», если у вас есть какие-либо предложения, дайте мне знать или потяните запросы, спасибо.


Другие введения этого апплета:

Достигнута ли ваша годовая цель? Не забудьте один раз разработать апплет WeChat.

Категории