Summary of WeChat applet development examples

This article mainly introduces relevant information on the summary of problems encountered in the development process of WeChat Mini Program. Friends in need can refer to

Summary of Problems Encountered in the Development Process of WeChat Mini Program

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 data and data processing are the main work this time. Mini programs provide APIs to users for users to request data from their own servers. It is worth mentioning that before developing a 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, and then in the mini program Complete the information in the configuration information of the program's development tool, and 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 To transfer data between pages, putting it in the address is also a method. You can also borrow localStorage. Use wx.setStorage to store the data in localStorage. After the page jumps, just read it from localStorage. Read When fetching data, it is divided into synchronous reading and asynchronous reading.

Application of Clipboard

Using the API of the mini program, you can easily copy any information to the clipboard 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})
   }
 });

template

In this project, the pages are basically similar, but there are slight differences, So I used a template, created a new template/template.wxml, and the name attribute must be set.

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

Modularization

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

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

redirectTo & navigateTo

redirectTo redirects to a certain page, and navigateTo opens a new one page, it is worth mentioning that using navigateTo to open too many pages 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(); //失败回调；

       }
     }
   }
 })

##Improve the smoothness of list sliding

In short, wherever the page is scrolled, the pictures in the list will be 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>

The above is the detailed content of Summary of WeChat applet development examples. For more information, please follow other related articles on the PHP Chinese website!