nexweb

安装

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 中编辑