Heim  >  Artikel  >  WeChat-Applet  >  Die einfachste WeChat-Applet-Demo

Die einfachste WeChat-Applet-Demo

高洛峰
高洛峰Original
2018-05-30 10:20:067282Durchsuche

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;
}
Die interaktive Funktionslogik der entsprechenden Seite wird wie gezeigt in die Datei index.js geschrieben unten:

data: {
motto: &#39;Hello World,你好,世界!&#39;
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: &#39;../logs/logs&#39;
})
},
Legen Sie den Navigationsstil fest, der in app.json eingestellt werden muss


Die einfachste WeChat-Applet-Demo

Effektanzeige:

Die einfachste WeChat-Applet-Demo

Die einfachste WeChat-Applet-Demo

Der Schlag ist zu sehen, wenn wir im blauen Bereich auf [Klick mich, klick mich] klicken, erscheint darunter „Hello World, Hello, World!“! „Diese Worte. Dies ist das einfachste Beispiel für ein Berührungsereignis und seine Handhabungseffekte.

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

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn