Teilen Sie eine einfache kleine Programmdemo

Vorwort

Dies ist eine relativ einfache kleine Programmdemo, die einfach Textnotizen aufzeichnen kann. Ich habe sie vor zwei Monaten geschrieben, kurz nachdem ich sie beendet hatte ... Von Anfang an Es hat weniger als einen Tag gedauert, bis ich dieses Projekt mit kleinen Programmen kennengelernt habe. Der Server ist mein eigener Cloud-Server (machen Sie sich nicht damit an!), geschrieben in PHP. Ich werde nicht viel sagen, schauen Sie sich einfach die Demo an

github

mycloudnote client
mycloudnote server

Hinweis: Da ich die App-ID nicht beantragt habe, konnte ich die WeChat-Konto-ID des Benutzers nicht erhalten Verwendet der Benutzer Der Spitzname von WeChat wird als Primärschlüssel der Datenbank verwendet. Wenn Sie also denselben Namen verwenden, kann es zu Fehlern kommen. Da es außerdem keine App-ID gibt, haben wir den echten Gerätetest nicht ausprobiert ...

Screenshots

Persönliches über das Miniprogramm Impressionen

Dieses Ding ist html+css+js, wenn Sie mit dem Frontend vertraut sind, wird der Einstieg wirklich schnell gehen ...
Jede Seite des Miniprogramms besteht aus jeweils 4 Dateien

WXML-Datei ist HTML sehr ähnlich, es ist auch eine XML-ähnliche Sprache, es sollte gesagt werden, dass es sich um HTML handelt, das für kleine Programme geeignet ist. Entfernen Sie einige

HTML-Tags und fügen Sie einige neue Tags hinzu Sie kennen HTML, es ist sehr einfach, sich die offizielle
API

anzusehen. Hier ist eine WXML-Seite im Demo-Code 🎜>entspricht der folgenden Seite

• <!--addNote.wxml-->
  <form bindsubmit="save">
  <label class="label">题目</label>
  <view class="log-list">
  <input name="title" type="text" value="{{title}}" placeholder="题目"/>
  </view>
  <label class="label">正文</label>
  <view class="log-list">
  <textarea name="context" value="{{context}}" auto-height placeholder="输入记录的内容" maxlength="-1"/>
  <view class="submit"><button form-type="submit">添加</button></view>
  </view>
  </form>

  wxss-Datei ist Das CSS der Mini-Programmversion ist auch sehr Ganz einfach, lesen Sie einfach das offizielle Dokument ~ wie folgt (kombiniert mit der WXML oben):

js-Datei ist das übliche
Javascript

, das zur Geschäftsabwicklung verwendet wird Der Unterschied besteht darin, dass einige integrierte Methoden kleiner Programme aufgerufen werden und fast die gesamte Geschäftslogik in einer Methode namens Page() geschrieben wird. Weitere Informationen finden Sie in der offiziellen Dokumentation >

• /*addNote.wxss*/
  .log-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
  }
  .submit
  {
  padding: 20rpx;
  }
  .hide
  {
  display: none;
  }
  .label
  {
  margin-left: 20px;
  }

  JSON-Datei wird zum Konfigurieren einiger Attribute der Seite wie Seitenname usw. verwendet und nicht zum Speichern von Daten (der Datenspeichervorgang wird in ausgeführt). js (Operation in der Datei)...

• Einige persönliche Meinungen zum Miniprogramm

Ich weiß nicht, wie ich es bewerten soll... Es ist noch nicht perfekt. Es gibt viele Fehler, aber die Entwicklung ist nicht sehr praktisch. Jetzt sind die APIs, die verfügbar sein sollten, grundsätzlich verfügbar ... Ich weiß nicht, ob dieses Ding einen Unterschied machen kann , aber es ist nicht schlecht, wenn ich Zeit habe, mehrere Technologien zu erlernen... ………

//addNote.js
var app = getApp()
Page({
  data: {
    title:'',
    context:'',
    noteID:'',
  }
  ,
  save: function(e)
  {
    app.getUserInfo(function(userInfo){
      wx.request({
      url: 'http://139.199.74.155/myCloudNote/addNote.php',
      data: {
        userid:userInfo.nickName,
        title:e.detail.value.title,
        context:e.detail.value.context
      },
      header: {'content-type':'application/x-www-form-urlencoded'},
      method: 'POST', 
      success: function(res){
        wx.redirectTo({
          url:'../list/list'
        })
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  })
  },
  onLoad: function(options)
  {

  }
})

[Verwandte Empfehlungen]

• 1
  2.
Demo des WeChat-Miniprogramms: Steckkartenauto

//addNote.json
{
    "navigationBarTitleText": "编辑笔记"
}

3.

Takeaway: Ähnliche Ankerfunktion implementieren

Das obige ist der detaillierte Inhalt vonTeilen Sie eine einfache kleine Programmdemo. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!