ホームページ > 記事 > WeChat アプレット > WeChatアプレットのスキン変更機能の実装方法

WeChatアプレットのスキン変更機能の実装方法

小云云オリジナル: 2018-03-16 09:07:352720ブラウズ

PC またはモバイル端末でスキン変更機能を実装するのは比較的簡単です。変更する必要があるのは、通常の CSS です。次に、それを js を通じて読み取り、どのセットを決定するかです。の css が現在ロードされているはずです。この記事では主にWeChatアプレットのスキン変更機能を詳しく紹介しますので、興味のある方はぜひ参考にしてください。

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: &#39;skins&#39;,
  　　 　　data: app.globalData.skin,
  　　 })
  }else{
   app.globalData.skin="normal";
   this.setData({
    SkinStyle: "normal"
   })
   wx.setStorage({
  　　 　　key: &#39;skins&#39;,
  　　 　　data: app.globalData.skin,
  　　 })   
  }  
 }
})

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

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

このように前回設定したスキンが起動するたびに自動で設定されます。

最終レンダリング:

WeChatアプレットのスキン変更機能の実装方法

関連記事