Teilen Sie eine kleine Erfahrung in der Programmentwicklung

Dies ist das erste Mal, dass ich offiziell ein kleines Programm entwickelt habe. Lassen Sie uns unter folgenden Aspekten über den Entwicklungsprozess und die Erfahrungen mit dem kleinen Programm sprechen, wobei wir hauptsächlich über die in diesem Projekt verwendeten Funktionen sprechen.

• Datenabfrage

Dieses Mal hat das Miniprogramm nicht viele zusätzliche Funktionen, daher sind die Daten und die Datenverarbeitung dieses Mal die Hauptarbeit ist, dass das Miniprogramm den Benutzern APIs zur Verfügung stellt, mit denen sie Daten von ihren eigenen Servern anfordern können. Es ist erwähnenswert, dass Sie vor der Entwicklung des Miniprogramms eine AppID auf der öffentlichen WeChat-Plattform beantragen und einen Domänennamen binden müssen Der Name muss das HTTPS-Protokoll sein. Vervollständigen Sie dann die Informationen in den Konfigurationsinformationen des Miniprogramm-Entwicklungstools. Die angeforderte Adresse muss sich unter dem zuvor gebundenen Domänennamen befinden. In diesem Projekt wird wx.request verwendet, um Daten vom Server abzurufen.

wx.request({
      url: that.data.couponData.requestUrl,
      data: that.data.couponData.queryData,
      header: {
          'content-type': 'application/json'
      },
      success: function(res) {
          var list = res.data.goodsList;
          console.log(res.data);
          for(var i in list) {
              list[i].quanUsedNum = parseInt(list[i].quanTotalNum) - parseInt(list[i].quanRemainNum);
            list[i].isImgRendered = false;
          }
        list[0].isImgRendered = list[1].isImgRendered = list[2].isImgRendered = list[3].isImgRendered = true;
          that.setData({"couponData.totalPage":res.data.totalPage});
          that.setData({"couponData.list":that.data.couponData.list.concat(list)});
        that.setData({"couponData.loadmore":!that.data.couponData.loadmore});
          that.setData({"couponData.queryData.pageNum":parseInt(that.data.couponData.queryData.pageNum) + 1});
          if(that.data.couponData.queryData.pageNum > that.data.couponData.totalPage) {
            that.setData({"couponData.isAction":false});
        }

        if(that.data.couponData.list.length < 1) {
            that.setData({"couponData.nodata":true});
        }
          if(f) {
              f();
          }
      }
  });

• Daten-Caching

Daten-Caching wird hier verwendet, da eine Suchfunktion erforderlich ist, die eine Datenübertragung zwischen Seiten beinhaltet, heißt es In der Adresse gibt es auch eine Methode, mit der Sie wx.setStorage verwenden können. Nach dem Lesen der Seite können Sie sie synchron lesen asynchron.

• Zwischenablage-Anwendung

  Mit der API des Miniprogramms können Sie beliebige Informationen ganz einfach in die Zwischenablage kopieren und dann einfügen.

    wx.setClipboardData({
        data: '【' + that.data.couponData.list[e.currentTarget.id].goodsTitle + '】复制这条信息，打开【手机淘宝】' + that.data.couponData.list[e.currentTarget.id].twoInOneKouling,
        success: function(res) {
            that.setData({"couponData.copyTip":true,"couponData.Kouling":that.data.couponData.list[e.currentTarget.id].twoInOneKouling})
        }
    });

• Vorlage
  In diesem Projekt sind die Seiten grundsätzlich ähnlich, es gibt jedoch subtile Unterschiede. Daher wird eine Vorlage verwendet. Erstellen Sie eine neue Vorlage/template.wxml. Namensattribut Muss festgelegt werden.

    <template name=&#39;navsearch&#39;>
    <view class=&#39;nav-search&#39;>
        <view class=&#39;nav-search__container space-between&#39;>
            <view class=&#39;nav-search__search&#39; wx:if=&#39;{{isSearch}}&#39;></view>
            <input class=&#39;nav-search__input&#39; placeholder=&#39;请输入关键词找券&#39; name=&#39;queryStr&#39; value="{{queryStr}}" bindfocus=&#39;toggleSearch&#39; bindconfirm=&#39;doQuery&#39; bindinput="syncQuery"/>
            <view class=&#39;nav-search__delete&#39; wx:if=&#39;{{!isSearch}}&#39; bindtap=&#39;deleteAll&#39;></view>
            <view class=&#39;nav-search__btn center&#39; wx:if=&#39;{{!isSearch}}&#39; bindtap=&#39;doQuery&#39;>搜索</view>
        </view>
  
        <view class=&#39;nav-filter&#39; bindtap=&#39;toggleFilter&#39;></view>
    </view>
    </template>
  
    <!--在其他文件中使用模板-->
    <import src="/template/template.wxml" />
    <template is=&#39;navsearch&#39; data="{{...couponData}}"></template>

• Modularisierung

  Für öffentliches JS können Sie es in eine spezielle JS-Datei schreiben und dann module.exports verwenden, um die Schnittstelle verfügbar zu machen.
  Gängige JS-Dateien werden mit require importiert.

    var common = require('../../common/common.js');
    ...
    common.f(); //调用

• redirectTo & navigationTo

  redirectTo leitet zu einer bestimmten Seite weiter und navigationTo öffnet eine neue Seite. Es lohnt sich zu erklären, dass die Seite mit „navigationTo“ geöffnet wurde führt dazu, dass das Miniprogramm einfriert.

• Teilen

    Page({
        onShareAppMessage: function () {
            return {
                title: 'your title！',
                path: '/xxxx/xxxx/xxxx',   //分享之后回到这个页面
                success: function(res) {
                    f(); //成功回调；
                },
                fail: function(res) {
                   f(); //失败回调；
  
                }
            }
        }
    })

• Verbessern Sie das reibungslose Verschieben von Listen

  Kurz gesagt, hier scrollt die Seite. Die Bilder in der Liste werden überall dort angezeigt, wo sie sich befinden. Die Implementierungsmethode ist wie folgt.

    //js文件
    Page({
        loadImg:function(e) {
            //计算接下来加载哪几张
            var index = Math.floor((e.detail.scrollTop - 8)/259.5);
            var temp = this.data.couponData.list; //完整的列表
            var min = Math.max(index * 2,0),max = Math.min(index * 2 + 8,temp.length);
            for(var i = min; i < max; i ++) {
                if(temp[i] && !temp[i].isImgRendered) {
                    temp[i].isImgRendered = true; //列表中的每一项有一个标记是否加载图片的的属性，默认false，随着页面滚动，一个个变成true。
                }
            }
            this.setData({"couponData.list":temp});
            temp = null;
        },
    })
  
    //wxml文件中在scroll-view上绑定事件。
    <scroll-view class="section" scroll-y="true" bindscroll=&#39;loadImg&#39;></scroll-view>

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