Résumé des exemples de développement d'applets WeChat

Cet article présente principalement des informations pertinentes sur le résumé des problèmes rencontrés lors du développement des mini programmes WeChat. Les amis dans le besoin peuvent s'y référer

Résumé des problèmes rencontrés lors du développement des mini programmes WeChat.

C'est la première fois que je développe officiellement un petit programme. Parlons du processus de développement et de l'expérience du petit programme sous les aspects suivants, en parlant principalement des fonctions utilisées dans ce projet.

Demande de données

Ce mini programme n'a pas beaucoup de fonctions supplémentaires, donc les données et le traitement des données sont cette fois le travail principal. Les mini-programmes fournissent des API. pour que les utilisateurs puissent demander des données à leurs propres serveurs. Il convient de mentionner qu'avant de développer un mini-programme, vous devez demander un appID sur la plate-forme publique WeChat et lier un nom de domaine. Le nom de domaine doit être le protocole https, puis. dans le mini programme Complétez les informations dans les informations de configuration de l'outil de développement du programme, et l'adresse demandée doit être sous le nom de domaine précédemment lié. Dans ce projet, wx.request est utilisé pour extraire des données du serveur.

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();
     }
   }
 });

Cache de données

Le cache de données est utilisé ici car une fonction de recherche est nécessaire. Cela implique un transfert de données entre les pages. Le mettre dans l'adresse est également une méthode. Vous pouvez également emprunter localStorage pour stocker les données dans localStorage, lisez-les simplement à partir de localStorage. elle est divisée en lecture synchrone et lecture asynchrone.

Application Presse-papiers

En utilisant l'API du mini programme, vous pouvez facilement copier n'importe quelle information dans le presse-papiers, puis la coller.

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})
   }
 });

Modèle

Dans ce projet, les pages sont fondamentalement similaires, mais il y a différences subtiles Il y a une différence, j'utilise donc un modèle et crée un nouveau template/template.wxml. L'attribut name doit être défini.

 <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>

Modularisation

Pour les js publics, vous pouvez l'écrire dans un fichier js spécial, puis Utilisez module.exports pour exposer les interfaces.
Les fichiers js courants sont importés à l'aide de require.

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

redirectTo et naviguerTo

redirectTo consiste à rediriger vers une page, et naviguerTo est ouvrir Pour les nouvelles pages, il convient de mentionner que l'utilisation de NavigTo pour ouvrir trop de pages entraînera le blocage du mini-programme.

Partager

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

       }
     }
   }
 })

Améliorer la fluidité du glissement de liste

En bref, partout où la page défile, les images de la liste seront affichées. La méthode de mise en œuvre est la suivante.

//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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!