Omi實戰-QQ附近用戶列表Web頁

• 原文地址https://github.com/AlloyTeam/omi/blob/master/docs/deep_in/cn_nearby.md

寫在前面

Omi很適合大型複雜的Web頁面開發，例如一些Web在線工具的開發。可是製做這種簡單的QQ附近用戶列表Web頁，也不會有大炮哄蚊子的感受。

項目開始以前，實現選擇一個腳手架。可使用omi-cli快速建立項目腳手架。腳手架主要基於 Gulp + Webpack + Babel + BrowserSync 進行開發和部署。

Gulp用來串聯整個流程，Webpack + Babel讓你能夠寫ES6和打包，BrowserSync用來幫你刷瀏覽器，不用F5了。

這裏須要注意的是，BrowserSync會啓動localhost:3000致使你的AJAX請求跨域而沒法拿到數據。

因此，要使用Fiddler並配置Extention：

目錄

目錄結構也是和Omi Github上的scaffolding同樣。
組件全放在component目錄，公共的工具庫放在common，其餘資源文件放在asset裏。

命令

開發

npm run dev

發佈

npm run dist

開始寫碼

萬事具有，開始寫碼。先寫組件：

import Omi from 'omi'

class UserList extends Omi.Component {
    constructor(data) {
        super(data)
    }

    install() {
        this.data.uin_info || (this.data.uin_info = [])
        this.data.uin_info.forEach(user => {
            this.prepareData(user)
        })
    }
    
    prepareData(user){
        user.desc_d = user.desc.split(" ")[0]
        user.desc_t = user.desc.split(" ")[1]
        user.isBoy = user.sex === "男"
        user.qlogo = user.url.replace("http://", location.protocol + "//").replace(/&/g, "&")
        if (user.profession_desc) {
            user.hasProfession_desc = true
        }
    }
    
    appendUsers (users) {
        users.uin_info && users.uin_info.forEach(user =>{
            this.prepareData(user)
            this.data.uin_info.push(user)
        })
        this.update()
    }

    sendGift(uin, nick, qlogo) {
        //送禮物並關閉webview,此處省略
        //..
        //..
    }

    render() {
        return `
<div class="user_list">
    {{#uin_info}}
    <div class="item" onclick="sendGift('{{uin}}','{{nick}}','{{qlogo}}')">
        <div class="qlogo">
            <img style="width: 70px;" src="{{qlogo}}" />
        </div>
        <div class="main b1 bb">
            <div class="nick">{{{nick}}}</div>
            <div class="icons">
                {{#isBoy}}<span class="boy_age"><img src="component/user_list/boy.png" alt="" /><span>{{age}}</span></span> {{/isBoy}}
               {{^isBoy}}<span class="girl_age"><img src="component/user_list/girl.png" alt="" /><span>{{age}}</span></span> {{/isBoy}}
                {{#hasProfession_desc}} <span class="profession"><span>{{profession_desc}}</span></span> {{/hasProfession_desc}}
            </div>
            <div class="action">{{{intro}}}</div>
        </div>
        <div class="distance_info">{{desc_d}} · {{desc_t}}</div>
    </div>
    {{/uin_info}}
    <div style="text-align:center;font-size:13px;line-height:30px;height:30px;"><span class="loading"></span> 加載中...</div>
</div>
`
    }

    style() {
        return `


.qlogo {
    overflow: hidden;
    width: 70px;
    height: 70px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    top: 10px;
    left: 12px;
}
...
...
..這裏省略大量.....
...
...

.distance_info {
    position: absolute;
    top: 15px;
    right: 9px;
    color: #7B7B84;
    font-size: 10px;
}

        `
    }
}

export default UserList

組件裏面有5個方法:

• constructor 組件的構造函數，生命週期的一部分，其實在super上面和super調用下面能夠對data作一些處理。super之上不能拿到this
• install 組件的初始化安裝，生命週期的一部分，這裏也能夠拿到用戶傳進的data進行處理
• prepareData 對數據進行一些處理來知足模板的渲染
• appendUsers 新增數據，用來處理用戶向下滾動的load more 的行爲的時候調用
• sendGift 送禮物，點擊每一項的時候會有送禮物的行爲，業務相關，能夠無視..

其餘兩個方法的render和style用來生成組件的HTML和局部CSS，再也不敘述。
render裏面使用了mustache.js模板引擎；
若是使用omi.lite.js版本(不包含mustache.js模板引擎)的話，你也可使用ES6 map去遍歷數據生成HTML，或者重寫 Omi.template去使用任意你喜歡的模板引擎，很是靈活方便。

這裏友情提醒一下，若是使用webstorm的話，能夠把js version設置成JSX Harmony或者ECMAScript 6，這樣纔是寫ES6+的姿式。

下面來看index.js:

import Root from './config.js'
import Omi from 'omi'
import UserList from '../component/user_list/index.js'

Omi.makeHTML('UserList', UserList)

class Main extends Omi.Component {
    constructor(data) {
        super(data)
    }

    installed() {
        window.onscroll = () => this.loadMore()
        this.requestData(data => this.list.appendUsers(data))
    }

    loadMore() {
        const body = document.body,
            html = document.documentElement,
            height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight),
            vp_height = window.innerHeight

        if (height - document.body.scrollTop - vp_height < 200) {
            this.requestData(data => this.list.appendUsers(data))
        }
    }

    requestData(callback) {
        if (Root.isDev) {
            require.ensure([], ()=> {
                callback(require('./mock_data.js').default)
            })
        }else{
            //ajax 請求數據，這裏省略
        }
    }

    render() {
        return `
    <div class="main">
        <UserList name="list" />
    </div>`
    }
}

Omi.render(new Main(),'body')

經過Omi.makeHTML('UserList', UserList)這句代碼，UserList變成了能夠嵌套至render方法中的標籤。如：

render() {
        return `
    <div class="main">
        <UserList name="list" />
    </div>`
    }

下面這行代碼，是監聽滾動，快滾動到底部的時候在loadMore裏面會去請求。

window.onscroll = () => this.loadMore()

經過height - document.body.scrollTop - vp_height < 200判斷用戶快要滾動底部，滾動到底部有個加載更多的行爲，即：

if (height - document.body.scrollTop - vp_height < 200) {
    this.requestData(data => this.list.appendUsers(data))
}

requestData是去服務器請求分頁的數據，請求成功，會去調用this.list.appendUsers進行數據的添加。
慢着？this.list哪裏來的？appendUsers又是哪裏定義的方法？且看下面：

<UserList name="list" />

上面標記的name，讓你能夠直接經過this.list訪問到UserList對象的實例，因此也就能夠調用它的appendUsers方法！

再來看下數據模擬：

if (Root.isDev) {
        require.ensure([], ()=> {
            callback(require('./mock_data.js').default)
        })
    }

這裏在dev環境下是mock數據，使用了require.ensure，這樣當你npm run dist的時候，mock的數據就不會被打包進js裏了！！

最後

好了，就這麼多，Omi讓代碼真心方便簡潔~~~

相關地址

• 演示地址
• 源碼地址

招募計劃

• Omi的Github地址https://github.com/AlloyTeam/omi
• 若是想體驗一下Omi框架，請點擊Omi Playground
• 若是想使用Omi框架，請閱讀 Omi使用文檔
• 若是想一塊兒開發完善Omi框架，有更好的解決方案或者思路，請閱讀 從零一步步打造web組件化框架Omi
• 關於上面的兩類文檔，若是你想得到更佳的閱讀體驗，能夠訪問Docs Website
• 若是你懶得搭建項目腳手架，能夠試試Scaffolding for Omi
• 若是你有Omi相關的問題能夠New issue
• 若是想更加方便的交流關於Omi的一切能夠加入QQ的Omi交流羣(256426170)