第一次正式開發一個小程序，就從以下幾個方面來談一談小程序的開發過程和心得吧，主要說說這次專案中用到的功能。
這次的小程序，沒有太多的附加功能，所以資料以及資料的處理是這次的主體工作，小程式向用戶提供API，供用戶向自己的伺服器請求數據，值得一提的是，開發小程式之前，需要先在微信公眾平台申請appID，並且綁定域名，域名必須是https協議，然後在小程式的開發工具的配置資訊中完善訊息，請求的位址需要在前面綁定的網域下。這個專案中用到wx.request從伺服器拉取資料。
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();
}
}
});登入後複製
這裡使用資料快取是因為需要做一個搜尋功能，就涉及到頁面之間的資料傳遞，放在位址中也是一種方法，借用一下localStorage也可以，使用wx.setStorage將資料儲存到localStorage中，頁面跳轉之後，在從localStorage中讀取就可以了，讀取資料的時候分同步讀取和異步讀取。
剪切板的應用程式
借用小程式的API可以很方便的將任何資訊複製到剪切板，然後就可以貼上了。
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/template.wxml，name屬性必須要設定.
<template name='navsearch'>
<view class='nav-search'>
<view class='nav-search__container space-between'>
<view class='nav-search__search' wx:if='{{isSearch}}'></view>
<input class='nav-search__input' placeholder='请输入关键词找券' name='queryStr' value="{{queryStr}}" bindfocus='toggleSearch' bindconfirm='doQuery' bindinput="syncQuery"/>
<view class='nav-search__delete' wx:if='{{!isSearch}}' bindtap='deleteAll'></view>
<view class='nav-search__btn center' wx:if='{{!isSearch}}' bindtap='doQuery'>搜索</view>
</view>
<view class='nav-filter' bindtap='toggleFilter'></view>
</view>
</template>
<!--在其他文件中使用模板-->
<import src="/template/template.wxml" />
<template is='navsearch' data="{{...couponData}}"></template>登入後複製
模組化
對於公共的js可以寫在一個專門的js檔案中，然後使用module.exports暴露介面。
通用的js檔案使用require引入。
var common = require('../../common/common.js');
...
common.f(); //调用
登入後複製
redirectTo & navigateTo
redirectTo是重新導向至某頁，navigateTo是開啟新的頁面，值得說明的一點是，使用navigateTo開啟的頁面太多會導緻小程式卡頓。
分享
Page({
onShareAppMessage: function () {
return {
title: 'your title！',
path: '/xxxx/xxxx/xxxx', //分享之后回到这个页面
success: function(res) {
f(); //成功回调；
},
fail: function(res) {
f(); //失败回调；
}
}
}
})登入後複製
提高清單滑動的流暢性
#簡而言之就是頁面捲動到哪裡，清單中的圖片就顯示到哪裡，實作方法如下。
//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='loadImg'></scroll-view>登入後複製
以上是分享一個小程式開發心得的詳細內容。更多資訊請關注PHP中文網其他相關文章！
