yt-tool

v1.3.13

Published

2 years ago

``` // npm安装 npm install yt-tool --save

Downloads

0High
0Medium
0Low

chengwei1995

易推

yt-tool 易推公共方法及组件说明

使用安装

// npm安装
npm install yt-tool --save

// main.js 引入
import ytTool from 'yt-tool'
import { unit_id } from '@/config' //请设置项目公共配置</a>

Vue.use(ytTool,{
  rewarded_id:unit_id.rewarded, // 激励广告ID
  routeIntercept:null // 路由拦截,function(params,resolve)
})

tips:引入完成后会在全局页面和组件的实例this下挂载一个$yt对象,

点击查看公共配置示例

$yt 对象说明 (vm表示当前页面或者组件的this)

| 方法名称|方法说明|参数<类型> | | :--: | :-- |:-- | |request|ajax请求:第三方请求可以加上original:true配置项| - | |test|规则校验:查看详情 | - | |route|路由跳转:查看详情 | - | |inspectText<Promise>| 校验文字 | contents<Array | String > | |inspectImage<Promise>| 校验图片 | images<Array | String> | |auth<Promise>| 授权,隐私协议授权使用scope:privacy | opt:{scope,msg:保存图片需要开启相册权限!,required:true} , vm | |uv<Promise>| 记录UV | node,product_id,agent_id,spread_id | |getImageInfo<Promise>| 获取图片信息 | images<Array | String> | |imageToBase64<Promise>| 图片临时路径转base64 | imageUrl<String> | |base64ToImage<Promise>| base64转图片临时路径 | base64<String> | |randomNumber| 生成范围内随机数,包含上限和下限本身 | lowerValue, upperValue | |randomString| 生成指定长度随机字符串,已移除部分易混淆字符 | length = 32 | |throttle| 节流函数 | fun,wait=500,immediate=true | |debounce| 防抖函数 | fun, wait = 500, immediate = true | |deepMerge| | - | |deepClone| | - | |dateFormat| | - | |queryComponent| 查询组件实例,component在查询公共组件内的组件时传 | name,vm,component = 'global' | |rewardedAd| 播放广告,不包含统计方法,推荐使用yt-ad组件 | isAgent | |message<Promise>| 弹框方法,调用yt-message组件,以下方法都是对此方法的简写 | options,vm | |alert| - | title,content,vm | |confirm| - | title,content,vm | |toast| - | title,vm | |loading| - | title,image,vm | |actionSheet| - | itemList,vm | |messageClose| 关闭弹框或者loading | - |

组件注册使用及目录

tips:使用easycom规范

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^yt-(.*)": "yt-tool/components/yt-$1/yt-$1.vue"
    }
  }
}

公共配置示例

/* src/config/index.js */

/* eslint-disable no-dupe-keys */
let platform = '';
  // #ifdef MP-TOUTIAO
  platform = 'tt';
  // #endif
  // #ifdef MP-QQ
  platform = 'qq';
  // #endif
  // #ifdef MP-WEIXIN
  platform = 'wx';
  // #endif

const config = {
  /* 当前宿主平台 */
  platform,
  /* 服务地址 */
  devApi:'https://yitui-dev-product.yizhiqianjie.com',
  prodApi:'https://product-api.yizhiweixin.com',
  /* 广告ID 分平台 */
  ad:{
    tt:{
      rewarded:'1sho3o6a3kf524kbdl', /* 激励视频广告 */
      banner:'3b6bueuggh1jja9p5a', /* banner广告 */
      card:'', /* 卡片广告 */
      interstitial:'', /* 插屏广告 */
      // #ifdef PANGOLIN
      rewarded:'4hwfvefw1e015b42c7'
      // #endif
    },
    wx:{
      rewarded:'adunit-7b767fc03487f1dc',
      banner:'',
      card:'',
      interstitial:'',
    },
    qq:{
      rewarded:'770f543e1c7dba910be2752f347681e1',
      banner:'',
      card:'',
      interstitial:'',
    },
    ks:{
      rewarded:'',
      banner:'',
      card:'',
      interstitial:'',
    }
  }
}

export default config

export const unit_id = config.ad[platform];

yt-ad 广告播放组件

|参数|说明|类型|默认值|可选值| | :-- | :-- | :-- | :-- | :-- | | statistics | 组件内部是否统计广告 | Boolean | true | false | | initiative | 主动调用广告,如果设置为false,通过ref.trigger()调用 | Boolean | true | false |

|事件|说明|参数| | :-- | :-- | :-- | | trigger | initiative为false时,点击按钮触发 | - | | success | 广告观看结束,可获取奖励 | code:场景值,查看详情 | | close-ad | 提前关闭广告 | Boolean |

|场景值|说明| | :-- | :-- | | 0 | 广告播放中断 | | 1 | 金额支付成功 | | 2 | 广告视频播放完毕 | | 3 | 宿主平台不支持广告 | | 4 | 宿主是代理商 | | 5 | 抖音版本过低 | | 6 | 抖音播放异常 | | 7 | 超出后台设置的广告次数 |

yt-back-home 返回首页（顶部）按钮

|参数|说明|类型|默认值|可选值| | :-- | :-- | :-- | :-- | :-- | | type | 样式选择,home为QQ小程序加群 | String | more | home | | groupId | QQ群号,type为home时传 | String | - | - | | showTop | 显示返回顶部 | Boolean | false | true | | homePath | 首页路径 |String | /pages/index/indextid | - |

yt-bind-agent 绑定代理商页面

|参数|说明|类型|默认值|可选值| | :-- | :-- | :-- | :-- | :-- | | indexPath | 首页路径 |String | /pages/index/index | - |

yt-canvas 生成海报

|参数|说明|类型|默认值|可选值| | :-- | :-- | :-- | :-- | :-- | | rect | 画布宽高 | Object | {width:750,height:2000} | - |

|事件|说明|参数| | :-- | :-- | :-- | | callback | 绘制完成并转为临时路径的回调 | tempFilePath |

|方法|说明|参数| | :-- | :-- | :-- | | savePhoto | 传入tempFilePath保存至相册 | tempFilePath | | init | 开始绘制:options为绘制参数;autoSave是否自动保存.默认为true | options,autoSave |

tips:画布组件的绘制是使用this.$refs['yt-canvas'].init()方法传参调用, init方法为Promise

options参数说明

// 示例
this.$refs['yt-canvas'].init({
    bgImg:'https://***.png', // 背景图片路径
    width:750, // 保存的结果宽度
    height:2000, // 保存的结果高度
    qrcodePath:`/pages/***/index?product_id=*`,// 二维码的落地页路径
    userinfo:{  //用户信息,以下为默认信息
      avatarUrl:'匿名用户',
      nickName:'https://ttmini.yizhiwechat.com/yzInterstTest/fission/default-avatar.png'
    }
    steps:[ // 绘制步骤,以下style内的值均为默认值
      // 绘制单行文本
      {
        type:'text',
        context:``, // 文本内容,特殊字段`{{nickname}}`为绘制用户昵称
        x:0,
        y:0,
        style:{
          color:`#000000`, // 文本颜色
          font:'32px', // 文本字体大小 , 加粗 : `bold 34px`
          align:'left', // 水平对齐方式
          base:'middle', // 垂直对齐方式
          stroke:"" , // 文字描边的颜色,不填不描, 且头条小程序不支持
        }
      },
      // 绘制多行文本
      {
        type:'longtext',
        context:``, // 文本内容
        x:0,
        y:0,
        style:{
          color:`#000000`, // 文本颜色
          font:'32px', // 文本字体大小 , 加粗 : `bold 34px`
          align:'left', // 水平对齐方式
          base:'middle', // 垂直对齐方式
          width:0, // 文本宽度, 超过会自动换行,默认行高 字体大小 * 1.3
          autoHeight:false // 是否根据内容高度自动延长结果图片高度
        }
      },
      // 绘制图片
      {
        type:'image',
        context:``, // 图片路径, 特殊字段`{{avatar}}`为绘制用户头像,`{{qrcode}}`为绘制产品二维码
        x:0,
        y:0,
        style:{
          width:0, // 图片宽度,原字段 w
          height:0, // 图片高度,原字段 h
          arc:false // 是否裁剪为圆形
        }
      },
      // 绘制图形
      {
        type:'path',
        context:``, // 图形路径, 示例在原点绘制 200*100图形: [[0,0],[200,0],[200,100],[0,100]]
        style:{
          color: 'ffffff', // 填充颜色 ,渐变色格式示例(从0到1,从透明到黑色): [[0,'rgba(0,0,0,0'],[1,'rgba(0,0,0,1)']]
          gradient_direction:'', // 渐变色方向 : [x1,y1,x2,y2],两点的连线表示渐变方向和距离
          fill:false //是否填充 , false为描边
        }
      },
    ]
  
  },
  false // autoSave ,是否自动保存相册
  );

yt-constellation 选择星座

|参数|说明|类型|默认值| 可选值 | | :-- | :-- | :-- | :-- | :-- | | visible | 是否显示,支持.sync | Boolean | false |true| | banner | 弹框banner图片 | String | https://ttmini.yizhiwechat.com/constellationPavilion/constellationIcon/banner.jpg |-|

|事件|说明|参数| | :-- | :-- | :-- | | change | 选择了某个星座 | event:{ id:1,name:'摩羯座',date:'12.22~1.19' } |

|方法|说明|参数| | :-- | :-- | :-- | | show | 通过实例方法唤起弹框,返回一个Promise | 返回内容同chang事件 | | close | 关闭弹框 | - |

yt-lunar 选择时间(农历)

|参数|说明|类型|默认值|可选值| | :-- | :-- | :-- | :-- | :-- | | visible | 是否显示,支持.sync | Boolean | false |true| | value | 设置默认年份以及是否需要选择时辰 | String | 1985-01-01 0 |-| | theme | 主题颜色 | String | #C3201B |-|

tips:前面的年月日只能控制默认选中的年,月日没有实际功能,最后一位数字代表是否启用选择时辰,如果不需要则传入1985-01-01即可。

|事件|说明|参数| | :-- | :-- | :-- | | change | 时间变化回调 | event:{ id:1,name:'摩羯座',date:'12.22~1.19' } |

|方法|说明|参数| | :-- | :-- | :-- | | show | 通过实例方法唤起弹框,返回一个Promise | 返回内容同chang事件 |

yt-message 界面交互组件

|方法|说明|参数| | :-- | :-- | :-- | | show | 通过实例方法唤起弹框,返回一个Promise | options |

tips:通过options进行覆盖默认配置,以下是默认配置示例

tips:``action-sheet传入普通数组会转成对象数组,例

this.$refs['yt-message'].show({
  type:'action-sheet',
  itemList:['保存图片','发说说']
})

// 相当于

this.$refs['yt-message'].show({
  type:'action-sheet',
  itemList:[{
    title:'保存图片',type:'default'
  },{
    title:'发说说',type:'default'
  }]
})

// 注意,选择中的type,还有一个特殊类型share,调用分享时使用,比如
this.$refs['yt-message'].show({
  type:'action-sheet',
  itemList:[{
    title:'分享好友',type:'share'
  }{
    title:'保存图片',type:'default'
  }]
})

yt-navbar 自定义导航栏

yt-privacy 隐私协议授权弹框

|参数|说明|类型|默认值|可选值| | :-- | :-- | :-- | :-- | :-- | | protocol | 协议页地址 | String | /pages/protocol | - | | root | 控制协议样式,true是居中大弹窗,否则是底部小弹窗 | Boolean | false |true| | required | 是否必检测授权,只有在产品有input输入时传 | Boolean | false | true |

|方法|说明|参数| | :-- | :-- | :-- | | show | 通过实例方法唤起弹框,返回一个Promise | - |

yt-protocol 隐私协议内容

|参数|说明|类型|默认值|可选值| | :-- | :-- | :-- | :-- | :-- | | email | 邮箱地址 | String | [email protected] | - |

tips:一般在注册一个/pages/protocol页面,然后在页面中使用本组件

yt-protocol-entry 隐私协议内容

|参数|说明|类型|默认值|可选值| | :-- | :-- | :-- | :-- | :-- | | color | 文字颜色 | String | #ffffff | - | | custom-style | 组件样式 | String | - | - | | protocol | 协议页地址 | String | /pages/protocol | - |

tips:如果需要absolute定位时,请包裹一层节点,通过对节点定位实现;

yt-qq-share QQ分享+发说说

|参数|说明|类型|默认值|可选值| | :-- | :-- | :-- | :-- | :-- | | top | margin-top | String | 60rpx | - | | width | 组件宽度 | String | 710rpx | - | | btnStyle | 按钮样式,一般用于配合width控制按钮大小 | String | - | - | | options | 发说说配置 | Object | - | - | | media | 发说说资源(图片,视频) | Array | - | - |

// options 参数示例
{
  desc:'', // 说说默认文案
  title:'', //说说小尾巴文案
  path:'' // 产品路径,注意子产品都需要product_id
}
// media参数示例
[
  {
    type:'photo', // 资源类型,可选 video
    path:'' // 文件路径，必须为本地文件
  }
]

yt-recommend 热门推荐列表

|参数|说明|类型|默认值|可选值| | :-- | :-- | :-- | :-- | :-- | | custom-style | 列表容器样式 | String | - | - | | top | 列表margin-top | String | 40rpx | - | | scrollIndex | 分页触发器,父页面在onReachBottom回调一直递增即可 | Number | - | - |

yt-transition 动画过度组件

|参数|说明|类型|默认值|可选值| | :-- | :-- | :-- | :-- | :-- | | name | 动画名 | String | fade | - |

// yt-transition 用法同vue transition组件

// name 动画名可选值
/**
  * 淡入淡出 - fade、fade-up、fade-down、fade-left、fade-right
  * 滑动 - slide-up、slide-down、slide-left、slide-right
  * 弹动 bounce
  * 中部弹出 zoom
  * 中部弹入 punch
  * 飞入 fly
*/

yt-video-share 剪映视频合成(目前基本不可用)

|参数|说明|类型|默认值|可选值| | :-- | :-- | :-- | :-- | :-- | | v-model | 控制显示隐藏 | Boolean | false | - | | baseUrl | 合成视频的服务域名 | String | https://image-to-video.yizhiweixin.com | - | | productId | 产品ID | String | -| - | | imageData | 合成图片素材,目前仅支持两段 | Array | -| - | | dirName | 上传时的文件夹名称 | String | koreanFace| - | | merge | 是否融合 | Boolean | true | false |