《騰訊大家》小程序開發(fā)總結(jié)
|
騰訊大家產(chǎn)品背景《騰訊大家》是公司推出的中文互聯(lián)網(wǎng)專欄寫作服務(wù)產(chǎn)品。由于尋找有效信息的成本是非常大的，一些真正具有傳播價值的內(nèi)容，卻往往淹沒于信息洪流之中。如何將最有價值的信息以最快的速度呈現(xiàn)給用戶，正是《大家》產(chǎn)品設(shè)計的初衷?！洞蠹摇犯P(guān)注互聯(lián)網(wǎng)用戶更深入、更持久的思考與表達。我們希望呈現(xiàn)給用戶的，是經(jīng)得起時間考驗的文章，是時代最前沿的思想。它的表現(xiàn)，可能是一個專欄、一部電子書、一個屬于個人的頻道，甚至是一款小程序。 所謂“大家”，意在集華語寫作之大家手筆，為中文互聯(lián)網(wǎng)用戶提供最具魅力的經(jīng)典文字，打造最有力量的互聯(lián)網(wǎng)言論陣地、最有價值的網(wǎng)絡(luò)閱讀品牌。 騰訊大家小程序使用場景騰訊大家小程序根植于微信小程序功能，與公眾號精密結(jié)合運營，通過傳播引發(fā)網(wǎng)友關(guān)注，擴大騰訊大家內(nèi)容的出口。
騰訊大家是騰訊內(nèi)容出品部的優(yōu)質(zhì)欄目，內(nèi)容以質(zhì)量取勝，每日產(chǎn)出數(shù)篇精品內(nèi)容，因此，騰訊大家更加注重每一篇文章的傳播效率以及傳播速度。 基于聚合頁面的傳播需求，騰訊大家小程序解決了在移動端聚合及快速查找歷史內(nèi)容的需求。綁定小程序以后，在推送單篇文章時，可以配合推送作者文章列表、相關(guān)文章列表等定制頁面。 用戶可以通過微信文章入口、小程序收藏等功能，可以隨時隨地查看騰訊大家的最新內(nèi)容及歷史內(nèi)容。 解決的實際問題1.解決了基于移動端的內(nèi)容聚合、歷史內(nèi)容查詢，便于用戶瀏覽； 2.增加了作者（欄目）關(guān)注定制(收藏感興趣的作者/欄目)，使得用戶能持續(xù)接收高質(zhì)量作者的內(nèi)容，也便于產(chǎn)品側(cè)對于用戶關(guān)注的把握更精準； 3.解決了內(nèi)容聚合頁面與微信文章的互通，將特定專題的文章聚合頁通過微信分享后，可以讓用戶快速地瀏覽到感興趣專題的內(nèi)容，也能夠讓歷史文章得到再次瀏覽和傳播； 4.增加了功能性H5的展示（比如在首頁最上方的banner 大家之選內(nèi)的開放編輯部玩法，號召用戶參與內(nèi)容制作），可以通過H5發(fā)起多樣的用戶活動，讓產(chǎn)品與用戶的交互更豐富； 5.將人工推薦變?yōu)橛脩糁鲃硬殚?。騰訊大家的每天精品內(nèi)容，通過web發(fā)出后，需要去各個媒體平臺進行推薦（例如騰訊新聞客戶端、QQ minisite、QQ.com首頁，微信公眾號），而且昨天的文章被推薦之后，今天會被新文章取代，網(wǎng)友們只能看到今天的新文章，而通過小程序的交互，用戶點擊最新的文章之后也查閱到歷史文章，使得沉淀的內(nèi)容得到再次曝光。 騰訊大家小程序呈現(xiàn)內(nèi)容包含：首頁首頁聚合(tab)、作者列表（tab）、專欄聚合（tab）、個人中心（tab）、內(nèi)容底層、作者底層、欄目底層、活動底層（戰(zhàn)隊底層，專題底層）。 一、功能分析1.1 多端數(shù)據(jù)共享騰訊大家小程序要與大家官網(wǎng)( http://dajia.qq.com)呈現(xiàn)給用戶內(nèi)容保持一致，新的開發(fā)在不影響原有內(nèi)容原創(chuàng)平臺（http://ninja.webdev.com）的基礎(chǔ)上，增加小程序用戶中心，開發(fā)用戶對作者（欄目）的收藏、對文章評分、對文章歷史瀏覽記錄等功能。 感謝Ninja團隊在開發(fā)過程中的支持，感謝saturnzhao(趙冬明)、杰哥jillywang(王杰)對接口數(shù)據(jù)及標準文檔的指導(dǎo)。 1.2 首頁精選詳情內(nèi)容展示
三處小技巧：1.為了保證精選列表和web站點數(shù)據(jù)一致，將列表json數(shù)據(jù)緩存，這樣做的好處1是避免了多次重復(fù)請求，二是緩存了的數(shù)據(jù)可以根據(jù)實際運營要求做數(shù)據(jù)插入，滿足日常運營。 2.善用image組件，組件mode 有 13 種模式，其中 4 種是縮放模式，9 種是裁剪模式。利用組件特性，可以讓原有內(nèi)容配圖完美的展現(xiàn)。 3.列表下拉加載過程利用數(shù)組特性concat進行數(shù)組拼接（利用小程序數(shù)據(jù)驅(qū)動特征）。
<image class="choice-image" mode="aspectFill" src="{{item.n_image}}"></image>
mode=”aspectFill”模式縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來。也就是說，圖片通常只在水平或垂直方向是完整的，另一個方向?qū)l(fā)生截取。
Api.fetchGet(dajaMorEchoiceUrl, (err, res) => {
...
vm.$set({ firstData: vm.$data().firstData.concat(res.data) })
...
});
父組件注冊onReachBottom方法使用下拉加載后，將每次請求的返回數(shù)據(jù)使用concat與原數(shù)據(jù)拼接。 1.3 內(nèi)容底層展示小程序的核心是一個響應(yīng)的數(shù)據(jù)綁定系統(tǒng)，所以我們要展示一篇資訊詳情，需要有一份數(shù)據(jù)，通過這份數(shù)據(jù)來判斷這篇資訊是要渲染段落、表格、列表、圖片、還是視頻。 騰訊大家的內(nèi)容原創(chuàng)發(fā)布系統(tǒng)對底層的文章屬性有良好的標準json數(shù)據(jù)輸出能力。舉例一篇正文部分輸出：
{tag: "text", value: "對于不認識Ayawawa的人，很難用一兩句話介紹她的理論。"}, {tag: "text", value: "簡單來說，她是個情感網(wǎng)紅，真名叫楊冰陽。"},
{tag: "text", value: "對于不認識Ayawawa的人，很難用一兩句話介紹她的理論。"}
{tag: "text", value: "前些天她接受姜思達采訪的視頻播出后, 激進派女權(quán)主義者們對她開始了新一輪的批評：說她跪舔“男權(quán)”、固化性別不平等、“物化”婚戀關(guān)系、“直男癌”。"}
{tag: "text", value: "但我覺得Ayawawa不應(yīng)該被罵得那么慘，而且重點是：她被罵的角度也不夠準。"}
{tag: "image", title: "", src: "//img1.gtimg.com/cul/pics/hv1/92/70/2270/147624692.jpg"}
{tag: "title", level: "H2", value: "婚姻對不同階層的女性，根本不是一回事"}
對應(yīng)展示模板：
<block wx:if="{{detail.length > 0}}">
<block wx:for="{{detail}}" wx:key="item">
<view wx:if="{{item.tag == 'title' || item.tag == 'text'}}" class="{{item.tag}} {{item['level'] ? 'h2' : ''}}">{{item.value}}</view>
<block wx:if="{{item.tag == 'image'}}">
<image class="{{item.tag}}" mode="widthFix" src="{{item.src}}"></image>
<view class="imgalt">{{item.title}}</view>
</block>
</block>
</block>
<block wx:else>
<view class="p"></view>
</block>
另外，常規(guī)模式下資訊內(nèi)容從技術(shù)角度看是帶有html標簽的富文本內(nèi)容。在小程序中是不能將這些帶有html標簽的富文本內(nèi)容直接展示的。 1.4 作者展示
騰訊大家作者有近千名，而作者的新增并不頻繁，在數(shù)據(jù)端做以下處理：
1.定時抓取已有作者全部數(shù)據(jù)，然后進行緩存，輸出帶分頁參數(shù)接口。 在作者列表展示上做如下處理：
1.首次進入作者頁加載數(shù)名作者數(shù)據(jù)。 響應(yīng)到的數(shù)據(jù)格式：
作者模板結(jié)構(gòu)：
<view class="oloading" wx:if="{{ready}}" style="height:{{wHeight}}px">
</view>
<view class="body" wx:if="{{body}}">
<view class="num_index" wx:if="{{colAutData.length !== 0}}">
我的收藏
</view>
<view class="box_author" wx:if="{{colAutData.length !== 0}}">
<view class="no_author" wx:if="{{!dataReady}}">暫無收藏</view>
<block wx:for="{{colAutDatas}}" wx:key="item" wx:if="{{colAutData.length !== 0}}">
<view class="colltloading" wx:if="{{!dataReady}}"></view>
<view class="num_author" bindtap="onAuthor" data-id="{{item.id}}">
<image class="num-image" src="{{item.image}}"></image>
<view class="num_name">{{item.name}}</view>
<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>
</view>
</block>
</view>
<block wx:for="{{authors}}" wx:key="item">
<view class="num_index">
{{index}}
</view>
<view class="box_author">
<block wx:for="{{item}}" wx:key="author">
<view class="num_author" bindtap="onAuthor" data-id="{{item.id}}">
<image class="num_image" src="{{item.image}}"></image>
<view class="num_name">{{item.name}}</view>
<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>
</view>
</block>
</view>
</block>
</view>
下拉加載時數(shù)據(jù)數(shù)組處理方法
extendKey:function(array) {
let arr = [];
for(let p in array){
arr.push(p);
};
return arr;
},
getAuthorDataMore: function() {
...
wx.showNavigationBarLoading();
Api.fetchPost(Api.getAllAuthor, {userid: user.openid, perpage: 20, page: (vm.$data().page += 1) }, (err, res) => {
if (res.ret == 200) {
let list = res.data;
let alist = vm.$data().
let keyArr = that.extendKey(list);authors;
let akeyArr = that.extendKey(alist);
keyArr.map(item => {
akeyArr.map(eitem => {
if (item == eitem) {
alist[eitem] = alist[eitem].concat(list[item]);
keyArr.shift();
} else {}
});
keyArr.map(_item => {
alist[_item] = list[_item]
})
});
vm.$set({ authors: alist });
wx.hideNavigationBarLoading();
} else {}
});
...
}
1.5 用戶登錄態(tài)獲取引用小程序官方文檔的登錄流程圖
流程簡而言之： 1.在小程序上通過wx.login()獲取code。 2.將code傳到自己的服務(wù)器，然后將小程序的secret和appid與微信服務(wù)器交換openid和session_key。 3.將session_key加上隨機數(shù)生成sessionId，然后openid和session_key存在session里。 4.小程序?qū)essionId存起來，每次訪問都帶上這個sessionId。 5.小程序請求登陸區(qū)內(nèi)接口，通過wx.checksession檢查登陸態(tài)，如果失效重新走上登錄流程，否則待上3rd_session到后臺進行登陸驗證。 為什么有用戶登錄態(tài)：
1.小程序有以用戶為個人中心的功能應(yīng)用，比如作者欄目收藏、關(guān)注等。 獲取用戶數(shù)據(jù)示例：
getUsrAppId: function() {
let user = wx.getStorageSync('user') || {};
let userInfo = wx.getStorageSync('userInfo') || {};
wx.getUserInfo({
success: function(res) {
let objz = {};
objz.avatarUrl = res.userInfo.avatarUrl;
objz.nickName = res.userInfo.nickName;
wx.setStorageSync('userInfo', objz);
//userInfo
},
fail: function() {
console.log('用戶拒絕');
wx.setStorageSync('allow', { 'user': 'notallow' });
}
});
wx.login({
success: function(res) {
if (res.code) {
Api.fetchPost(Api.getOpenid, { code: res.code }, (err, res) => {
let _userObj = JSON.parse(res.data);
let obj = {};
obj.openid = _userObj.openid;
obj.expires_in = _userObj.expires_in;
wx.setStorageSync('user', obj);
});
} else {
console.log('獲取用戶登錄態(tài)失??！' + res.errMsg)
}
}
});
if ((!user.openid || (user.expires_in || Date.now()) < (Date.now() + 600)) && (!userInfo.nickName)) {
...
};
}
1.6 用戶信息獲取因為文章的評分、個人中心的頭像和昵稱都需要用到用戶信息。所以大家小程序在第一次打開后會自動彈出授權(quán)窗口。當用戶授權(quán)后，信息緩存在Storage里，緩存的過期時間由具體的功能場景來控制。
1.7 收藏功能（含作者及欄目收藏）首先將含有收藏功能的地方標注出來：
1處收藏按鈕為作者收藏與欄目收藏，當用戶按下按鈕后會變?yōu)橐咽詹?、再按下去則為取消收藏。在開發(fā)過程中，主要是對按鈕狀態(tài)的判斷 模板結(jié)構(gòu)：
<view class="writer-collet {{have == false ? 'edd':'cdd'}}" bindtap="writerColletButton" data-have="{{have}}" data-id="{{load.wid}}" data-parentid="{{author.first_letter}}" hover-class="writer-collet-hover"><view class="add" wx:if="{{!have}}"></view>{{allReady}}</view>
處理邏輯：
ColletButton: function(e) {
let id = e.currentTarget.dataset.id;
let have = e.currentTarget.dataset.have;
let parentid = e.currentTarget.dataset.parentid;
let user = wx.getStorageSync('user') || {};
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();
vm.$set({ allReady: "已經(jīng)收藏", have: true })
} else {...}
});
} else {
Api.fetchPost(Api.collection, { userid: user.openid, id: id, type: 1, have: 0 }, (err, res) => {
if (res.ret == 200) {
wx.hideLoading();
vm.$set({ allReady: "收藏", have: false })
} else {...}
});
};
}
2處和 3處 的收藏邏輯基本相同，只是3會判斷是否已經(jīng)收藏此作者 模板結(jié)構(gòu)： |
