騰訊大家產(chǎn)品背景

《騰訊大家》是公司推出的中文互聯(lián)網(wǎng)專欄寫作服務(wù)產(chǎn)品。由于尋找有效信息的成本是非常大的，一些真正具有傳播價值的內(nèi)容，卻往往淹沒于信息洪流之中。如何將最有價值的信息以最快的速度呈現(xiàn)給用戶，正是《大家》產(chǎn)品設(shè)計的初衷?！洞蠹摇犯P(guān)注互聯(lián)網(wǎng)用戶更深入、更持久的思考與表達(dá)。我們希望呈現(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)注，擴(kuò)大騰訊大家內(nèi)容的出口。

騰訊大家是騰訊內(nèi)容出品部的優(yōu)質(zhì)欄目，內(nèi)容以質(zhì)量取勝，每日產(chǎn)出數(shù)篇精品內(nèi)容，因此，騰訊大家更加注重每一篇文章的傳播效率以及傳播速度。 
在小程序之前，騰訊大家內(nèi)容主要通過單篇推薦的方式在騰訊新聞客戶端、微信公眾號等途徑傳播，而PC端的聚合頁面(欄目、作者文章列表等)難以適應(yīng)目前移動傳播的形式，因此訪問數(shù)據(jù)量較少，歷史內(nèi)容價值缺失。

解決的實際問題

1.解決了基于移動端的內(nèi)容聚合、歷史內(nèi)容查詢，便于用戶瀏覽；

2.增加了作者（欄目）關(guān)注定制(收藏感興趣的作者/欄目)，使得用戶能持續(xù)接收高質(zhì)量作者的內(nèi)容，也便于產(chǎn)品側(cè)對于用戶關(guān)注的把握更精準(zhǔn)；

3.解決了內(nèi)容聚合頁面與微信文章的互通，將特定專題的文章聚合頁通過微信分享后，可以讓用戶快速地瀏覽到感興趣專題的內(nèi)容，也能夠讓歷史文章得到再次瀏覽和傳播；

4.增加了功能性H5的展示（比如在首頁最上方的banner 大家之選內(nèi)的開放編輯部玩法，號召用戶參與內(nèi)容制作），可以通過H5發(fā)起多樣的用戶活動，讓產(chǎn)品與用戶的交互更豐富；

5.將人工推薦變?yōu)橛脩糁鲃硬殚?。騰訊大家的每天精品內(nèi)容，通過web發(fā)出后，需要去各個媒體平臺進(jìn)行推薦（例如騰訊新聞客戶端、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團(tuán)隊在開發(fā)過程中的支持，感謝saturnzhao(趙冬明)、杰哥jillywang(王杰)對接口數(shù)據(jù)及標(biāo)準(zhǔn)文檔的指導(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進(jìn)行數(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)對底層的文章屬性有良好的標(biāo)準(zhǔn)json數(shù)據(jù)輸出能力。舉例一篇正文部分輸出：

{tag: "text", value: "對于不認(rèn)識Ayawawa的人，很難用一兩句話介紹她的理論。"}, {tag: "text", value: "簡單來說，她是個情感網(wǎng)紅，真名叫楊冰陽。"},
{tag: "text", value: "對于不認(rèn)識Ayawawa的人，很難用一兩句話介紹她的理論。"}
{tag: "text", value: "前些天她接受姜思達(dá)采訪的視頻播出后, 激進(jìn)派女權(quán)主義者們對她開始了新一輪的批評：說她跪舔“男權(quán)”、固化性別不平等、“物化”婚戀關(guān)系、“直男癌”。"}
{tag: "text", value: "但我覺得Ayawawa不應(yīng)該被罵得那么慘，而且重點是：她被罵的角度也不夠準(zhǔn)。"}
{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標(biāo)簽的富文本內(nèi)容。在小程序中是不能將這些帶有html標(biāo)簽的富文本內(nèi)容直接展示的。

1.4 作者展示

騰訊大家作者有近千名，而作者的新增并不頻繁，在數(shù)據(jù)端做以下處理：

1.定時抓取已有作者全部數(shù)據(jù)，然后進(jìn)行緩存，輸出帶分頁參數(shù)接口。 
2.在拉取數(shù)據(jù)時傳入用戶id，檢測用戶與作者對應(yīng)關(guān)系(如收藏，打分，分別對應(yīng)的欄目等。

在作者列表展示上做如下處理：

1.首次進(jìn)入作者頁加載數(shù)名作者數(shù)據(jù)。 
2.上拉加載做分頁傳參處理。 
3.重新回到作者頁面會刷新用戶收藏數(shù)據(jù)（包含已經(jīng)收藏及列表中的標(biāo)記）。

響應(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加上隨機(jī)數(shù)生成sessionId，然后openid和session_key存在session里。

4.小程序?qū)essionId存起來，每次訪問都帶上這個sessionId。

5.小程序請求登陸區(qū)內(nèi)接口，通過wx.checksession檢查登陸態(tài)，如果失效重新走上登錄流程，否則待上3rd_session到后臺進(jìn)行登陸驗證。

為什么有用戶登錄態(tài)：

1.小程序有以用戶為個人中心的功能應(yīng)用，比如作者欄目收藏、關(guān)注等。 
2.用戶敏感數(shù)據(jù)，只對用戶可見。

獲取用戶數(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)窗口。當(dāng)用戶授權(quán)后，信息緩存在Storage里，緩存的過期時間由具體的功能場景來控制。

1.7 收藏功能（含作者及欄目收藏）

首先將含有收藏功能的地方標(biāo)注出來：

1處收藏按鈕為作者收藏與欄目收藏，當(dāng)用戶按下按鈕后會變?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)：