WeChat アプレットはスキンのナイトモードを実装します-ミニプログラム開発-php.cn

WeChat アプレットはスキンのナイトモードを実装します

不言

リリース： 2018-06-27 11:12:23

オリジナル

3531 人が閲覧しました

この記事では主に、WeChat アプレットを使用してスキン機能を実現する、つまりナイトモードを実現するための関連情報をサンプルコードを通じて詳しく紹介します。一緒に見てみましょう。

古いルール、最初にレンダリングを表示

私は個人的にナイトモード機能が特に気に入っています

夜、暗い中で携帯電話を見ると、画面の明るさが調整されていても、一番下まで見ても、まだ眩しいです

そこで、夜間モードがあるブラウザを使っています

本題に戻りますが、やはり解析機能についてです

1. ボタンをクリックして、一連の CSS を切り替えます (この機能は非常に簡単です) 2. スキン設定をグローバルに保存します変数は、他のページにアクセスするときにも有効です

3. 設定をローカルに保存し、アプリケーションを終了して戻ってくると、前回設定したスキンはまだロードされています

まず切り替えから始めましょう。スイッチはほとんど使用されないので、見てみましょう

<switch bindchange="switchChange" color ="#F39C89" class="switch"/>

ログイン後にコピー

Page({
 data: {
 skinStyle: ""
 },
 onLoad: function (options) {
 },
 switchChange:function(e){
 var that =this
 var style
 //如果开启
 if(e.detail.value == true){
  style="dark"
 }else{
  //否则
  style.skin = ""
 }
 //保存信息
 that.setData({
  skinStyle: style
 })
 }
})

ログイン後にコピー

ボタンの機能はOKです。スタイルを書きに行きます

この黒のスタイルスキンのように、大きな背景色には #000 を使用します

小さな背景には #333 を使用し、テキストには #999 を使用します。カラーピッカーを使用するのが面倒です

スキンのセットが必要なので、フォルダーの外にスタイルファイルを書きましょう

新しいスキンディレクトリを作成し、以下に dark.wxss を書きます

それから

通常モードで wxss をコピーし、それを貼り付けます

色に関連する属性を残して、背景、境界線、色などの他の属性を削除します

。。他には何もいりません

結局、これしか残っていないことが分かりました。。

/*夜间模式*/
/****个人信息页面****/
.dark-box{
 background: #000 !important;
}
/*用户信息部分*/
.dark-box .user-box{
 background: #333 !important;
 color: #999;
}
/*列表部分*/
.dark-box .extra-box{
 background: #333 !important;
}
.dark-box .extra-box .extra-item{
 border-bottom: 1px solid #000 !important;
}
.dark-box .extra-box .item-head{
 color: #999;
}
.dark-box .between-box{
 background: #333 !important;
}
.dark-box .between-left{
 background: #333 !important;
}
.dark-box .between-left .item-head{
 color: #999;
}
/****个人信息页面结束****/

ログイン後にコピー

私のスタイル名にはすべてダークボックスが含まれていることがわかりました

このダークボックスは最も外側で最大のボックスです(デフォルトページを除く)

私のボックスは通常モードです。ナイトモードです

<view class="my-box {{skinStyle}}-box">

ログイン後にコピー

もちろん、肌のスタイル、黄色、赤、青を書くこともできます。。。

この書き方で、変数skinStyleの値を制御するだけでスキンのスタイルを変更することができます

青いボックスのスキンを書いて、変数skinStyleを青に設定することもできます

もう一つの重要なステップは、このスキンファイルを wxss ファイルに表示されるページに導入することです

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

ログイン後にコピー

次のステップは簡単です。。

それをグローバル変数に設定し、最初にgetApp()してから渡します

var app=getApp()
Page({
 data: {
 skinStyle: ""
 },
 onLoad: function (options) {
 },
 switchChange:function(e){
 var that =this
 //设置全局变量
 if(e.detail.value == true){
  app.globalData.skin="dark"
 }else{
  app.globalData.skin = ""
 }
 that.setData({
  skinStyle: app.globalData.skin
 })
 }
})

ログイン後にコピー

これで、他のページにアクセスすると、ダークスキンも渡されます

私は1ページしか書いていません（笑） , したがって、このページのみが変更されます

さて、3番目のステップとして、localstrogeに保存します

var app=getApp()
Page({
 data: {
 skinStyle: ""
 },
 onLoad: function (options) {

 },
 switchChange:function(e){
 var that =this

 //设置全局变量
 if(e.detail.value == true){
  app.globalData.skin="dark"
 }else{
  app.globalData.skin = ""
 }
 that.setData({
  skinStyle: app.globalData.skin
 })
 //保存到本地
 wx.setStorage({
  key: "skin",
  data: app.globalData.skin
 })
 }
})

ログイン後にコピー

もう終わりましたか？全くない。。

プログラムを開いたときにスキン設定を取得する必要があります

そのため、app.jsでスキン関連の情報を取得する必要があります

 getSkin:function(){
 var that =this
 wx.getStorage({
  key: &#39;skin&#39;,
  success: function (res) {
  that.globalData.skin=res.data
  }
 })
 }

ログイン後にコピー

ここで、黒いスキンを設定して終了します。入力後真っ黒ではありません

ページ読み込み時に設定していないからです

 onLoad: function (options) {
  var that =this 
  that.setData({
  skinStyle: app.globalData.skin
  })
 }

ログイン後にコピー

今見てみましょう

肌は問題ありません

その結果、ステータスはボタンがオフになっていますが、スキンはオンになっています

スイッチがリセットされているためです

開始時に判断してください

上記がこの記事の全内容です。皆様の学習に役立つことを願っています。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。