Partagez une petite expérience de développement de programme

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

Cette fois, le 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 est que le mini-programme fournit des API aux utilisateurs pour leur permettre de demander des données à leurs propres serveurs. Il convient de mentionner qu'avant de développer le mini-programme, vous devez demander un appID sur la plate-forme publique WeChat et lier un nom de domaine au domaine. le nom doit être le protocole https. Complétez ensuite 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 de recherche est requise, ce qui implique un transfert de données entre les pages, en le mettant dans l'adresse est é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. de manière 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, donc un modèle est utilisé, créez un nouveau template/template.wxml, attribut de nom 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 utiliser module.exports pour exposer l'interface.
  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 convient d'expliquer que la page ouverte en utilisant naviguerTo Trop. entraînera 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, Les images de la liste sont affichées où qu'elles se trouvent. 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!