最も単純な WeChat アプレットのデモ

これは最も単純な WeChat アプレットのサンプル デモです。
反転スタイル、テキスト コンポーネント、ビュー コンポーネント、JS コードの相互作用を使用するため、誰もが WXML、JS、WXSS、JSON ファイルの目的と相互関係を理解する必要があります。
新しいプロジェクトを作成し、index.wxml ページに関連するコントロールを作成します

<!--创建一个蓝色背景的View，添加点击事件,并输出启动日志-->
  <view  bindtap="bindViewTap" class="myView">
    <text class="myView-clickK">点我点我</text>
  </view>

<!--创建了一个text标签，然后执行了JS交互，通过两个大括号，在index.js中进行赋值-->
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

次に、index.wxss ファイルでコントロールの位置と属性スタイルを設計します。 注:
/**rpx 単位は、WeChat アプレットの CSS のサイズ単位です。rpx は画面幅に応じて調整できます。
指定された画面幅は750rpmです。たとえば、iPhone6 では、画面幅が 375px で、合計 750 物理ピクセルがあるため、
750rpx = 375px = 750 物理ピクセル、1rpx = 0.5px = 1 物理ピクセルとなります。開発の提案:
WeChat アプレットを開発する場合、デザイナーはビジュアル ドラフトの標準として iPhone6 を使用できます。 UI デザイン図面の提案:
デザイン ドラフトを計算し、750px のデバイス幅を使用する方が簡単です。この場合、デザイン図面上の
測定サイズが rpx になります。 **/
具体的なコードは次のとおりです:

.myView{
  width: 200rpx;
  height: 200rpx;
  margin-top: -100rpx;
  background-color: blue;
}
.myView {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 200rpx;
  height: 200rpx;
  margin: 20rpx;
  border-radius: 50%;
}
.myView-clickK {
  margin-top: 75rpx;
  height: 50rpx;
  color: red;
}
.usermotto {
  margin-top: 100rpx;
}

対応するページの対話型関数ロジックは、以下に示すように、index.js ファイルに記述されます:

data: {
motto: 'Hello World，你好，世界！'
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},

app.json で設定する必要があるナビゲーション スタイルを設定します

エフェクト表示:

打撃は、青い領域の[Click me, click me]をクリックすると、その下に「Hello World, Hello, World!」が表示されます。 'これらの単語。これは、タッチ イベントとその処理効果の最も単純な例です。
最も単純な WeChat アプレットのデモに関連するその他の記事については、PHP 中国語 Web サイトに注目してください。