Share a small program development experience

This is the first time I have officially developed a small program. Let me talk about the development process and experience of the small program from the following aspects, mainly talking about the functions used in this project.

• Data Request

This mini program does not have many additional functions, so the data and data processing are this time The main work is that the mini program provides APIs to users for users to request data from their own servers. It is worth mentioning that before developing the mini program, you need to apply for an appID on the WeChat public platform and bind a domain name. The domain name must be https protocol. Then complete the information in the configuration information of the mini program development tool. The requested address needs to be under the previously bound domain name. In this project, wx.request is used to pull data from the server.

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

• Data cache

The data cache is used here because a search function is required, which involves data transfer between pages. It is also a method in the address. You can also borrow localStorage. Use wx.setStorage to store the data in localStorage. After the page jumps, just read from localStorage. When reading the data, it is divided into synchronous reading and Read asynchronously.

• Clipboard application

  You can easily copy any information to the clipboard by borrowing the API of the applet, and then paste it.

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

  Copy after login

• Template
  In this project, the pages are basically similar, but there are subtle differences, so a template is used, and a new template/template.wxml is created. The name attribute must be set up.

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

  Copy after login

• Modularization

  For public js, you can write it in a special js file, and then use module.exports to expose the interface.
  Common js files are introduced using require.

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

  Copy after login

• redirectTo & navigateTo

  redirectTo redirects to a certain page, and navigateTo opens a new page. It is worth mentioning that there are too many pages opened using navigateTo. It will cause the mini program to freeze.

• Share

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

  Copy after login

• Improve the smoothness of list sliding

  In short, where the page scrolls, in the list Where the picture is displayed, the implementation method is as follows.

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

  Copy after login

  The above is the detailed content of Share a small program development experience. For more information, please follow other related articles on the PHP Chinese website!