WeChat development technology experience summary-WeChat Development-php.cn

WeChat development technology experience summary

Y2J

Release： 2017-05-15 13:32:22

Original

2572 people have browsed it

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 API to users for users to request data from their own servers. It is worth mentioning that before developing mini programs, 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 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: {
     &#39;content-type&#39;: &#39;application/json&#39;
   },
   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();
     }
   }
 });

Copy after login

Data cache

The data cache is used here because a search function is required, which involves data between pages Passing 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. When reading the data, it is synchronized. Read and asynchronous read.

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: &#39;【&#39; + that.data.couponData.list[e.currentTarget.id].goodsTitle + &#39;】复制这条信息，打开【手机淘宝】&#39; + 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 is created. wxml, name attribute must be set.

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

Copy after login

Modularization

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

 var common = require(&#39;../../common/common.js&#39;);
 ...
 common.f(); //调用

Copy after login

redirectTo & navigateTo

redirectTo redirects to a certain page, and navigateTo opens a new page. It is worth explaining that using navigateTo opens Too many pages will cause the mini program to freeze.

Share

 Page({
   onShareAppMessage: function () {
     return {
       title: &#39;your title！&#39;,
       path: &#39;/xxxx/xxxx/xxxx&#39;,  //分享之后回到这个页面
       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

【Related Recommendations】

1. Special Recommendation: "php Programmer Toolbox" V0.1 version download

2. WeChat public account platform source code download

3. Alizi order system source code download

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