gankaofront

安装

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 的客户端加载适配

。。。