@halofe/rax-miniapp-lib v0.1.4

@halofe/rax-miniapp-lib

• 工具包

Install

$ npm install @halofe/rax-miniapp-lib --save

Usage

初始化

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

import * as utils from '@halofe/rax-miniapp-lib/es/utils';

const baseConfig = {
  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'
    },
    web: {
      pageName: 'url'
    }
  },
  needPosition: false, // 是否需要授权地址位置，如果是的话会监听地理位置并在 header 里面带上
  needPositionToastUrls: [], // 必须要地理位置的接口
  eventCodeList: [], // 订阅消息使用的所有 code ，需要预先使用 code 请求返回 templateIds
  appProject: '', // 项目名称枚举
  appId: ''
}

// 用于小工具的多环境切换
const config = {
	envList: ['dev2', 'sit2'],
  baseConfig,
  dev2: {
    appId: 'wxb80d51b3f0b34108',
    host: 'https://mall-dev2.vgktq.cn',
  },
  sit2: {
    appId: 'wx4f9d18434c0d3705',
    host: 'https://mall-sit2.vgktq.cn',
  }
}

utils.initEnv(config) // 初始化项目配置
utils.initLaunchEnv(); // 初始化请求库

基础页面容器 Container

​

import Container from '@halofe/rax-miniapp-lib/es/container';

const Page = Container({
  componentMap, // 同星环容器 componentMap
  mockData, // 使用 mock 渲染页面
  validateConfig, // 校验逻辑
  requestConfig: {
    initUrl: '', // 渲染接口地址
    initData: (query) => {}, // 渲染接口补充入参，会和 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 则继续渲染，否则渲染返回的组件
		enableDebug: false, // 是否开启小工具
  }
})

搭建页面容器 bizContainer

​

import bizContainer from '@halofe/rax-miniapp-lib/es/bizContainer';

const HomePage = () => {
  return bizContainer({ 
    mockData: {}, // 用于 mock 渲染的数据
    page: 'category', // 页面类型，对应搭建侧的页面类型
    hasBack: false, // 是否有返回按钮
    mode:'fullscreen', // 是否全屏
    componentMap, // 对应奥创 componentMap
    onShowReload: true, // 返回时是否 reload
    onShow: () => {}, // 返回时触发
    // enableDebug: true, // 是否开启调试
  });
};

模块

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

navigate, // 路由
eventListener, // 事件
universalConst, // 全局配置
pageId, // 页面 id
request, // 带有鉴权的请求方法
params, // 页面 query
reload, // 刷新当前页面

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, // 页面路径。需要传 / 开头的完整路径

})

按钮分享

<button id={JSON.stringify({ title, imageUrl, path })} open-type="share"></button>

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

<Share 
  x-name="Share" 
  x-path="@halofe/rax-miniapp-lib/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

​

import renderNavigationBar from '@halofe/rax-miniapp-lib/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"
    },
  ]
})

消息订阅

utils.subscribeMessage({ eventCode, callback })

授权

utils.showAuthAll().then(res => {
  
})