Architektur und Konfiguration kleiner Programme

Inhaltsverzeichnis:

1 Zwei-Thread-Modell für Applets

2 Unterscheidung verschiedener Konfigurationsdateien

3 Globale Konfigurationsdatei app.json

4-seitige Konfigurationsdatei page.json

5 Vorgang zum Registrieren einer App-Instanz

6 Vorgang zum Registrieren einer Seiteninstanz

jeder anders genannt

Ändern Sie die Konfiguration in project.config.json nicht direkt in der Datei, sondern müssen Sie sie in den Details in der oberen rechten Ecke des Editors ändern. Sofern das Gesamtprojekt nicht erfordert, dass alle eine bestimmte Konfiguration vereinheitlichen, ändern Sie sie nur in dieser Datei. (z. B. Änderung der verwendeten öffentlichen Basisbibliothek usw.)

Hinweis: Ändern Sie die Basisbibliothek in den Details in der oberen rechten Ecke, und sie wird standardmäßig in die Datei project.private.config.json geschrieben (private, lokale Basisbibliothek), um Probleme zu vermeiden, wenn mehrere Personen entwickeln.

Die Datei sitemap.json soll festlegen, ob Ihr Applet durchsucht werden darf, wenn WeChat nach Applets sucht. Wenn Sie beispielsweise allow eingeben, können Sie danach suchen. disallow darf nicht suchen. Der WeChat-Crawler kann das Applet nicht erreichen. Sie können auch einstellen, dass eine bestimmte Seite des Applets nicht durchsucht werden darf.

Die Seiten, das Fenster und die tabBar können in der globalen Konfigurationsdatei app.json konfiguriert werden. Unter ihnen konfigurieren die Seiten die registrierten und angezeigten Seiten und das Fenster steuert den Stil der oberen Menüleiste. Unter ihnen hat backgroundTextStyle nur zwei Werte, dunkel und hell. Wenn Sie diese Farbe sehen möchten, müssen Sie enablePullDownRefresh auf true konfigurieren auf der globalen oder individuellen Seite, damit die Seite heruntergezogen und aktualisiert werden kann. tabbar wird verwendet, um die untere Menüleiste zu konfigurieren.
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
Konfigurationsdatei xxx.json für eine separate Seite

usingComponents wird verwendet, um die Verwendung von benutzerdefinierten Komponenten festzulegen.

navigationBarTitleText kann den Namen der oberen globalen Menüleiste überschreiben und der Seite einen separaten Menüleistennamen geben.

Unabhängig davon, ob enablePullDownRefresh eine Seiten-Pulldown-Aktualisierung zulässt, legen wir dieses Attribut im Allgemeinen nicht global fest, sondern konfigurieren dieses Attribut nur auf einer einzelnen Seite, da nicht alle Seiten eine Pulldown-Aktualisierung benötigen. Es gibt eine Funktion zur Überwachung der Pulldown-Aktualisierung. Verwenden Sie onPullDownRefresh in der js-Datei der Seite, um das Pulldown-Aktualisierungsereignis zu überwachen.

onReachBottomDistance wird verwendet, um das onReachBottom-Ereignis der Datei zu konfigurieren, wenn die Seite auf die verbleibende Entfernung vom unteren Rand heruntergezogen und die Seite ausgelöst wird.
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html
Die app.js-Datei muss im Allgemeinen geschrieben werden:

app.js https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html

1. onLaunch wird ausgelöst, wenn die Initialisierung des Applets abgeschlossen ist, und es wird global nur einmal ausgelöst. Die Verwendung hier kann bestimmen, von wo aus der Benutzer das Applet betritt. Es kann sich um ein WeChat-Dropdown-Menü zum Aufrufen eines kleinen Programms oder um eine Benutzerfreigabemethode zum Aufrufen eines kleinen Programms oder um eine Suche zum Aufrufen eines kleinen Programms handeln. Diese Eingabemethoden haben alle einen Szenenwert:

Szenenwert https://developers.weixin.qq.com/miniprogram/dev/reference/scene-list.html

2. Überwachung des Lebenszyklus

Die folgende Abbildung zeigt die synchrone Methode zum Speichern lokaler Daten (es gibt auch eine asynchrone Methode zum Speichern lokaler Daten), die Daten vom Objekttyp speichern kann, was sich von Browsern unterscheidet.Browser können keine Daten vom Objekttyp speichern, und Objekttyp Daten müssen in Zeichen konvertiert werden String-Typ zum Speichern.
// app.js
App({
  // 作用二: 共享数据
  // 数据不是响应式, 这里共享的数据通常是一些固定的数据
  globalData: {
    token: "",
    userInfo: {}
  },
  onLaunch(options) {
    // 0.从本地获取token/userInfo
    const token = wx.getStorageSync("token")
    const userInfo = wx.getStorageSync("userInfo")

    // 1.进行登录操作(判断逻辑)
    if (!token || !userInfo) {
      // 将登录成功的数据, 保存到storage
      console.log("登录操作");
      wx.setStorageSync("token", "kobetoken")
      wx.setStorageSync("userInfo", { nickname: "kobe", level: 100 })
    }

    // 2.将获取到数据保存到globalData中
    this.globalData.token = token
    this.globalData.userInfo = userInfo


    // 3.发送网络请求, 优先请求一些必要的数据
    // wx.request({ url: 'url'})
  },
  onShow(options) {
    // 作用一: 判断小程序的进入场景
    console.log("onShow:", options);
  },
  onHide() {
    console.log("onHide");
  }
})

// 页面中
// 1.初体验: favor
// 2.页面配置/下拉刷新/上拉加载: profile
// 3.在页面中, 使用app中的数据: order
3. Geben Sie hier einige einfache Daten direkt in der App frei ({fügen Sie ein json-Objekt mit einem benutzerdefinierten Parameternamen hinzu, um die freigegebenen Daten zu speichern}), aber die hier gespeicherten freigegebenen (globalen) Parameter lösen keine Antwort aus, was normalerweise der Fall ist Wird verwendet, um einige feste Parameter zu speichern.

Die folgende Abbildung zeigt die in der App angepassten globalen Parameter ({}):

Die folgende Abbildung zeigt, wie globale Parameter auf anderen Seiten verwendet werden:

Die Seite ({}) in der xxx.js-Datei, die jeder Seite entspricht, muss im Allgemeinen 4 Inhalte schreiben:

Seite (Objektobjekt) | WeChat Open Documentation (qq.com) https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

<view class="banner">
  <swiper circular autoplay indicator-dots="{
    
    {true}}">
    <block wx:for="{
    
    {banners}}" wx:key="acm">
      <swiper-item>
        
        <image mode="widthFix" src="{
    
    {item.image}}"></image>
      </swiper-item>
    </block>
  </swiper>
</view>

<view class="counter">
  <view>当前计数: {
    
    { counter }}</view>
</view>

<view class="buttons">
  <button bindtap="onBtn1Click">按钮1</button>

  <block wx:for="{
    
    {btns}}" wx:key="*this">
    <button 
      class="btn" 
      style="background: {
    
    {item}};"
      bindtap="onBtnClick"
      data-color="{
    
    {item}}"
    >
      {
    
    { item }}
    </button>
  </block>
</view>


<view class="list">
  <block wx:for="{
    
    {30}}" wx:key="*this">
    <view>列表数据:{
    
    { item }}</view>
  </block>
</view>
// pages/01_初体验/index.js
Page({
  data: {
    banners: [],
    recommends: [],

    // 2.作用二: 定义本地固定的数据
    counter: 100,

    btns: ["red", "blue", "green", "orange"]
  },
  // 1.作用一: 发送网络请求, 请求数据
  onLoad() {
    console.log("onLoad");

    // 发送网络请求
    wx.request({
      url: "http://123.207.32.32:8000/home/multidata",
      success: (res) => {
        const data = res.data.data
        const banners = data.banner.list
        const recommends = data.recommend.list
        this.setData({ banners, recommends })
      }
    })
  },

  // 3.绑定wxml中产生事件后的回调函数
  onBtn1Click() {
    console.log("onBtn1Click");
  },
  onBtnClick(event) {
    console.log("btn click:", event.target.dataset.color);
  },

  // 4.绑定下拉刷新/达到底部/页面滚动
  onPullDownRefresh() {
    console.log("onPullDownRefresh");
  },
  //页面下滑到底端的时候触发的事件
  onReachBottom() {
    console.log("onReachBottom");
  },
  //页面滚动的时候触发的事件，这里可以获取滚动到的位置距离顶端的距离
  onPageScroll(event) {
    console.log("onPageScroll:", event);
  },

  // 生命周期函数: 
  onShow() {
    console.log("onShow");
  },
  onReady() {
    console.log("onReady");
  },
  onHide() {
    console.log("onHide");
  },
  onUnload() {
    console.log("onUnload");
  }
})

Architektur und Konfiguration kleiner Programme

Supongo que te gusta