Zusammenfassung der WeChat-Applet-Entwicklungsbeispiele

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.

Datenanforderung

Dieses Miniprogramm verfügt nicht über viele zusätzliche Funktionen, daher sind Daten und Datenverarbeitung die Hauptaufgabe dieses Mal, indem Miniprogramme APIs bereitstellen Benutzer können Daten von ihren eigenen Servern anfordern. Es ist erwähnenswert, dass Sie vor der Entwicklung eines Miniprogramms eine App-ID auf der öffentlichen WeChat-Plattform beantragen und einen Domänennamen binden müssen Vervollständigen Sie im Miniprogramm die Informationen in den Konfigurationsinformationen des Entwicklungstools des Programms. 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();
     }
   }
 });

Datencache

Datencache wird hier verwendet, da eine Suchfunktion benötigt wird. Es beinhaltet auch die Datenübertragung zwischen Seiten. Sie können auch wx.setStorage verwenden, um die Daten nach dem Lesen von localStorage zu speichern. Es ist in synchrones Lesen und asynchrones Lesen unterteilt.

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, aber es gibt sie Feine Unterschiede Es gibt einen Unterschied, also verwende ich eine Vorlage und erstelle eine neue template/template.wxml. Das 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 öffentliche JS können Sie es in eine spezielle JS-Datei schreiben und dann Verwenden Sie module.exports, um Schnittstellen verfügbar zu machen.
Gemeinsame JS-Dateien werden mit require importiert.

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

redirectTo & navigationTo

redirectTo dient zum Weiterleiten zu einer Seite und navigationTo dazu Zum Öffnen Bei neuen Seiten ist zu erwähnen, dass die Verwendung von „navigationTo“ zum Öffnen zu vieler Seiten dazu führt, 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, überall dort, wo auf der Seite gescrollt wird, werden die Bilder in der Liste angezeigt. 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 vonZusammenfassung der WeChat-Applet-Entwicklungsbeispiele. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!