preface

In recent 10 days, I have been studying the development of small programs. I have encountered some problems and interesting notes. Today, I summarized them and shared them with you

1. Use the template module in the applet

On a dark night, I suddenly found a very interesting thing, that is the template module, it can define a HTML5 module, and then use template, in any page of your small application, this greatly reduces the copy-paste in the application. Copy-paste (typically used for interfaces that need to be recycled). I’ll use my own template module to illustrate this.

Step 1: Create the page

Create a page in Pages that stores your template module so that other pages can reference it

"pages/index/index", "pages/find/find", "pages/gift/gift", "pages/activity/activity", "Pages /common/list",// Store template module page "pages/white/white"Copy the code

Step 2: Create the template module

Template module instance

<template name="job_list"> <view class="br"></view> <navigator url=".. /white/white" class="page_appmsg"> <view class="page"> <view class="page__hd "> <image class="page__thumb" src="{{image}}" mode="aspectFill"/> <view class="page__hd_title"> <view class="page__hd_title title">{{title}}</view> <view class="page__hd_title school">{{school}}</view> <view class="page__hd_title request"> <text class="page__hd_title pink">{{pink}}</text> <text class="page__hd_title time">{{time}}</text> <view class="page__hd_title cool"><i class="iconfont icon-zan1 active"></i>{{cool}}</view> </view> </view> </view> <view class='page__ft'> <i class="iconfont  icon-jian-copy active"></i>{{page__ft}}} </view> </view> </navigator>Copy the code

Wrap the HTML you need to reuse with a template tag and give it a name. (And, of course, writing WXSS, which I won’t show here because it’s not very important.) Once you’ve done this, you’re free to reference the module on any page where you need it.

Step 3: Reference the Template module on each page

① Reference template WXML and WXSS on WXSS and WXML of the interface you want to reference.

@import '.. /common/list.wxss'; <import src=".. /common/list.wxml" />Copy the code

② Add the template tag to the box you need. If you want to reference the template module, fill in the name of the module in is

<template is="job_list" data="{{jobs}}"/>
Copy the code

If you are referencing template in a loop you need to change it to data=”{{… The item}} “, such as:

<block wx:for="{{jobs}}" wx:key="{{index}}"> <template is="job_list" data="{{... item}}"/> </block>Copy the code

Code:

<import src=".. /common/list.wxml" /> <view class="swiper-tab"> <view class="swiper-tab-item {{activeIndex==0? }}" data-current="0" bindtap="clickTab"> </view> <view class="swiper-tab-item {{activeIndex==1? }}" data-current="1" bindtap="clickTab"> </view> <view class="swiper-tab-item {{activeIndex==2? </view> </view> <swiper current='{{activeIndex}}' bindchange="swiperTab"> <swiper-item> <view class="swiper-item__content"> <block wx:for="{{jobs}}" wx:key="{{index}}"> <template is="job_list" data="{{... item}}"/> </block> </view> </swiper-item> <swiper-item> <view class="swiper-item__content"> <block wx:for="{{jobs}}" wx:key="{{index}}"> <template is="job_list" data="{{... item}}"/> </block> </view> </swiper-item> <swiper-item> <view class="swiper-item__content"> <block wx:for="{{jobs}}" wx:key="{{index}}"> <template is="job_list" data="{{... item}}"/> </block> </view> </swiper-item> </swiper>Copy the code

Effect:

2. Data binding

It was a dark and windy night, and WHEN I realized the function of lighting up, I found that I only clicked on a place of praise, and the whole page of praise lit up, which is certainly not possible, the user clearly only interested in this one, how can you all light up? So I started thinking and realized that I had made a stupid mistake by not giving my data binding a value, which is like not giving a name: When it’s time for dinner, you go out and shout: Son, come home for dinner! The result is certainly the son of every family all went back to have a meal, however the rice of other people’s house all haven’t begun to cook, how do you shout somebody else to go back, you must shout: two dog son, go home to have a meal! Other people’s kids don’t follow them home. It’s the same thing with the click event, you have to bind each of your items with an ID, and you have to go through the array with an if statement, pull out the ID of each item, and see which of the items in the array matches the id of the item that you click on. Congratulations! You can now perform the light operation! The functions are as follows:

  • wxml

    <a wx:if="{{! item.isSelected}}" id="dianzan1" data-id = "{{item.id}}" bindtap="cool"> <i class="iconfont icon-dianzan1 active"></i> </a> <a wx:if="{{item.isSelected}}" id="dianzan1" data-id = "{{item.id}}" bindtap="cool"> <i class="iconfont icon-dianzan1-copy active"></i> </a>Copy the code

In the data, I give it not only an ID, but also a Boolean value, all set to false, so that I can pass wx:if=”{{! Item. isSelected}}” wx:if=”{{item.isSelected}}”

  • js

    Cool :function(e) {let jobs = this.data.jobs for(let key in jobs){// Console.log (jobs[key].id); / / the data interface and jobs data matching the if (jobs [key] id = = = e.c. with our fabrication: urrentTarget. Dataset. The id) {if (! Jobs [key]. IsSelected){// Jobs [key]. IsSelected = true; Wx. showToast({title: 'like successful ', icon: 'success', duration: 1500,})}else{// Jobs [key].isselected = false; Wx.showtoast ({title: 'unlike ', icon: 'success', duration: 1500,})}} this.setData({// will update the interface jobs: jobs,}); },Copy the code

  • rendering

3. Too many pull-down refresh triggers

Another dark and windy night, I suddenly found a bug! In the drop-down refresh of the miniprogram, I only added one group of data, but it generated 2 or 3 groups of data. (HERE I used the BindScrolltolower property of the Scroll View component.)

I was scared to go back and look at a wave of code, as follows:

lower:function(){ // if(i! =1){ // return // }i++; var that = this; // console.log(' dropdown load '); Wx.showtoast ({title:' loading', icon:'loading', duration: 1000,}); SetTimeout (function(){wx.showtoast ({title:' loading successful ', icon:'success', duration:1000,}); wx.request({ url:'https://www.easy-mock.com/mock/5a24075682614c0dc1bf0997/abc/abc', complete:(res)=>{ console.log(that.data.jobs); var jobs = that.data.jobs.concat(res.data.data.jobs) that.setData({ jobs:jobs, }) }, }) },1000);Copy the code

}, there is no logical error. After thinking about it, I think it might be caused by the function firing multiple times, so I add console.log(‘ dropdown load ‘) at the beginning of the function; In the debugger, I noticed that the pull-down refresh also happened twice. To be on the safe side, I defined a var I = 1 outside the page. And I added it to the outside of the function

if(i! =1){ return }i++;Copy the code

Testing again, I found only one set of data, so I was able to determine that the bug was caused by too many pull-down flusher. But how to solve it? I thought about it, and I thought I could use a lock to lock the function, and when the function is finished, I can open the function. The modified function is as follows:

    data: {
jobs:[],
windowHeigt:0,
pullUpAllow:true,
pullLowAllow:true
Copy the code

},

lower:function(){ var that = this; SetData ({pullLowAllow:false // Turn off switch}) console.log(' dropdown load '); Wx.showtoast ({title:' loading', icon:'loading', duration: 1000,}); SetTimeout (function(){wx.showtoast ({title:' loading successful ', icon:'success', duration:1000,}); wx.request({ url:'https://www.easy-mock.com/mock/5a24075682614c0dc1bf0997/abc/abc', complete:(res)=>{ console.log(that.data.jobs); Var jobs = tha.data.jobs. concat(res.data.data.jobs) that. SetData ({jobs:jobs, pullLowAllow:true) Open switch})},})},1000); }Copy the code

},

Results:

Projects show

In the end, I would like to show you the project THAT I have been Coding for N days. (Since I failed to select the topic at the beginning and didn’t complete any important functions, please don’t say t-T.)

  • Bottom tabBar toggles

  • Picture rotation and interface switching

  • Click on the event

  • Drop-down refresh and drop-down refresh

conclusion

  • To read the official documents of wechat small program, frequently use the API of small program, can save a lot of time and energy
  • Alibaba’s IconFont is really easy to use, many ICONS can be downloaded on it, not only PNG version and SVG version
  • Easy Mock is a great way to create a fake background for learning about small programs
  • The WeUI framework is a great help for small programs

The project address

Github:github.com/fsafafaf/da…

The original link: segmentfault.com/a/119000001…