Zusammenfassung der Erfahrungen mit der WeChat-Entwicklungstechnologie

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 + '】复制这条信息，打开【手机淘宝】' + 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;请输入关键词找券&#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(); //调用

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(); //成功回调；
       },
       fail: function(res) {
         f(); //失败回调；

       }
     }
   }
 })

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; //列表中的每一项有一个标记是否加载图片的的属性，默认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!