@aliretail/cloud-retail-npm

@aliretail/cloud-retail-npm

Install

$ npm install @aliretail/cloud-retail-npm --save

Usage

初始化

需要在 app.js 处初始化配置

import * as utils from '@aliretail/cloud-retail-npm/es/utils';

const config = {
  host: '', // 服务端接口域名
  activityUrl: '', // 活动链接
  pid: '', // 用于 arms 监控的 pid
  activityShareUrl: '', // 分享 url
  tokenUrl: '', // 登录接口
  userInfoUrl: '', // 更新用户信息接口
  phoneUrl: '', // 更新手机号接口
  messageUrl: '', // 消息订阅接口用来获取模板id
  messageSubUrl: '', // 消息订阅接口用来记录订阅情况
  authImage: '', // 授权页面的 icon
  authInfoText: '', // 授权用户信息的文案
  authInfoCancelText: '', // 授权用户信息的取消文案
  authPhoneText: '', // 授权手机号文案
  authPhoneCancelText: '', // 授权手机号取消文案
  authClassName: '', // 授权页面class
  tabbarPages: [], // tabbar 页面数组，值是 pageName
  pathMap: { // 路由表
    wechat: {
      pageName: 'pagePath'
    }
  },
}

utils.initEnv(config)

container

页面容器

import Container from '@aliretail/cloud-retail-npm/es/container';

const Page = Container({
  componentMap, // 同星环容器 componentMap
  requestConfig: {
    initUrl: '', // 渲染接口地址
    initData: '', // 渲染接口补充入参，会和 url 上的参数合并
    asyncUrl: '', // 异步接口
    submitUrl: '', // 渲染接口
    needAuth: '', // 页面是否需要鉴权使用
    needOnShowAuth: '', // 在上面参数的基础上对 tabbar 页面做特殊处理
    pageType: '', // 页面名称
    onShowReload: false // 页面 onshow（回退到页面） 的时候要不要重新渲染
    selectedIndex: 3, // 页面 H5 上的 tabbar 位置
    showAsyncMessage: false, // async 接口成功时返回的 message 需不需要显示
    showSuccessMessage: false, // submit 接口返回成功是需不需要提示 message
    responseTransform(res, responseType) {}, // 奥创接口返回数据处理函数
    requestTransform(res, requestType) {}, // 奥创接口请求数据处理函数
    renderBefore() {}, // 页面渲染前钩子函数，返回 false 则继续渲染，否则渲染返回的组件

  }
})

模块

奥创模块的 props 可以直接使用的属性

navigate, // 路由
eventListener, // 事件
universalConst, // 全局配置
pageId,
request, // 带有鉴权的请求方法
params, // 页面 query
reload, // 调用奥创 init 方法更新当前页面，调用的奥创的 reRender

navigate

统一跳转库

push(name, params){}, // name 是初始化配置的 pathMap 的 key，params 是要传递的参数，name 支持 h5#url
pop(step){}, // step 是返回几层
redirect(name, params){}, // 重定向，入参和 push 一致
getParams(props){}, // 获取当前页面的 query 对象，要传入当前页面的 props
navigateBySchema({actionLink, actionLinkMeta}){}, // B端搭建侧页面跳转配置，支持 /^(action|h5|appLink|live|notice)#(\S+)/ 
/**
 * action 本页链接锚点
 * h5 外部 web 链接
 * appLink 外部小程序页面
 * live 直播链接
 * notice 消息订阅
 *
 */

pay

统一支付库，目前只支持 h5 支付宝支付，h5 微信支付，微信小程序支付

/**
 * 入参 params 包含对象
 * payErrorMsg 失败时的提示
 * payStatus 后端返回的支付状态，UNKNOWN 的时候才去走支付，SUCCESS 和 FAIL 的时候直接进入成功/失败流程
 * payParams 渠道支付参数
 * h5PayUrl h5 支付宝支付的支付链接
 * onSuccess 成功回调
 * onFail 失败回调
 * resultPath 在没有传回调参数的时候配置跳转的结果页路径
 * 
 * 
 * 
 */
pay(params) {}

share

用于公共分享配置

小程序右上角。。。分享

wx.setStorageSync(pageType, { // pageType 是配置在页面的 config 里面的 pageType
  title,
  imageUrl,
  path, // 页面路径。需要传 / 开头的完整路径

})

小程序页面内分享 & 微信内网页分享

<Share 
  x-name="Share" 
  x-path="@aliretail/cloud-retail-npm/src/component/share"
  pageType={pageType} // 传这个可以省略上面。。。的设置
  shareVisible={shareVisible} // 受控是否展示分享弹窗
  onCloseDrawer={setShareVisible(false)} // 关闭分享弹窗逻辑
  share={{
    title,
    imageUrl,
    path, // 页面路径。需要传 / 开头的完整路径
    signatureInfo: { // 微信内网页分享
      appId,
      timestamp,
      nonceStr,
      signature
    }
  }}
  shareConfig={{
    popup: {
        title: "分享到",
        text: "取消",
        list: [
          {
            text: "微信好友",
            type: "friends",
            icon: "https://gw.alicdn.com/imgextra/i1/O1CN01VQbPGv1S4tcgvnNO9_!!6000000002194-2-tps-100-100.png"
          },
          {
            text: "朋友圈",
            type: "circle",
            icon: "https://gw.alicdn.com/imgextra/i2/O1CN01OnslJJ26mTwaIQ8SK_!!6000000007704-2-tps-100-100.png"
          },
          {
            text: "生成海报",
            type: "poster",
            icon: "https://gw.alicdn.com/imgextra/i2/O1CN01c9bDp31q1jfSPPQQe_!!6000000005436-2-tps-100-100.png"
          }
        ]
      }
  }}
  ></Share>

tabbar

用于在 H5 上模拟微信 tabbar

import renderNavigationBar from '@aliretail/cloud-retail-npm/es/tabbar';

// 设置当前tab索引
renderNavigationBar({
  selectedIndex: 1
});

// 设置跳转地址的域名
renderNavigationBar({
  host: 'www.taobao.com'
});

// 自定义数据源
renderNavigationBar({
  selectedIndex:2,
  navList: [
    {
      "activeIcon": "https://gw.alicdn.com/imgextra/i2/O1CN01OA6tNL28FAMvD6drP_!!6000000007902-2-tps-92-92.png",
      "icon": "https://gw.alicdn.com/imgextra/i4/O1CN01tK2DXE1XGs3arGV00_!!6000000002897-2-tps-92-92.png",
      "name": "首页",
      "path": "/feihe_shop/shopmember/home.html"
    },
  ]
})