Dieser Artikel enth?lt haupts?chlich relevante Informationen zur Zusammenfassung der Probleme, die bei der Entwicklung von WeChat-Miniprogrammen aufgetreten sind. Freunde in Not k?nnen darauf zurückgreifen.

Zusammenfassung der Probleme, die bei der Entwicklung von WeChat-Miniprogrammen aufgetreten sind

Dies ist das erste Mal, dass ich offiziell ein kleines Programm entwickelt habe. Lassen Sie uns unter folgenden Aspekten über den Entwicklungsprozess und die Erfahrung des kleinen Programms sprechen, haupts?chlich über die in diesem Projekt verwendeten Funktionen.

Datenabfrage

Dieses Miniprogramm verfügt nicht über viele zus?tzliche Funktionen, daher sind Daten und Datenverarbeitung die Hauptarbeit, die Miniprogramme den Benutzern bieten API damit Benutzer Daten von ihren eigenen Servern anfordern k?nnen. Es ist erw?hnenswert, dass Sie vor der Entwicklung von Miniprogrammen eine AppID auf der ?ffentlichen WeChat-Plattform beantragen und einen Dom?nennamen binden müssen https-Protokoll, und 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, weil wir eine Suchfunktion ausführen müssen, die zwischen Seiten erfolgt Das Einfügen der Daten in die Adresse ist auch eine Methode, mit der Sie wx.setStorage verwenden k?nnen, um die Daten nach dem Lesen aus localStorage zu lesen .

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 + '】復(fù)制這條信息，打開【手機(jī)淘寶】' + 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 feine Unterschiede, also habe ich eine Vorlage verwendet und eine neue erstellt template/ template.wxml, NameAttribut muss festgelegt werden.

 <template name=&#39;navsearch&#39;>
 <view class=&#39;nav-search&#39;>
   <view class=&#39;nav-searchcontainer space-between&#39;>
     <view class=&#39;nav-searchsearch&#39; wx:if=&#39;{{isSearch}}&#39;></view>
     <input class=&#39;nav-searchinput&#39; placeholder=&#39;請輸入關(guān)鍵詞找券&#39; name=&#39;queryStr&#39; value="{{queryStr}}" bindfocus=&#39;toggleSearch&#39; bindconfirm=&#39;doQuery&#39; bindinput="syncQuery"/>
     <view class=&#39;nav-searchdelete&#39; wx:if=&#39;{{!isSearch}}&#39; bindtap=&#39;deleteAll&#39;></view>
     <view class=&#39;nav-searchbtn 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 ?ffentliche JS kann es in eine spezielle JS-Datei geschrieben und dann mit module.exports verfügbar gemacht werdenSchnittstelle.
Gemeinsame JS-Dateien werden mit require importiert.

 var common = require('../../common/common.js');
 ...
 common.f(); //調(diào)用

redirectTo & navigationTo

redirectTo leitet zu einer bestimmten Seite weiter, und navigationTo ?ffnet eine neue Seite. Es lohnt sich zu erkl?ren, dass es zu viele gibt ?ffnen von Seiten führt dazu, dass das Miniprogramm einfriert.

Teilen

 Page({
   onShareAppMessage: function () {
     return {
       title: 'your title！',
       path: '/xxxx/xxxx/xxxx',  //分享之后回到這個頁面
       success: function(res) {
         f(); //成功回調(diào)；
       },
       fail: function(res) {
         f(); //失敗回調(diào)；

       }
     }
   }
 })

Verbessern Sie das reibungslose Verschieben von Listen

Kurz gesagt, hier scrollt die Seite. Das Bild in der Liste wird überall dort angezeigt, wo es sich befindet. 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; //列表中的每一項有一個標(biāo)記是否加載圖片的的屬性，默認(rèn)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>

【Verwandte Empfehlungen】

1. Besondere Empfehlung: Version ?php Programmer Toolbox“ V0.1 herunterladen

2. Quellcode der WeChat-Plattform herunterladen

3. Quellcode des Alizi-Bestellsystems herunterladen

Das obige ist der detaillierte Inhalt vonZusammenfassung der Erfahrungen mit der WeChat-Entwicklungstechnologie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!