《騰訊大家》小程序開發(fā)總結(jié)（下）
|
模板結(jié)構(gòu)：
<view class="box_start {{item.have == 1 ? 'on':'out'}}" catchtap="onRecommStart" data-id="{{item.id}}" data-parentid="{{item.first_letter}}" data-have="{{item.have}}"></view>
收藏按鈕處理方法：
onRecommStart:function(e){
let that = this;
let user = wx.getStorageSync('user') || {};
let id = e.currentTarget.dataset.id;
let parentid = e.currentTarget.dataset.parentid;
let have = e.currentTarget.dataset.have;
let list = vm.$data().authors; //新增
let alist = {"pid":parentid,"aid":id}
wx.showLoading({
title: '正在處理',
});
if (!have){
Api.fetchPost(Api.collection,{userid:user.openid,id:id,type:1,have:1}, (err, res) => {
if (res.ret == 200){
wx.hideLoading();
} else {...}
});
}else{
Api.fetchPost(Api.collection,{userid:user.openid,id:id,type:1,have:0}, (err, res) => {
if (res.ret == 200){
wx.hideLoading();
} else {...}
});
}
//此處找到操作的元素位置
list[parentid].map(item => {
if(item.id == id){
item.have = !item.have;
}
return item
});
vm.$set({authors:list});
setTimeout(function(){
//此處為刷新頂部收藏欄數(shù)據(jù)
that.getColAutData();
},1000)
},
4處為欄目收藏區(qū)域，使用了scroll-view組件，左右滑動(dòng)方式方便用戶查看自己已經(jīng)收藏的欄目。需要注意的是需要在小程序onLoad或onShow時(shí)，取到欄目的個(gè)數(shù)，再計(jì)算組件整體寬度。 模板：
<scroll-view scroll-x class="scrollcolumns">
<view class="scroll-view" style="width:{{wWidhth}}rpx">
<view class="first"></view>
<block wx:for="{{columnColtDatas}}" wx:key="item">
....
</block>
</view>
</scroll-view>
邏輯（請(qǐng)注意wWidhth值的計(jì)算）：
...
colData.data.map(item => {
Api.fetchGet(Api.column + item, (err, res) => {
if (res.data) {
columnAutData.push(res.data.channel);
if (columnAutData.length == colData.data.length) {
vm.$set({ columnColtDatas: columnAutData, wWidhth: (colData.data.length * 694) + 44, dataReady: true });
};
};
});
});
...
1.8 個(gè)人中心功能
個(gè)人中心主簡單呈現(xiàn)個(gè)人信息、用戶收藏的作者/欄目統(tǒng)計(jì)、用戶已瀏覽的文章記錄。值得注意的是，頁面onShow周期時(shí)需要刷新用戶的收藏統(tǒng)計(jì)信息。 1.9 瀏覽記錄功能瀏覽記錄模塊在個(gè)人中心頁面中： 1.數(shù)據(jù)來源為用戶瀏覽文章時(shí)的上報(bào)，服務(wù)端做時(shí)間戳記錄（瀏覽去重）等工作。 2.在開發(fā)列表加載邏輯時(shí)，需要注意驗(yàn)證一下拿到數(shù)據(jù)的一致性。因?yàn)檫\(yùn)營端可能已經(jīng)刪掉某篇文章，而用戶的上報(bào)的瀏覽記錄又是過去時(shí)，所以對(duì)于這種情況的發(fā)生，需要在數(shù)據(jù)字段做標(biāo)記、或者在刪稿流程上形成通知機(jī)制。 1.10 評(píng)論功能因?yàn)樾畔徍撕偷卿洃B(tài)的問題，騰訊大家小程序評(píng)論功能折中選擇調(diào)用【珊瑚評(píng)論】記錄接口，僅做評(píng)論內(nèi)容展示。 1.11 分享功能（含首頁）
分享功能都在onShareAppMessage()函數(shù)里，不同于右上角分享按鈕，如果在頁面中某個(gè)地方添加分享功能，需要button綁定屬性open-type=”share”。除此之外，還需要相關(guān)分享屬性如：
<button class="choice-share-b" catchtap="onShareAppMessage" open-type="share" data-title="{{item.title}}" data-tid="{{item.tid}}"></button>
1.12 評(píng)分功能
評(píng)分功能在文章底層頁中，用戶對(duì)文章的評(píng)分操作會(huì)形成：
1.這一篇文章的評(píng)分?jǐn)?shù)據(jù)依據(jù)。 在開發(fā)中，評(píng)分功能由多個(gè)功能函數(shù)組成，大致可以分為渲染、用戶操作、服務(wù)器操作回調(diào)、還有數(shù)據(jù)換算等一些函數(shù)方法。 1.13 海報(bào)生成功能
此功能報(bào)用于單篇文章及作者朋友圈傳播海報(bào)生成。 生成功能需要注意以下： 1.海報(bào)的生成使用小程序canvas組件（canvas功能及api能力詳見官網(wǎng)文檔）。 2.對(duì)于圖片素材，例如背景，二維碼等圖標(biāo)，需要wx.downloadFile()函數(shù)支持（詳見文后封裝的常用函數(shù)）。 3.圖片保存使用wx.canvasToTempFilePath()方法，調(diào)試階段建議使用wx.previewImage()來調(diào)試。 4.對(duì)于二維碼及素材的加載時(shí)機(jī)，根據(jù)自己業(yè)務(wù)場(chǎng)景來處理。 5.不同機(jī)型每行的文字大小及換行，需要用函數(shù)來處理。 6.熟悉理解scene參數(shù)，理解小程序不同方式（如掃碼）打開場(chǎng)景值。 7.理解wx.createSelectorQuery()接口。 8.對(duì)于圓角的頭像處理，最好交給后端進(jìn)行圖像處理。前端canvas處理的話需要考慮內(nèi)存開銷，當(dāng)圖片太大時(shí)不適合。 9.文中的小程序碼為B碼，微信官方給到的為圖片二進(jìn)制流，需要做接口類型指定處理。 10.適當(dāng)將素材進(jìn)行base64，并進(jìn)行本地緩存。 對(duì)于文字類型的canvas繪圖，需要經(jīng)常計(jì)算字符多少，換行計(jì)算。分享一下這兩個(gè)函數(shù)：
getTrueLength: function(str) {
let len = str.length,
truelen = 0;
for (let x = 0; x < len; x++) {
if (str.charCodeAt(x) > 128) {
truelen += 2;
} else {
truelen += 1;
}
}
return truelen;
},
cutString: function(str, leng) {
let len = str.length,
tlen = len,
nlen = 0;
for (let x = 0; x < len; x++) {
if (str.charCodeAt(x) > 128) {
if (nlen + 2 < leng) {
nlen += 2;
} else {
tlen = x;
break;
}
} else {
if (nlen + 1 < leng) {
nlen += 1;
} else {
tlen = x;
break;
}
}
}
return tlen;
}
1.14 消息模板（暫未上線）
消息模板根據(jù)產(chǎn)品的實(shí)際業(yè)務(wù)來做開發(fā)，建議低頻的推送用戶。 小程序模板功能中需要向接口傳遞formId。在發(fā)送給用戶id上，建議合理的進(jìn)行分組（如用戶訂閱欄目或者作者openid進(jìn)行分組）。如果發(fā)生文章更新，推送文章更新的消息模板。 二、樣式表現(xiàn)2.1 雪碧圖合并技巧小程序中出現(xiàn)了一個(gè)新單位rpx（responsive pixel），官方規(guī)定屏幕寬度為20rem，規(guī)定屏幕寬為750rpx。（在開發(fā)前盡量和視覺設(shè)計(jì)老師約定好設(shè)計(jì)文稿，例如750像素寬的設(shè)計(jì)稿能方便我們開展工作）。 雪碧圖：
雪碧圖自動(dòng)生成圖片及代碼（建議靈活使用，本工具用于移動(dòng)端項(xiàng)目雪碧圖生成）：
工具鏈接： https://code.ahthw.com/tools/csssprite/ 2.2 tabBar導(dǎo)航欄圖標(biāo)大小建議tabBar常規(guī)為圖標(biāo)搭配標(biāo)題，具體配置可參考官方文檔：鏈接 https://developers.weixin.qq.com/miniprogram/dev/framework/config.html
對(duì)比官方參考，大家小程序略去了tabBar.list.text配置，這樣的處理方式主要是為還原設(shè)計(jì)稿。每個(gè)圖標(biāo)素材的像素大小為81px*81px，通過嘗試：文字區(qū)域建議35px。
2.3 wxml數(shù)據(jù)綁定中巧用三元運(yùn)算合理的使用三元運(yùn)算，使代碼更簡潔。 樣式模板舉例：
<view class="box_start {{item.have == 1 ? 'on':'out'}}" catchtap="onRecommStart">...</view>
<view wx:if="{{item.tag == 'title' || item.tag == 'text'}}" class="{{item.tag}} {{item['level'] ? 'h2' : ''}}">...</view>
<view class="choice-dajia-view" style='height:{{viewIsshow == false ? windowHeight:"auto"}}' wx:if="{{!choiceWarp}}">...</view>
內(nèi)容顯示：
<view ...>{{item.have == 1 ? '取消收藏:'收藏''}}</view>
2.4 wxss技巧1.text-align:justify;可以將內(nèi)容左右對(duì)齊，使內(nèi)容外觀更整齊。 2.原生組件層級(jí)特別高，例如canvas，在長頁面時(shí)會(huì)留下陰影，巧用position:fixed屬性，在父層級(jí)可以使頁面整體長度等于視窗高度，避免陰影出現(xiàn)。 3.巧用-webkit-line-clamp屬性，如 word-break:break-all; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; 表示當(dāng)一段文字超過2行時(shí)，出現(xiàn)省略號(hào)。這樣在開發(fā)時(shí)不擔(dān)心文字多少，也不要求接口數(shù)據(jù)對(duì)字符串長度限制，并且不需要前端進(jìn)行函數(shù)截取。 4.當(dāng)頁面未加載成功時(shí)，loading展示盡量以樣式、本地的base64文件及css3動(dòng)畫組成，提高頁面性能。 5.對(duì)于可以預(yù)處理的數(shù)據(jù)，可以先提前加載渲染好，用樣式操控顯示隱藏。 6.rpx可以用在背景元素等css less屬性上。 7.@import “*.wxss”的使用能更好的進(jìn)行樣式復(fù)用。 8.為顯示的圖片view做一個(gè)背景樣式，容錯(cuò)圖片打不開等意外因素。 9.使用image組件的mode=”widthFix”，可以保證文章底層中配圖寬度不變的情況下高度自適應(yīng)。 三、代碼開發(fā)維護(hù)3.1 Wxpage框架騰訊大家小程序選用wxpage框架?！炬溄印?nbsp;https://github.com/tvfe/wxpage WXPage 是一個(gè)極其輕量的微信小程序開發(fā)框架，其中的API蘊(yùn)含了“極致頁面打開速度的思想”，為可維護(hù)性與開發(fā)效率而設(shè)計(jì)的功能，框架來自“騰訊視頻”小程序的項(xiàng)目沉淀。 框架對(duì)小程序生命周期的擴(kuò)展（如onNavigate、onAppLaunch等很多有意思的擴(kuò)展）、組件的依賴、實(shí)例方法(如 emit、$put）、實(shí)用函數(shù)等都有一系列獨(dú)特的包裝，適用于組件開發(fā)。 特別感謝sendguan(關(guān)開設(shè))在大家小程序開發(fā)中無私支持。 3.2 工具方法模塊化管理這里的工具方法指的是一些公用的方法或代碼。通常根據(jù)業(yè)務(wù)的需要，我們可以建立一到多個(gè)模塊，在模塊里封裝一些公用方法，一來方便調(diào)用，二來方便維護(hù)，如：
//Api.js let Api = {
fun1: function() {
...
},
fun2: function() {
...
},
};//接口module.exports = {
fun1: fun1
};
這里分享一些大家小程序開發(fā)中封裝的方法：
function downFile(url, callback) {
wx.downloadFile({
url: url,
success: function(res) {
callback(res.tempFilePath)
}
})
}// get請(qǐng)求方法function fetchGet(url, callback) {
wx.request({
url: url,
header: { 'Content-Type': 'application/json' },
success(res) {
callback(null, res.data)
},
fail(e) {
console.error(e)
callback(e)
}
})
}// post請(qǐng)求方法function fetchPost(url, data, callback) {
wx.request({
url: url,
method: 'POST',
header: { "Content-Type": "application/x-www-form-urlencoded" },
data: data,
success(res) {
callback(null, res.data)
},
fail(e) {
console.error(e)
callback(e)
}
})
}function fetchData(url, data, callback) {
wx.request({
method: 'GET',
url: url,
data: data,
success(res) {
callback(res.data)
},
fail(e) {
console.error(e)
callback(e)
}
})
}
function removeBlock(s) {
let regex = "\\((.+?)\\)";
return s.match(regex)[1]
};
function removeAt(target, index) {
return !!target.splice(index, 1).length;
}
function remove(target, item) {
let index = target.indexOf(item);
return index > -1 ? removeAt(target, index) : false;
}
function getDateDay(str) {
let string = str.toString().substr(0, 10)
return string.replace(/-/g, '.');
}
function sliceArray(array, size) {
let result = [];
for (let x = 0; x < Math.ceil(array.length / size); x++) {
let start = x * size;
let end = start + size;
result.push(array.slice(start, end));
}
return result;
};
function getArrayItems(arr, num) {
let temp_array = new Array();
for (let index in arr) {
temp_array.push(arr[index]);
}
let return_array = new Array();
for (let i = 0; i < num; i++) {
//判斷如果數(shù)組還有可以取出的元素,以防下標(biāo)越界
if (temp_array.length > 0) {
let arrIndex = Math.floor(Math.random() * temp_array.length);
return_array[i] = temp_array[arrIndex];
temp_array.splice(arrIndex, 1);
} else { break; }
}
return return_array;
}
function reWirteUrl(url) {
//console.log(url);
if (url !== null) {
if (!/^(http:\/\/)/i.exec(url)) {
return url.replace(/(http:)?(?=\/\/img1\.gtimg\.com\/)/g, 'https:');
} else if (url.indexOf("https://") == -1) {
return url.replace("http://", "https://");
}
} else {
return 'https://mat1.gtimg.com/news/images/static/weixin/wxss/basicprofile_r3.png';
}
}
3.3 巧用wxml模板wxml支持import，在大家小程序開發(fā)過程中，實(shí)際結(jié)合了Wxpage對(duì)子模板、組件的定義方法。 模板示例（代碼來源：何潤鋒工作室小程序）：
<!-- 引入子組件模板 -->
<import src="/comps/header.wxml" />
<import src="/comps/player.wxml" />
<import src="/comps/playerintro.wxml" />
<import src="/comps/recommvideo.wxml" />
<import src="/comps/recommnote.wxml" />
<import src="/comps/comment.wxml" />
<view class="wxpage" style="height:{{windowHeight}
|
