在qap平臺(tái)中疫鹊，使用QN.navigator來跳轉(zhuǎn)
QN.navigator.push({
url: url,
title: '標(biāo)題',
query: {name:'7revor'},
});
使用這個(gè)導(dǎo)航進(jìn)入新頁面后髓迎，頁面?zhèn)鬟f參數(shù)需要手動(dòng)獲取
import {Util} from 'nuke';
let url = Util.Location.search;
let param = QN.uri.parseQueryString(url);
并且傳遞的頁面title只有在第一次進(jìn)去的時(shí)候會(huì)顯示反璃，刷新頁面后就會(huì)丟失title取董。
基于此種不方便的特性以及React高階組件盐茎，簡單實(shí)現(xiàn)了一個(gè)自動(dòng)封裝參數(shù)以及title的HOC
具體實(shí)現(xiàn)：
import {createElement, PureComponent, render} from 'rax';
import {Util} from 'nuke'
import QN from 'QAP-SDK'
/**
* 給組件包裝一層title,將QAP頁面?zhèn)鬟^來的參數(shù)封裝到組件的props中
* @param title：頁面標(biāo)題（刷新不丟失）
* @param component 組件原型
*/
export default function titleWrapper(title, component) {
//解析頁面參數(shù)
const param = QN.uri.parseQueryString(Util.Location.search.replace("?", ""))
//組件封裝
const Ele = _titleWrapper(title, param)(component)
render(<Ele/>)
}
function _titleWrapper(title, param) {
return function doTitle(WrappedComponent) {
return class extends PureComponent {
componentDidMount() {
//每一次渲染頁面時(shí)者冤，都重新設(shè)置標(biāo)題肤视，防止標(biāo)題丟失
QN.navigator.setTitle({
query: {
title: title
}
});
}
render() {
//封裝上一個(gè)方法得到的param到組件的props中
return (<WrappedComponent {...param} {...this.props}/>)
}
}
}
}
使用方式：
原本的React頁面實(shí)現(xiàn):
render(<MyComponent/>);
使用HOC之后：
import {titleWrapper} from Util
titleWrapper('我是標(biāo)題', MyComponent)
這樣一來，就可以在組件生命周期里使用 this.props來獲取qap頁面參數(shù)涉枫。
