前言
最近10幾天都在學習小程式的開發，遇到了一些問題和筆記有趣的東西，今天總結了一下，和大家分享
1.小程式中的template模組使用
在一個月黑風高的夜晚，我突然發現一個很有意思的東西，那就是template模組，它可以將你定義的一個HTML5模組包住，然後利用template，在你的小程式任意一個頁面使用，這樣極大的減少了程式中的複製-貼上，複製-貼上(一般用於需要迴圈使用的介面)。下面就用我自己的一個template模組來講解下。
第一步：建立頁面
在pages裡面建立儲存你template模組的頁面，便於其他頁面對其的引用
"pages/index/index",
"pages/find/find",
"pages/gift/gift",
"pages/activity/activity",
"pages/common/list",//儲存template模組的頁面
"pages/white/white"
複製程式碼第二步：建立template模組
template模組例項
<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>
複製程式碼在你需要重複使用的html用一個template標籤包起來，並給它取個名字 。 （當然了，還有WXSS的編寫，這裡因為不是很重要我就不放出來了） 完成了這步，你就可以盡情的在你需要這個模板的頁面引用這個模組了。
第三步：在各個頁面引用template模組
①在你想要引用的介面的WXSS和WXML上引用template的wxml和wxss，
@import '../common/list.wxss';
<import src="../common/list.wxml" />
複製程式碼②在你需要的盒子裡面新增template標籤，你想要引用那個template模組，就在is裡面填哪個模組的名字
<template is="job_list" data="{{jobs}}"/>
複製程式碼如果你是在一個迴圈裡面引用的template就需要改為data="{{...item}}"如：
<block wx:for="{{jobs}}" wx:key="{{index}}">
<template is="job_list" data="{{...item}}"/>
</block>
複製程式碼程式碼：
<import src="../common/list.wxml" />
<view class="swiper-tab">
<view class="swiper-tab-item {{activeIndex==0?'active':''}}" data-current="0" bindtap="clickTab">活動</view>
<view class="swiper-tab-item {{activeIndex==1?'active':''}}" data-current="1" bindtap="clickTab">視訊</view>
<view class="swiper-tab-item {{activeIndex==2?'active':''}}" data-current="2" bindtap="clickTab">直播</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>
複製程式碼效果圖：
2.資料繫結
又是一個月黑風高的夜晚，我在實現點亮的功能的時候，發現我只點了一個地方的點贊，整個頁面的點贊都亮了起來，這肯定是不行的，使用者明明只對這一個感興趣，你怎麼能全部點亮呢？於是我開始了思考，發現我犯了一個十分愚蠢的問題，那就是沒有給我的資料繫結一個值，這就好像沒有給喊名字一樣：到了飯點你出去大喊一聲:兒子,回家吃飯了!結果肯定是家家的兒子都回去吃飯了，然而別人家的飯都還沒開始煮呢，你怎麼就喊人家回去了呢，你肯定得喊：二狗子，回家吃飯了！別人家的娃才不會也跟著回家。這和點選事件是一個道理的，你必須給你的每項資料繫結一個id，用if語句，將陣列遍歷一遍，將每個資料的ID拿出來看看，看下你點的這個資料的ID，與陣列中哪個相符合。如何成功配對了 ，恭喜，你可以執行點亮操作了！ 功能實現如下：
-
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> 複製程式碼
在資料中，我不僅給了它一個ID，還給了它一個布林值，並且全部定為false，這樣便可以通過 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); //將介面的資料與jobs的資料進行匹配 if (jobs[key].id === e.currentTarget.dataset.id){ if (!jobs[key].isSelected){ //處於未點亮狀態時的操作 jobs[key].isSelected = true; wx.showToast({ title: '點贊成功', icon: 'success', duration: 1500, }) }else{ //處於點亮時的操作 jobs[key].isSelected = false; wx.showToast({ title: '取消點贊', icon: 'success', duration: 1500, }) } } } this.setData({ // 將介面更新 jobs : jobs, }); }, 複製程式碼 -
效果圖
3.下拉重新整理觸發過多問題
又是一個月黑風高的夜晚，我突然發現了一個bug！在小程式下拉重新整理時，我明明只加了一組資料，然而卻刷出來了2到3組資料，（這裡我使用的是scroll-view元件的bindscrolltolower屬性）
嚇得我趕緊回去看了一波程式碼，如下：
lower:function(){
// if(i!=1){
// return
// }i++;
var that = this;
// console.log('下拉載入');
wx.showToast({
title:'載入中',
icon:'loading',
duration: 1000,
});
setTimeout(function(){
wx.showToast({
title:'載入成功',
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);
複製程式碼}, 仔細看看，發現並沒有邏輯錯誤，我思前想後，覺得有可能是函式多次觸發導致的，於是我在函式的開始加入 console.log('下拉載入');在偵錯程式中，我發現下拉重新整理也是跟著出現了2次，為了更加保險，我在page外定義了一個var i = 1；並在函式外面加上了
if(i!=1){
return
}i++;
複製程式碼再次測試，發現只出現了一組資料，由此我確定了這個bug是由於下拉重新整理觸發過多的原因。但是怎麼解決呢，我想了想，覺得可以用一個鎖，把這個函式鎖起來，等函式執行完畢，在把函式開啟。 修改後的函式如下：
data: {
jobs:[],
windowHeigt:0,
pullUpAllow:true,
pullLowAllow:true
複製程式碼},
lower:function(){
var that = this;
if(that.data.pullLowAllow) { //確定開關的開啟與否
that.setData({
pullLowAllow:false //關閉開關
})
console.log('下拉載入');
wx.showToast({
title:'載入中',
icon:'loading',
duration: 1000,
});
setTimeout(function(){
wx.showToast({
title:'載入成功',
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,
pullLowAllow:true //載入完畢，開啟開關
})
},
})
},1000);
}
複製程式碼},
結果：
專案展示
在最後，也把我辛苦Coding了N天的專案展示一下給大家吧 （由於一開始選題的失敗，並沒有完成什麼重要的功能，大家就別說出來了T-T）
- 底部tabBar切換
- 圖片輪播與介面切換
- 點選事件
- 下拉重新整理與上拉重新整理
總結
- 要熟讀微信小程式官方文件,勤用小程式自帶的API，可以節省很多時間和精力
- 阿里巴巴的iconfont是真的好用，很多圖示都可以在上面下載，不僅有png版還有svg版
- Easy Mock 可以建立一個假後臺，對於我們學習小程式有很大的幫助
- weui框架對小程式有很大的幫助
專案地址
github：github.com/fsafafaf/da…