WeChatにスキン機能(ナイトモード)実装_JavaScriptスキル-jsチュートリアル-php.cn

WeChatにスキン機能(ナイトモード)実装_JavaScriptスキル

微波

リリース： 2017-06-28 13:24:43

オリジナル

2557 人が閲覧しました

この記事では主に、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
  })
 }

ログイン後にコピー

今見てみましょう

スキンは問題ありません
結果はボタンのステータスがオフになっていますが、スキンが付いています

スイッチがリセットされているので

任せてください誰もが自分で解決できます、起動時に判断するだけです

以上がWeChatにスキン機能(ナイトモード)実装_JavaScriptスキルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。