yt-tool v1.3.13

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)

组件注册使用及目录

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 广告播放组件

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

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

yt-canvas 生成海报

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 选择星座

yt-lunar 选择时间(农历)

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

yt-message 界面交互组件

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 隐私协议授权弹框

yt-protocol 隐私协议内容

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

yt-protocol-entry 隐私协议内容

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

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

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

yt-recommend 热门推荐列表

yt-transition 动画过度组件

// 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 剪映视频合成(目前基本不可用)