WeChatアプレットがスキン変更機能を実現

この記事では主にWeChatアプレットのスキン変更機能を詳しく紹介しますので、興味のある方は参考にしてください

PCまたはモバイル端末でのスキン変更機能は比較的簡単です。おおよそ次のようになります。スキンを変更する必要がある CSS は、通常の CSS と同様に、現在のスキン タイプをローカルに保存し、js を通じてそれを読み取り、現在どの CSS セットをロードするかを決定します。

WeChat アプレットには wxss を操作するための API がないため、実装方法は少し異なり、おおよそ次のとおりです:

1. リスキンが必要な Wxss、通常の wxss。

2. 各ページにスキン変更用の wxss を導入します (スキン変更にはすべてのページを変更する必要があるため)。

3. app.jsのglobalDataにデフォルトのスキンタイプを設定します。

4. 各ページがオンロードされるときに、ストレージ内のデータを読み取り、現在のスキン タイプの値を設定します。

例:

ステップ 1: 構造

<view class=&#39;page&#39; id=&#39;{{SkinStyle}}&#39;>
 <view class=&#39;header&#39;>
  <view class=&#39;h-skin iconfont {{SkinStyle!=="normal"?"icon-moon":"icon-sun"}}&#39; bindtap=&#39;bgBtn&#39;></view>  
 </view>
</view>

注: WeChat アプレットのルート ノード ページは直接操作できないため、全画面の背景色を変更するには、高さと幅100%）。上記はp（ビュー）withクラスページです。

id='{{SkinStyle}}'、id の設定は、スキンの wxss スタイルのウェイトを、現在のスキン タイプに基づいた通常の wxss スタイルのウェイトよりも大きくすることであるため、追加する必要がない場合があります。 ！重要。

ルートノードページはwxssでwidth:100%;height:100%を設定する必要があります。次に、クラスをページとして p (ビュー) の幅と高さを 100% に設定します。これは、動作可能なルート ノード ページを持つことと同じです。

{{SkinStyle!=="normal"?"icon-moon":"icon-sun"}} この文は、現在の肌のタイプを判断するもので、正常であれば icon-sun、それ以外の場合は icon です。 -月。

ステップ 2: スタイル wxss

スキン wxss:

#dark {
 background: #333;
}
#dark .header .h-skin{
 color: white;
}

通常 wxss:

.page .header .h-skin {
 color: #060505;
 padding: 0 32rpx;
 font-size: 40rpx;
}

パブリック wxss:

page {
 height: 100%;
 width: 100%;
}
.page {
 width: 100%;
 height: 100%;
}

注: これらはそれぞれ 3 つのファイルです。スキンはtheme.wxss、通常のものはindex.wxss、公開されているものはcom.wxssです

スキンの変更によりすべてのページが変更されるため、スキンのwxssファイルをロードすることをお勧めします @import "../theme-bg/theme "; com.wxss ファイルに。次に、各ページの wxss がこのパブリック com.wxss ファイルを @import します。

ステップ 3: js

まず、app.js ファイルで、ページに globalData を設定します。skin: "normal"、つまり、デフォルトはノーマルスキンです

次に、スイッチのページでスキンボタン、切り替えボタンのクリックイベント bgBtn を追加します:

var app=getApp();
Page({
 data:{
   SkinStyle:"normal"  //这里其实可以不要
 }, 
 bgBtn:function(){
  if (this.data.SkinStyle==="normal"){
   app.globalData.skin = "dark"; //设置app（）中皮肤的类型
   this.setData({
    SkinStyle: app.globalData.skin //设置SkinStyle的值
   })
   wx.setStorage({   //设置storage
  　　 　　key: 'skins',
  　　 　　data: app.globalData.skin,
  　　 })
  }else{
   app.globalData.skin="normal";
   this.setData({
    SkinStyle: "normal"
   })
   wx.setStorage({
  　　 　　key: 'skins',
  　　 　　data: app.globalData.skin,
  　　 })   
  }  
 }
})

最後に: スキンを切り替えるページを含む各ページの Page の onLoad イベントで、ストレージを読み取り、SkinStyle の値を設定します:

onLoad: function (options) { 
 var that=this;
 wx.getStorage({
 key: 'skins',
 success: function(res) {
  that.setData({
   SkinStyle: res.data
  })
 },
 })
}

こうすることで、最後に設定したスキンを設定するたびに自動的に開始できます。

最終レンダリング:

上記は私が皆さんのためにまとめたもので、将来皆さんのお役に立てれば幸いです。

関連記事:

js の apply 関数と Math.max() 関数の問題点と違いの紹介

Vue の組み込みコンポーネント コンポーネントのアプリケーション シナリオについての簡単な説明

簡単なチュートリアルvue2でのlessの使用について

以上がWeChatアプレットがスキン変更機能を実現の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。