WeChatアプレットがスキン変更機能を実現-jsチュートリアル-php.cn

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

亚连

リリース： 2018-05-30 10:54:58

オリジナル

2217 人が閲覧しました

この記事では主に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: &#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
  })
 },
 })
}

ログイン後にコピー

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

最終レンダリング: