gankaofront
v5.0.1-r2
Published
quick front tools for Gankao.com
Downloads
36
Readme
安装
yarn add nexweb@latest
Ajax数据加载器组件GKAjaxQuery
import {GKAjaxQuery} from 'gankaofront';
//组件仅支持客户端渲染时工作,服务器端渲染尚未支持
const GP_queryliveCourse = `
query{
w_getLiveCourses(
first:1,
skip:0
){
pageInfo{
hasNextPage
},
edges{
cursor,
node{
id,
firstLessonTime,
lastLessonTime,
displayTime,
assister{
realname,
headimgurl
},
}
},
aggregate{
count
}
}
}
`
export default ()=> {
//apiUrl 参数为ajax接口地址
//params 传统ajax请求的post请求的参数
//query graphQL查询表达式,当query有定义时,内部走graphQL模式;否则走传统ajax模式
//variables graphQL请求时的参数
return <div>
<div>传统Ajax请求数据Demo:</div>
<GKAjaxQuery apiUrl={"//comment.api.gankao.com/commentreader/loadSubject"}
params={{subjectKey:'test12'}}>
{({loading, data, error, refetch}) => {
if(loading) return <div>Loading ... </div>
if(error) return <div>发生错误:{JSON.stringify(error)} </div>
return <div>
<Button onClick={()=>{refetch({pageNo:2})}}>重新加载</Button>
<div>具体数据呈现{JSON.stringify(data)}</div>
</div>
}}
</GKAjaxQuery>
<div>GraphQL请求数据Demo:</div>
<GKAjaxQuery apiUrl={"https://live.api.gankao.com/g43k"}
query={GP_queryliveCourse}
variables={{skip:12}}>
{({loading, data, error, refetch}) => {
if(loading) return <div>Loading ... </div>
if(error) return <div>发生错误:{JSON.stringify(error)} </div>
return <div>
<Button onClick={()=>{refetch()}}>重新加载</Button>
<div>具体数据呈现{JSON.stringify(data)}</div>
</div>
}}
</GKAjaxQuery>
</div>
}
GKAjaxQuery组件属性
- apiUrl ajax请求地址
- method 默认是post
- params POST请求参数(原旧版命名为body,内部有兼容),或graphQL请求时的参数
- headers 传送的headers值
- query graphQL查询表达式,当query有定义时,内部走graphQL模式;否则走传统ajax模式
- variables graphQL请求时的参数
GKAjaxQuery组件Render Props回调参数
- loading 是否正在加载数据
- data 加载成功的数据
- error 加载时发生的错误
- refetch 再次请求,可传入动态追加的参数,典型场景就是分页信息
Render Props是什么? 移步:https://www.jianshu.com/p/5081d46798a3
微信自定义分享内容设置插件 WeixinJSSDKConfig
- 关于微信自定义分享,请先阅读: https://gankaowang.worktile.com/shared/3f8605e0a6c645cd848963c9b311962e
import {WeixinJSSDKConfig} from "nexweb";
export default ()=> {
//title 分享标题
//content 分享副标题
//link 链接网页
//imgurl 分享卡片上的缩略图
return <div>
<WeixinJSSDKConfig title={`自定义标题内容`}
content={'自定义副标题内容'}
link={typeof window === "object" ? window.location.href : ""}
imgurl='http://img.qiaoxuesi.com/group_buying.png'/>
</div>
}
组件的属性
- title 分享标题
- content 分享副标题
- link 链接网页
- imgurl 分享卡片上的缩略图
函数调用方式
- React组件内部实际是调用微信分享js服务所暴露的window.__reconfigWxShareSDK函数,它负责重新调用触发微信JSSDK的注册过程,将自定义的分享内容注册到微信外壳
__reconfigWxShareSD函数如下:
window.__reconfigWxShareSDK({title,content,link,imgurl})
后团管理视图的导航栏配置
于 config-client -> menuInfo.js 中编辑
config-client 的客户端加载适配
。。。