Die einfachste WeChat-Applet-Demo

Hier ist die einfachste WeChat-Applet-Beispieldemo.
Das Zusammenspiel von invertiertem Stil, Textkomponente, Ansichtskomponente und JS-Code wird verwendet. Jeder muss den Zweck und die gegenseitige Beziehung von WXML-, JS-, WXSS- und JSON-Dateien verstehen.
Erstellen Sie ein neues Projekt und erstellen Sie dann zugehörige Steuerelemente auf der Seite 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>

Entwerfen Sie dann die Steuerelementposition und den Attributstil in der Datei index.wxss. Hinweis:
/** Die rpx-Einheit ist die Größeneinheit von CSS im WeChat-Applet, die je nach Bildschirmbreite angepasst werden kann.
Die angegebene Bildschirmbreite beträgt 750 rpx. Auf dem iPhone6 ​​beträgt die Bildschirmbreite beispielsweise 375 Pixel und es gibt insgesamt 750 physische Pixel.
Dann ist 750 Pixel = 375 Pixel = 750 Pixel, 1 Pixel = 1 Pixel. Entwicklungsvorschläge:
Bei der Entwicklung von WeChat-Applets können Designer das iPhone6 ​​als Standard für visuelle Entwürfe verwenden. Vorschläge für UI-Designzeichnungen: Verwenden Sie den
-Designentwurf, um die Gerätebreite von 750 Pixel zu verwenden. Es ist einfacher zu berechnen, wenn 750 Pixel 1 Rpx = 1 Pixel ist. In diesem Fall ist die auf der Designzeichnung gemessene Größe px das ist der rpx**/
Der spezifische Code lautet wie folgt:

.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;
}

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

Weitere Artikel zur einfachsten WeChat-Applet-Demo finden Sie auf der chinesischen PHP-Website!