Résumé de l'expérience technologique de développement 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 que les mini programmes fournissent aux utilisateurs. API permettant aux utilisateurs de demander des données à leurs propres serveurs. Il convient de mentionner qu'avant de développer des mini-programmes, vous devez demander un appID sur la plateforme publique WeChat et lier un nom de domaine. Protocole https, puis complétez les informations dans les informations de configuration du mini-outil de développement de programme. 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();
     }
   }
 });

Mise en cache des données

La mise en cache des données est utilisée ici car une fonction recherche est nécessaire, ce qui implique entre les pages de mettre le Les données dans l'adresse sont également une méthode.Vous pouvez également emprunter localStorage.Utilisez wx.setStorage pour stocker les données dans localStorage, lisez-les simplement à partir de localStorage. Divisez-les en lecture synchrone et en 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 existe des différences subtiles, j'ai donc utilisé un modèle et créé un nouveau template/ template.wxml, nameattribute doit être défini.

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

Modularisation

Pour les js publics, elle peut être écrite dans un fichier js spécial puis exposée à l'aide de module.exportsInterface.
Les fichiers js courants sont importés à l'aide de require.

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

redirectTo & naviguerTo

redirectTo redirige vers une certaine page et naviguerTo ouvre une nouvelle page Il vaut la peine d'expliquer que l'utilisation de naviguerTo est trop grande. les pages ouvertes entraîneront le gel 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

Bref, c'est là que la page défile, La image dans la liste sera affichée où qu'elle se trouve. 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>

【Recommandations associées】

1. Recommandation spéciale : "php Programmer Toolbox" version V0.1 Télécharger

2. Téléchargement du code source de la plateforme de compte public WeChat

3 Téléchargement du code source du système de commande Alizi

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!