@aistarfish/minicomponent

海心小程序组件库

Usage no npm install needed!

<script type="module">
  import aistarfishMinicomponent from 'https://cdn.skypack.dev/@aistarfish/minicomponent';
</script>

README

海心小程序组件库

包含打点 ui 组件 统一 util 请求等 打点组件包含小程序原生和小程序 h5

维护文档

  1. 安装
 npm i
  1. 更新或者新增组件

a. 在 src 下新建组件文件夹开发
b. 组件初始化依赖对应小程序,统一先放到 utilsConfig 中,该模块是所有模块对小程序依赖,一处初始化,其他模块就不用初始化了(尽量一些能通用判断掉的就不用开放出来配置引用,配置项越少越好)
c.开发完毕在 src/index 中导出入口
d.打包前先删除 lib 和 es 文件(目前打包没有做到先清除上一次产物,待解),然后执行 npm run build e.测试时执行 npm link,然后在小程序项目中执行 npm link @aistarfish/minicomponent
f.测试完成之后发布,先登录 npm 账号,再修改 package.json 版本号,执行 npm publish --access public

  1. 更新小程序 js sdk

a.修改 src/HxMiniEventPkg/HxMiniH5Event
b.将本地 js 文件复制到测试项目中的 html 中
c.测试完毕后,执行 npm run buildMiniHelper
d.将打包生成的 build/hxMiniHelper.js 传到https://swan.aistarfish.com/index#/file的公共js中 e.发布时联系出久,目前在阿波罗上的 ohappcore 的 f2e.miniH5Global.js 和 anti-mage 项目中的 f2e.miniH5Global.js 都有引用,之后新建项目时都引用这两个变量即可

安装

npm install @aistarfish/minicomponent / yarn add @aistarfish/minicomponent

海心小程序组件接入说明

一.初始化

utilsConfig 角色为所有小程序组件依赖的配置入口,init 时内部会自动声明一些 taro 没有声明的函数,弥补不足.

import { utilsConfig } from "@aistarfish/minicomponent";
//初始化示例
utilsConfig.init({
  userManager: UserManager, //必填,用于其他组件对用户信息的依赖访问
  miniInfo: { miniName: miniName, wechatType: "wechatMini", baseUrl: base }, //必传,miniName:'hxka','hxjk'主要用来区分小程序,目前只为打点渠道区分 wechatType:请求header所传入的wechatType字段 baseUrl: 请求的域名
  env: !base.includes("aistarfish.com") ? "debug" : "release", //必传 目前为打点模块提供当前环境
  eventPrepareReady: () => {
    return new Promise((resolve, reject) => {
      if (UserManager.getToken()) {
        resolve();
      } else {
        UserManager.initToken()
          .then(() => {
            resolve();
          })
          .catch(() => {
            reject();
          });
      }
    });
  }, //选传,function:()=>Promise 主要是打点模块初始化时需要有token,只有有了token才能获取设备id,才能进行打点上报
});

二.各个模块使用

1. 打点模块

a.事件 ID 获取

具体获取参照 打点文档汇总，获取过程有任何问题，可直接联系索隆。

b.SDK 提供了onEvent、onPageStart、onPageEnd三个打点方法，分别用于事件打点、页面统计。

注意:如需想在 app.js 中的 componentDidShow 进行埋点,请在 componentWillMount 中定义 Taro.onAppShow 去打点.因为打点中涉及到自定义函数 getEnterOptionsSync,此函数获取是迟于原生的 didshow 方法,所以要用事件监听来打点


import { hxMiniEvent } from "@aistarfish/minicomponent";
  /**
   * 事件打点
   * @param  eventId 事件id(不带前三位渠道码)
   * @param  params 携带参数
   */
  onEvent(eventId = "", params = {})

  //例子
   hxMiniEvent.onEvent(CommunityPageEvent.DiaryDetail.rightMenuClick, {
      id: diaryId,
      type: detail.topic ? detail.topic.missionCode : "",
    });

  /**
   * 页面可见的时候调用onPageStart
   */
  onPageStart(eventId)
  /**
   * 页面不可见的时候调用onPageEnd,最终进行打点上报
   */
  onPageEnd(eventId, params)

  //例子
  componentDidShow(){
        hxMiniEvent.onPageStart(CommunityPageEvent.DiaryDetail.pageShow);
  }
   componentDidHide() {
    hxMiniEvent.onPageEnd(CommunityPageEvent.DiaryDetail.pageShow, {
      id: diaryId,
    });
      componentWillUnmount() {
    hxMiniEvent.onPageEnd(CommunityPageEvent.DiaryDetail.pageShow, {
      id: diaryId,
    });
  }

  //hook中
   useDidShow(() => {
    hxMiniEvent.onPageStart(CommunityPageEvent.Drafts.pageShow);
  });
   useEffect(() => {
    return () => {
      hxMiniEvent.onPageEnd(CommunityPageEvent.Drafts.pageShow);
    };
  }, []);
    useDidHide(() => {
    // console.log('useDidHide');
    hxMiniEvent.onPageEnd(CommunityPageEvent.Drafts.pageShow);
  });

//使用HOC进行打点
import { PageEvent } from "@aistarfish/minicomponent";

  @PageEvent(PageEvent.Ruguoai.pageShow)
  export default class extends Component {
    ...
    //若需要设置页面额外参数，则重写此方法，返回参数对象。
    //若不需要则忽略
    setEventParams(){
      return { id: "hxjk" };
    }
    ...
  }

2. 请求模块

import { networkUtil } from "@aistarfish/minicomponent";

//配置自定义拦截器的处理(在内部已经对通用的header loading做处理)
const responseIntercept = function (chain) {
  xxxx;
};
//在app.js初始化中
networkUtil.addInterceptor(responseIntercept);

//使用请求
networkUtil.get(GET_FULL_RED_POINT_COUNT, "", isShowLoading);
networkUtil.postj;
networkUtil.post;
networkUtil.uploadFile;
//(接入时要想改动最小 直接在ajax.js中导出 其他请求参数格式按海心健康小程序格式给出)
export { networkUtil as default } from "@aistarfish/minicomponent";

3. HOC 模块

//class中withLoginStatus 已将isLogin注入state
import { withLoginStatus } from "@aistarfish/minicomponent";
@withLoginStatus
export default class extends Component {
  onLoginStatusChange(isLogin) {
    if (isLogin) {
      xxx;
    }
  }
}

import { useLoginStatus } from "@aistarfish/minicomponent";
const [isLogin] = useLoginStatus();
//缺点 第一次初始化的时候就会走这个逻辑 不是真正登录状态变化的时候回调 与onLoginStatusChange生命周期不同 待修
useEffect(() => {
  if (isLogin) {
    xxx;
  }
}, [isLogin]);

4. webview 模块

自带功能:

  1. 自带 url 分享解析,url 中传入 title 和 pic 字段,则自动完成当前页面的分享
  2. 带入小程序 h5 专用登录信息 authtoken 配合 小程序 h5jssdk 和 fetch,自动完成登录信息的带入,业务方不用感知
  3. 带入 utdid,配合 jssdk 的打点功能
  4. 自带登录完成之后的页面刷新,即登录完成之后重新 redirectTo 当前页面,相当于页面重新初始化
import { HxMiniWebView } from "@aistarfish/minicomponent";
import Taro, { Component } from "@tarojs/taro";
import { WebView } from "@tarojs/components";
import { schemePathGenerate } from "../../../utils";
export default class extends HxMiniWebView {
  //如果需要对传进来的url进行参数处理,则重写此方法
  customProcessUrl = async (url) => {
    return url;
  };
  //分享时如果当前路径不是最终分享路径,重写此方法 封装成最后分享出去的路径
  schemePathGenerate = (path) => {
    return schemePathGenerate(path);
  };
  render() {
    const { url } = this.state;
    return <WebView src={url} onMessage={this.onMessage}></WebView>;
  }
}

//在 路径"pages/scheme-view/index" 返回中间页组件,作用为https://aistarfish.yuque.com/engpvq/nzr1gn/ynpbxy 示例:
import { Component } from "@tarojs/taro";
import { HxMiniSchemeView, commonUtil } from "@aistarfish/minicomponent";
import { Button, View } from "@tarojs/components";
import LoginContainView from "@components/LoginContainView";
import { schemeJump, schemeSource } from "../../utils/schemeJumpUtil";
import { schemePathGenerate } from "../../utils/index";
import ContainView from "../../components/ContainView";
import "./index.scss";
//由h5打开小程序所使用的中转页面
export default class extends HxMiniSchemeView {
  constructor() {
    this.state = {
      ...this.state,
      openApp: false,
      openAppInfo: {},
    };
  }
  //自定义scheme处理,重写此方法 框架内部自动处理了share?title=xx&pic=xx&mini_path=xx
  customSchemeProcess(scheme) {
    if (scheme.startsWith("login")) {
      schemeJump({ scheme, source: schemeSource.webview });
    } else if (scheme.startsWith("openApp")) {
      if (process.env.TARO_ENV === "weapp") {
        //微信打开app功能被封
        Taro.navigateBack({
          complete: () => {
            Taro.showModal({
              title: "提示",
              content: "请下载海心抗癌，发现更多精彩内容吧!",
              showCancel: false,
              confirmText: "我知道了",
            });
          },
        });
      } else {
        this.setState({
          openAppInfo: commonUtil.parseUrl(scheme) || {},
          openApp: true,
        });
      }
    } else {
      Taro.navigateBack({
        complete: () => {
          console.log("p.scheme", p);
          schemeJump({ scheme, source: schemeSource.webview });
        },
      });
    }
  }
  lauchAppError(e) {
    Taro.showModal({
      title: "提示",
      content: "您还未下载海心抗癌，赶紧去下载海心抗癌App，发现更多精彩内容吧!",
      showCancel: false,
      confirmText: "我知道了",
    });
  }
  //render里根据自己需求处理 isShare代表是否为分享scheme跳进来 openApp代表是否openApp?xx跳进来
  render() {
    const { isShare, openApp, openAppInfo } = this.state;
    return (
      <LoginContainView>
        <ContainView>
          {
            <Block>
              <Image
                className="logo"
                src="https://static.aistarfish.com/front-release/file/F2021053118123362200006513.logoname.png"
              />
              <Text className="desc">帮助肿瘤患者，活的更久，活的更好！</Text>
            </Block>
          }
          {isShare && (
            <Button className="share-btn btn" openType="share">
              分享给好友
            </Button>
          )}
          {openApp && (
            <Button
              className="open-app-btn btn"
              openType="launchApp"
              app-packagename="com.aistarfish.patient"
              app-connect-id="1106774864"
              app-bundleid="com.aistarfish.patient"
              type="primary"
              app-parameter={openAppInfo.scheme || ""}
              onError={this.lauchAppError}
            >
              打开APP
            </Button>
          )}
        </ContainView>
      </LoginContainView>
    );
  }
}

海心小程序 h5 jssdk 介绍及使用

使用文档

TO DO

  1. 修改 taro 源码修复一些不同小程序上的兼容问题,比如百度小程序页面第一次进入的时候 didshow 和 willmount 的执行顺序与其他小程序不一致的问题,和一些其他 api 没有开放出来的问题,比如 onKeyboardHeightChange,offKeyboardHeightChange,getEnterOptionsSync,百度小程序的 swan.login 换成了 swan.getLoginCode