-
ArthurSlog
-
SLog-95
-
Year·1
-
Guangzhou·China
-
October 11th 2018
勇於敢則殺 勇於不敢則活 此兩者 或利或害 天之所惡 孰知其故？
開發環境MacOS(Mojave 10.14 (18A391))
信息源
開始編碼
- 參考 W3C 標準
userAgent 屬性是一個只讀的字符串，聲明瞭瀏覽器用於 HTTP 請求的用戶代理頭的值。
一般來講，它是在 navigator.appCodeName 的值之後加上斜線和 navigator.appVersion 的值構成的。
例如：Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.2; SV1; .NET CLR 1.1.4322)。
注：用戶代理頭：user-agent header。
-
憑藉 userAgent，我在頁面加載前對頁面進行填充
-
在這裏 我分成了 mobile 和 pc 兩套頁面
-
當判斷客戶端是移動端的話，就裝載 mobile端 的頁面
-
當判斷客戶端是pc的話，就裝載 pc端 的頁面
///
/// 構造 虛擬dom對象（數據結構）
///
import React, { Component } from 'react'
// 引入mobile的四個主界面
import StoreIndex from './pages/pages_mobile/storeIndex/index'
import ShoppingCart from './pages/pages_mobile/shoppingCart/index'
import StoreActivity from './pages/pages_mobile/storeActivity/index'
import PersonalCenter from './pages/pages_mobile/personalCenter/index'
// 引入pc的主界面
import StoreIndex_Pc from './pages/pages_pc/storeIndex/index'
// 引入配置文件
import Config from './config.json'
class App extends Component {
constructor() {
super()
this.state = {
data: [],
padeId: []
}
}
render() {
let index
function browserRedirect() {
let sUserAgent = navigator.userAgent.toLowerCase()
let bIsIpad = sUserAgent.match(/ipad/i) == "ipad"
let bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os"
let bIsMidp = sUserAgent.match(/midp/i) == "midp"
let bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4"
let bIsUc = sUserAgent.match(/ucweb/i) == "ucweb"
let bIsAndroid = sUserAgent.match(/android/i) == "android"
let bIsCE = sUserAgent.match(/windows ce/i) == "windows ce"
let bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile"
if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
index = 'mobile'
}
else {
index = 'pc'
}
}
browserRedirect()
// 把四個主界面放在 mobile端 對象裏，根據 pageId 的值，選擇渲染的界面
// 例如：
// padeId = 0，意思就是渲染 StoreIndex 界面
// padeId = 1，意思就是渲染 ShoppingCart 界面
// padeId = 2，意思就是渲染 PromotionCenter 界面
// padeId = 3，意思就是渲染 PersonalCenter 界面
// mobile端
let mobile = [<StoreIndex changePage={pageId => this.changePage(pageId)} />, <ShoppingCart changePage={pageId => this.changePage(pageId)} />, <StoreActivity changePage={pageId => this.changePage(pageId)} />, <PersonalCenter changePage={pageId => this.changePage(pageId)} />]
// pc端
let pc = [<StoreIndex_Pc />]
// 判斷客戶端是mobile還是pc
// 根據結果 對頁面採用合適的佈局
if (1) {
index = mobile
//alert('當前客戶端是PC')
}
else if (0) {
index = pc
//alert('當前客戶端是Mobile')
}
else {
alert('請使用Pc瀏覽器或手機瀏覽器打開')
}
return <div className='page-container'>
{index[this.state.pageId]}
</div>
}
// componentDidMount
// 參考鏈接： https://reactjs.org/docs/react-component.html#componentdidmount
//
// componentDidMount()在頁面加載之前執行
componentDidMount() {
this.loadData()
console.log('componentDidMount OK')
// 載入StoreIndex頁面
this.setState({
pageId: 0
})
}
changePage(pageIds) {
this.setState({
pageId: pageIds
})
}
// 向服務器請求數據
loadData() {
fetch(Config.baseUrl + 'api/issues/GET')
.then(response => {
if (response.ok) {
console.log('Connect Server')
response.json()
.then(data => {
console.log('Total count of records:', data._metadata.total_count)
data.records.forEach(issue => {
issue.created = new Date(issue.created)
if (issue.completionDate)
issue.completionDate = new Date(issue.completionDate)
})
// 把服務端傳過來的所有數據 存儲在 本組件的全局對象 state裏面的 data對象裏
this.setState({ data: data })
// 把服務端傳過來的records數據 存儲在 本組件的全局對象 state裏面的 issues對象裏
this.setState({ issues: data.records })
})
} else {
console.log('Disconnect Server')
response.json()
.then(err => {
alert("Failed to fetch issues: " + err.message)
})
.catch(err => {
alert("Error in sending data to server: " + err.message)
})
}
})
}
}
// 導出虛擬dom對象，供主函數進行數據插入和最終webapp渲染
export default App;
-
工程的結構也 更新爲 更加明顯的結構
-
同時，設置 html節點的font-size爲一個定值
-
頁面上的字體採用 css3 的 rem單位特性（隨着根節點font-size的大小變化而變化）
-
這次也重寫了部分 pc端 頁面的樣式
-
更新了README，描述了 產品的設計框架
-
工程文件已經上傳至Github：https://github.com/BlessedChild/ArthurSlogStore_1
-
至此，實現了mobile端 和 pc端 的頁面適配。
- 歡迎關注我的微信公衆號 ArthurSlog
-
如果你喜歡我的文章 歡迎點贊 留言
-
謝謝