nexweb
v4.0.10
Published
quick front tools for Gankao.com, base on nextJS
Downloads
364
Readme
安装
yarn add nexweb@latest
Ajax数据加载器组件GKAjaxQuery
import {GKAjaxQuery} from 'nexweb';
//组件仅支持客户端渲染时工作,服务器端渲染尚未支持
export default ()=> {
//apiUrl 参数为ajax接口地址
//body 为post的json内容对象
return <div>
<div>Top10订单:</div>
<GKAjaxQuery apiUrl={"//api.gankao.com/api-comment/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>Top10用户:</div>
<GKAjaxQuery apiUrl={"//api.gankao.com/api-comment/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>
}
GKAjaxQuery组件属性
- apiUrl ajax请求地址
- method 默认是post
- params 请求参数(原旧版命名为body,内部有兼容)
- headers 传送的headers值
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 中编辑