1.1.1 • Published 3 years ago

cn.snmi.memo v1.1.1

Weekly downloads
-
License
-
Repository
-
Last release
3 years ago

快应用中台接入

接入文档即时发布地址：快应用中台接入

快应用中台简介

现在快应用的开发周期在一周左右，仅仅是开发基本功能和接入基础公共模块。为了加速开发从而诞生了快应用中台项目工程模板，工程中已经做好了现阶段标杆快应用里比较核心，高复用的模块案例的集成，可以有效减少开发者对公共模块的对接开发时间。 针对快应用的上架渐渐严格的问题，快应用的开发模式需要从之前的纯快应用原生开发转变成原生混合H5开发。以后上架的只是快应用壳子，用以提供原生的能力，真正的主应用是H5APP。

快应用中台集成的功能

  • 快应用广告(Banner、插屏、原生、激励视频、互动)SDK模块、打点模块、快应用状态检测模块、H5通信快应用模块的封装；
  • 进入快应用时会有开屏广告，原生广告优先，API广告兜底；
  • 全局护眼模式的插屏广告，本地默认2min，服务端可控制计时时间，服务端更新过，下次插屏即时更新。原生广告优先，API广告兜底；
  • 全局30s添加桌面提醒；
  • 快应用back键退出时拦截，显示插屏广告；
  • 快应用后台时本地PUSH通知，PUSH内容由服务端更新，取最新一次下发；
  • 快应用后台时唤醒应用或者复制文本至剪切板；
  • 快应用前300用户屏蔽开关；
  • 给快应用传特定参数打开指定的H5页面；
  • 给快应用传特定参数以浏览器模式启动；

......

快应用中台接入

快应用的开发都在中台工程上进行二次开发

1. 下载中台文件项目，最好设置 watch，项目变动更新会有通知。

https://github.com/gitsnmi-web-team/quickapp

访问前请先联系管理员加入 gitsnmi-web-team

2. 概览

  • 文件组织：
quickapp
└── src
		├── browser 						浏览器工程
    ├── assets              资源文件目录
    │   └── images
    ├── components					组件模块目录
    │   └── adunion
    ├── utils								模块、工具类方法封装引用目录
    └── views								快应用页面目录
        ├── client					   快应用H5页面加载页
        ├── index						   快应用壳子首页
        └── splash						 全屏广告页面
  • 开发须知
    • 快应用壳子正常开发，按照此目录结构规，首页必须编写在 index；
    • 默认版本号为开发版本0.0.1，此版本下开关一直为open，发布时记得修改；
    • 需要开发对接的功能模块都在文档中，不需要对接的部分全部都在中台中处理或者服务端配置；
    • 上架时需要将 client H5 载页中默认加载链接替换主应用H5APP的链接（defaultLink）;
    • 当应用开关（300人屏蔽）打开时将自动开启开屏广告、自动替换掉展示首页（将显示client页面）等等；
    • 开发新应用时需要在 manifest.json 文件中配置友盟的 appkey（umeng_appkey，renwei@snmi.cn） 和退屏唤醒请求的 lid（quitelid, caohailin@snmi.cn）；
    • 每个页面都需要接入全局护眼插屏广告；
    • 每个页面结构需要使用 SnmiPage 包裹导出，如下写法（核心封装）；
<template>
</template>

<style>
</style>

<script>
export default SnmiPage({
	...
});
</script>

3. 广告对接

广告的接入步骤：

  1. 引入组件（注意引入组件的相对路径）

  2. 传入必要参数 | 参数 | 含义 | 类型 | 必须 | 说明 | | --- | --- | --- | --- | --- | | lid | 广告位的ID | String | 是 | 需要运营在后台根据该应用的包名和上架品牌进行配置生成 | | splash-image | 闪屏的默认素材链接 | String | 否 | 开屏时会有短暂白屏，优化体验可先展示默认的开屏素材 | | close | 广告关闭的回调 | Function | 否 | 回调的事件对象中，API广告会有action字段表示用户点击行为 | | error | 广告出现错误时的回调 | Function | 否 | 回调的事件对象中，会尽可能地带上错误信息 |

  3. 开发者自行控制广告的展示和隐藏，通过快应用模板语法 if

  4. 示例
<import name="adunion" src="../../components/adunion/index"></import>

<template>
  <div>
    <adunion
      if="{{isShow}}"
      lid="E4C4427565594B05AD0C40A3DDC857DB"
      @close="hanldeClose"
      @error="hanldeClose"
    ></adunion>
  </div>
</template>

<script>
export default SnmiPage({
  data() {
    return {
      isShow: true,
    };
  },
  hanldeClose() {
    this.isShow = false;
  },
});
</script>

广告的配置说明：

{
  "adid": "94ad5437f45c4245b8e912dc8988bee6", // 厂商广告的 posid
  "lid": "E4C4427565594B05AD0C40A3DDC857DB",  // 兜底API广告的 lid
  "adtype": "Native",  // 广告类型，可选值有：Native（原生广告）、Banner（横幅广告）、RewardedVideo（激励视频广告）、Interstitial（插屏广告）、API（API广告）
  "adstyle": "splash",	// 广告样式，可选值有：splash（闪屏、全屏）、interactive（互动）、interstitial（插屏）；支持官网对Banner的自定义样式处理
  "extra": {	// 额外的配置信息
    "time": 5  // 广告计时字段，开屏广告倒计时、全局护眼插屏计时时间由此字段控制
    /**
    	* title 插屏的title
    	* message 插屏的content
    	*	cancelButtonText 插屏取消按钮的文字
    	*	cancelButtonColor 插屏取消按钮的颜色
      * confirmButtonColor 插屏确认按钮的颜色
    	* confirmButtonText 插屏确认按钮的文字
      *
      * image 互动广告的素材链接
      * link 互动广告的落地页链接
      * style 覆盖互动广告的样式
      *
    	*/
  }

全局护眼插屏的接入： 在每一个页面中一个字符不落的进行如下引用（一定要先引入组件再如下引用）

<adunion
  id="eyeshield"
  if="{{globalEyeshield}}"
  @close="handleGlobalEyeshield"
  @error="handleGlobalEyeshield"
  lid="{{globalEyeshieldLid}}"
></adunion>

4. H5与快应用对接

嵌入H5的完整示例已经如 client 页面所示，新功能可在此二次开发，如另新起页面则需要按示例完整编写配置保持统一。以下开发基于完整示例。

H5页面与快应用通信（官方文档相关说明）：

// H5

// 当快应用加载H5网页时会在 window 对象中注入 system 的属性，它拥有两个方法 onmessage（接收快应用消息）、postMessage（向快应用发送消息）
if (window.system) { 
  // 统一的回调处理
  system.onmessage = (message) => {
    const { code, data, cb } = JSON.parse(message||'{}');		// cb 回调H5的方法名，code 结果状态码，200为成功，其余为失败。data为结果值，失败时为错误信息
    window[cb] && window[cb]({code, data});
  }
  
  system.postMessage(JSON.stringify({		// postMessage 
    method: 'custom.handleRewardedVideo',		// 调用快应用的方法名 'modular.fn', fn 为具体的方法名称， modular 为方法所属的模块。快应用自带的方法名可在官方文档接口里查询（现支持1050及以下）。当需要调用该页面的 vm 对象的方法时，modular 需命名为 'custom'
    params: {		// 该方法所需参数，没有可不传
      type: 'show',
    },
    cb: 'showResult',		// 调用快应用方法后回调回H5的 callback 方法名，没有可不传
    hide: false,		// 调用快应用的方法是否会导致快应用退到后台（退到后台回导致唤醒应用），默认为 false
    async: false,		// 调用快应用的方法类型是同步的还是异步的，默认为 false
    call: '',      // 当该方法的回调名不是 success、fail 时，自己制定回调名，没有可不传
  }));
}

npm.io#### 5.支付 快应用支付流程 获取商品信息并展示 -> 支付前检查用户 token -> 调用 handlepay 方法 -> 支付完成 -> 查询支付信息

...
method() {
  handlepay(
    tradetype, // 指定的支付渠道，可选值有 'alipay'(支付宝)、'wxpay'（微信支付）、'pay'（厂商自己的支付）
    orderinfo: {
    	token,  // 用户token
      goodsId, // 商品id
    	goodsName, // 商品名
      priceNow, // 商品价格
		},
    callback: ({code, data) => {
      // 支付完成的回调
      // code 为 200 时表明支付成功调用
      // data 为支付信息， code 为 200 时返回订单号
 			if (code === 200) {
      	queryorder(data, cb);  // 查询订单支付信息，返回 code: 200 表明支付成功，其它则失败
    	}
    },
  );
},
...
  • 支付所用到的相关 API文档(https://www.yuque.com/docs/share/42e3e57a-ce95-4842-b19a-da37a753346e?# 《通用API-支付接口》)；
  • 微信的支付失效为 5min，过期需要重新支付；
  • 支付宝支付时回调 code 为 200 时表明支付已完成。微信支付时回调 code 为 200 时表明订单已经提交到微信，并不能表明支付已经完成。此情况下一般都会弹出一个 dialog 让用户选择点击 支付完成 或者 立即支付 选项。可以参考竞品做法，等确定好步骤流程再做进中台模块，前期先自行处理；

6. 其它

  • 数据打点

使用全局方法 logfetch ，传入事件数组参数

logfetch([title, content, desc]);	// title 事件标题， content 事件内容， desc 事件描述。 数组长度最短为1，即最起码传入 事件title
  • 特殊情况处理
    • 在有一些场景下会导致快应用假后台从而触发了广告的功能。如在调用了摄像接口，选择图片接口时等等。全局提供了 silentonce 方法用以屏蔽下一次（单次）应用后台触发的广告。
...
method() {
  ...
  silentonce();  // 接口调用前设置为不触发
  ...
},
onHide() {
  ...
  silentonce();  // 从前台回到此页面时不触发全屏广告
  ...
},
...
  • 护眼插屏是全局的，但有的时候会要求某些页面不能出现，计时需要暂停。全局提供了 hanldeGlobalEyeshieldPause 方法来暂停当前护眼插屏的计时。当离开这个页面触发 onHide 页面 hook 的时候会自动继续走护眼插屏的计时。
...
onShow() {
  hanldeGlobalEyeshieldPause();
},
...
archivedayjsjs-base64md5
@infinitebrahmanuniverse/nolb-cn
1.1.1

3 years ago

1.1.0

3 years ago