初始化

app.json

@@ -2,123 +2,7 @@
   "themeLocation": "theme.json",
   "pages": [
     "pages/testDemo/index",
-    "pages/components/index",
-    "pages/components/video/index",
-    "pages/components/camera/index",
-    "pages/components/movable/index",
-    "pages/components/form/index",
-    "pages/components/view/index",
-    "pages/components/checkbox/index",
-    "pages/components/slider/index",
-    "pages/components/button/index",
-    "pages/components/text/index",
-    "pages/components/switch/index",
-    "pages/components/input/index",
-    "pages/components/label/index",
-    "pages/components/progress/index",
-    "pages/components/radio/index",
-    "pages/components/scrollView/index",
-    "pages/components/navigator/index",
-    "pages/components/navigationBar/index",
-    "pages/components/swiper/index",
-    "pages/components/image/index",
-    "pages/components/pagecontainer/index",
-    "pages/components/pageMeta/index",
-    "pages/components/icon/index",
-    "pages/components/richText/index",
-    "pages/components/textarea/index",
-    "pages/components/canvas/index",
-    "pages/components/map/index",
-    "pages/components/ipc-player/index",
-    "pages/components/animation/index",
-    "pages/components/io/index",
-    "pages/components/redux1/index",
-    "pages/components/redux2/index",
-    "pages/components/eventChannel1/index",
-    "pages/components/eventChannel2/index",
-    "pages/pageAPI/index",
-    "pages/pageAPI/getNetworkType/index",
-    "pages/pageAPI/storage/index",
-    "pages/pageAPI/getSystemInfo/index",
-    "pages/pageAPI/images/index",
-    "pages/pageAPI/makePhoneCall/index",
-    "pages/pageAPI/screenBrightness/index",
-    "pages/pageAPI/clipboardData/index",
-    "pages/pageAPI/addContact/index",
-    "pages/pageAPI/vibrate/index",
-    "pages/pageAPI/networkRequest/index",
-    "pages/pageAPI/audio/index",
-    "pages/pageAPI/downloadFile/index",
-    "pages/pageAPI/uploadFile/index",
-    "pages/pageAPI/scanCode/index",
-    "pages/pageAPI/getLocation/index",
-    "pages/pageAPI/getBatteryInfo/index",
-    "pages/pageAPI/voice/index",
-    "pages/pageAPI/pullDownRefresh/index",
-    "pages/pageAPI/navigationBarLoading/index",
-    "pages/pageAPI/actionSheet/index",
-    "pages/pageAPI/toast/index",
-    "pages/pageAPI/modal/index",
-    "pages/pageAPI/navigators/index",
-    "pages/components/pickerview/index",
-    "pages/components/picker/index",
-    "pages/panelDemo/index",
-    "pages/componentsExtension/index",
-    "pages/componentsExtension/vtabs/index",
-    "pages/componentsExtension/sticky/index",
-    "pages/componentsExtension/vlist/index",
-    "pages/componentsExtension/panel/index",
-    "pages/componentsExtension/loadmore/index",
-    "pages/componentsExtension/grid/index",
-    "pages/componentsExtension/gallery/index",
-    "pages/componentsExtension/flex/index",
-    "pages/componentsExtension/footer/index",
-    "pages/componentsExtension/searchbar/index",
-    "pages/componentsExtension/tabbar/index",
-    "pages/componentsExtension/tabs/index",
-    "pages/componentsExtension/selectText/index",
-    "pages/componentsExtension/iconEx/index",
-    "pages/componentsExtension/dialog/index",
-    "pages/componentsExtension/actionSheetEx/index",
-    "pages/componentsExtension/halfScreenDialog/index",
-    "pages/componentsExtension/topTips/index",
-    "pages/componentsExtension/msg/index",
-    "pages/componentsExtension/msgSuccess/index",
-    "pages/componentsExtension/cell/index",
-    "pages/componentsExtension/msgText/index",
-    "pages/componentsExtension/msgTextPrimary/index",
-    "pages/componentsExtension/msgFail/index",
-    "pages/componentsExtension/checkboxEx/index",
-    "pages/componentsExtension/slideview/index",
-    "pages/componentsExtension/loading/index",
-    "pages/componentsExtension/formpage/index",
-    "pages/componentsExtension/formEx/index",
-    "pages/componentsExtension/navigationBarEx/index",
-    "pages/componentsExtension/badge/index",
-    "pages/componentsExtension/gesture/index",
-    "pages/componentsExtension/basic/index",
-    "pages/componentsExtension/propagation/index",
-    "pages/componentsExtension/photo/index",
-    "pages/componentsExtension/requireFailure/index",
-    "pages/componentsExtension/drag/index",
-    "pages/componentsExtension/recycleview/index",
-    "pages/components/canvasDemo/imageData/index",
-    "pages/components/canvasDemo/lottie/index",
-    "pages/components/canvasDemo/rect/index",
-    "pages/components/canvasDemo/circle/index",
-    "pages/components/canvasDemo/polygon/index",
-    "pages/components/canvasDemo/cshape/index",
-    "pages/components/canvasDemo/ellipse/index",
-    "pages/components/canvasDemo/line/index",
-    "pages/components/canvasDemo/canvasText/index",
-    "pages/components/canvasDemo/all/index",
-    "pages/components/canvasDemo/img/index",
-    "pages/components/canvasDemo/demo1/index",
-    "pages/components/canvasDemo/demo2/index",
-    "pages/components/canvasDemo/demo3/index",
-    "pages/components/canvasDemo/demo4/index",
-    "pages/components/canvasDemo/demo5/index",
-    "pages/components/canvasDemo/column/index"
+    "pages/panelDemo/index"
   ],
   "tabBar": {
     "color": "@tabFontColor",

components/customComponent/color.sjs

-function getRandomColor() {
-  var letters = '0123456789ABCDEF'
-  var color = '#'
-  for (var i = 0; i < 6; i++) {
-    color += letters[Math.floor(Math.random() * 16)]
-  }
-  return color
-}
-
-module.exports = {
-  getRandomColor: getRandomColor,
-}

components/customComponent/handler.sjs

-var tap = function (event, ownerInstance) {
-  console.log('组件 sjs tap事件！！！！', event, ownerInstance)
-}
-
-var countObserver = function (newValue, oldValue, ownerInstance, instance) {
-  console.log('count observer', newValue, oldValue, ownerInstance, instance)
-  let comp = ownerInstance.callMethod('clickTest')
-}
-
-var add = function (a, b) {
-  return a + b
-}
-
-module.exports = {
-  tap: tap,
-  countObserver: countObserver,
-  add: add,
-}

components/customComponent/index.js

-const app = getApp()
-
-Component({
-  options: {
-    addGlobalClass: true,
-  },
-
-  // 0️⃣ type和value => {type, defaultValue}，默认类型设置为value类型，默认值为value，限制并转化传入类型为type。
-  // 1️⃣ 如果只有type => 与5 相同， - 自动生成默认值，限制并转化传入类型
-  // 2️⃣ 如果没有type，type设置为 null, 不去限制传入类型，默认类型设置为value类型，默认值为value。
-  // 3️⃣ 如果是一个 {}， 默认类型设置为object，默认值为null，不去限制传入类型。
-  // 4️⃣ 简化的定义方式 1.  myProperty1: true 默认类型为undefined 默认值为undefined，但是可接收传入的属性，不限制传入类型
-  // 5️⃣ 简化的定义方式 2.  myProperty1: Boolean 默认类型为Boolean 默认值为false - 自动生成默认值，限制并转化传入类型
-  // 6️⃣ 目前暂不考虑支持 optionalTypes
-
-  properties: {
-    count: {
-      // 属性名
-      type: Number,
-      value: 0,
-    },
-  },
-  pageLifetimes: {
-    show() {
-      console.log('pageLifetimes show')
-    },
-    hide() {
-      console.log('pageLifetimes hide')
-    },
-    ready() {
-      console.log('pageLifetimes ready')
-    },
-  },
-  lifetimes: {
-    created() {},
-    attached() {
-      // this.setData({
-      //   count: this.data.count + 1,
-      // })
-    },
-  },
-  methods: {
-    changeCount() {
-      console.log(this.data.count)
-      this.setData({
-        count: this.data.count + 1,
-      })
-    },
-  },
-})

components/customComponent/index.json

-{
-  "component": true,
-  "usingComponents": {}
-}

components/customComponent/index.less

-@text-color: red;
-@header-color: green;
-@common-font-size: 22px;
-
-.custom-container {
-  font-size: @common-font-size;
-  color: @header-color;
-}
-.slot-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.header {
-  font-size: @common-font-size;
-  color: @header-color;
-}
-
-.content {
-  color: @text-color;
-  text-align: center;
-}
-
-.footer {
-  color: #ffffff;
-  background-color: #ff4800;
-  text-align: center;
-  margin: 30px 0;
-  line-height: 50px;
-}

components/customComponent/index.tyml

-<!-- <sjs module="color" src="./color.sjs" />
-<sjs module="handler" src="./handler.sjs" />
-
- <view class="my-custom-component container" >
-  <text class="header" style="color: {{color.getRandomColor()}}" bindtap="{{handler.tap}}">{{ headerText }}</text>
-  <view class="content">
-    <slot></slot>
-  </view>
-  <view change:prop="{{handler.countObserver}}" prop="{{count}}" bindtap="click" style="fontSize:28px">CountObserver {{count}}</view>
-</view> -->
-
-<!-- <view class="slot-container" >
-  <slot></slot>
-
-</view>
-<view class="header">
-  <slot name="header"></slot>
-</view>
-<view class="content">
-  <slot name="content"></slot>
-</view>
-
--->
-<!-- <button type="primary" bind:tap="click" class="button" id="this-button">按钮 {{count}}</button>
-<button bind:tap="clickadd" class="button">123</button>
-<text style="fontSize:{{handler.add(num1, num2)}}px">测试</text> -->
-<!--
-<sjs module="utils" src="./a.sjs" />
-<sjs module="handler" src="./handler.sjs" />
-
-<view bindtap="{{handler.tap}}" style="fontSize:28px">{{ utils.getName('TUYA') }}</view> -->
-
-<!-- <view ty:if="{{8}}">1</view>
-<view ty:if="{{undefined || true}}">2</view>
-<view ty:if="{{false || true}}">3</view>
-<view ty:if="{{8 || false}}">4</view>
-<view ty:if="{{false}}">5</view>
-<view ty:if="{{false || 8}}">6</view> -->
-<!-- <view class="footer" id="tyFootor">自定义组件 {{count}}</view>
-<addBtn /> -->
-<!--
-<template name="root2">
-  <view bind:tap="onTap1">Template root {{count}}</view>
-</template>
-
-<template is="root2"/>
-
-<view bind:tap="onTap2">Template root 222222222 {{count}}</view> -->
-
- <!-- <template name="view">
-  <view>
-    <template is="children" data="{{r: r.children}}" />
-  </view>
-</template>
-
-<template name="text">
-  <text>
-    <template is="children" data="{{r: r.children}}" />
-  </text>
-</template>
-
-<template name="block">
-  <block>
-    <template is="children" data="{{r: r.children}}" />
-  </block>
-</template>
-
-
-<template name="children">
-  <block ty:for="{{r}}">
-    <block ty:if="{{item.type}}">
-      <template is="{{item.type}}" data="{{r: item}}" />
-    </block>
-    <block ty:else>
-      <view bind:tap="onComponentTemplateTap">{{item.content}}</view>
-    </block>
- </block>
-</template>
-
-<template name="root">
-  <template is="{{r.type}}" data="{{r: r}}" />
-</template>
-
-<template is="root" data="{{r: root}}"></template> -->
-
-
-<view class="custom-container" style="display: inline" bind:tap="changeCount">
-  view hhh
-  <text style="custom-text">text {{count}}</text>
-</view>

components/customComponent/test.js

-export default {
-  name: 'test',
-  getName: () => {
-    return 'tuya'
-  },
-}

components/drag/index.js

-Component({
-  externalClasses: ['item-wrap-class'],
-  options: {
-    multipleSlots: true,
-    styleIsolation: 'shared',
-  },
-  properties: {
-    extraNodes: {
-      // 额外节点
-      type: Array,
-      value: [],
-    },
-    listData: {
-      // 数据源
-      type: Array,
-      value: [],
-    },
-    columns: {
-      // 列数
-      type: Number,
-      value: 1,
-    },
-    topSize: {
-      // 顶部固定高度
-      type: Number,
-      value: 0,
-    },
-    bottomSize: {
-      // 底部固定高度
-      type: Number,
-      value: 0,
-    },
-    itemHeight: {
-      // 每个 item 高度, 用于计算 item-wrap 高度
-      type: Number,
-      value: 0,
-    },
-    scrollTop: {
-      // 页面滚动高度
-      type: Number,
-      value: 0,
-    },
-  },
-  data: {
-    /* 未渲染数据 */
-    baseData: {},
-    pageMetaSupport: true, // 当前版本是否支持 page-meta 标签
-    platform: '', // 平台信息
-    listWxs: [], // wxs 传回的最新 list 数据
-    rows: 0, // 行数
-
-    /* 渲染数据 */
-    wrapStyle: '', // item-wrap 样式
-    list: [], // 渲染数据列
-    dragging: false,
-  },
-  methods: {
-    vibrate() {
-      if (this.data.platform !== 'devtools') ty.vibrateShort()
-    },
-    pageScroll(e) {
-      this.triggerEvent('scroll', {
-        scrollTop: e.scrollTop,
-      })
-    },
-    listChange(e) {
-      this.data.listWxs = e.list
-    },
-    itemClick(e) {
-      let index = e.currentTarget.dataset.index
-      let item = this.data.listWxs[index]
-
-      this.triggerEvent('click', {
-        key: item.realKey,
-        data: item.data,
-        extra: e.detail,
-      })
-    },
-    /**
-     *  初始化获取 dom 信息
-     */
-    initDom() {
-      let { windowWidth, windowHeight, platform, SDKVersion } = ty.getSystemInfoSync()
-      let remScale = (windowWidth || 375) / 375
-
-      // this.data.pageMetaSupport = compareVersion(SDKVersion, '2.9.0') >= 0
-      this.data.platform = platform
-
-      let baseData = {}
-      baseData.windowHeight = windowHeight
-      baseData.realTopSize = (this.data.topSize * remScale) / 2
-      baseData.realBottomSize = (this.data.bottomSize * remScale) / 2
-      baseData.columns = this.data.columns
-      baseData.rows = this.data.rows
-
-      const query = this.createSelectorQuery()
-
-      // todo
-      query.select('.item').boundingClientRect()
-      query.select('.item-wrap').boundingClientRect()
-      query.exec((res) => {
-        baseData.itemWidth = res[0].width
-        baseData.itemHeight = res[0].height
-        baseData.wrapLeft = res[1].left
-        baseData.wrapTop = res[1].top + this.data.scrollTop
-
-        this.setData({
-          dragging: false,
-          baseData,
-        })
-      })
-    },
-    /**
-     * column 改变时候需要清空 list, 以防页面溢出
-     */
-    columnChange() {
-
-      this.setData({
-        list: [],
-      })
-      this.init()
-    },
-    /**
-     *  初始化函数
-     *  {listData, topSize, bottomSize, itemHeight} 参数改变需要手动调用初始化方法
-     */
-    init() {
-      // 初始必须为true以绑定wxs中的函数,
-
-      this.setData({ dragging: true })
-
-      let delItem = (item, extraNode) => ({
-        id: item.dragId,
-        extraNode: extraNode,
-        fixed: item.fixed,
-        slot: item.slot,
-        data: item,
-      })
-
-      let { listData } = this.data
-      let _list = []
-
-      // 遍历数据源增加扩展项, 以用作排序使用
-      listData.forEach((item, index) => {
-        _list.push(delItem(item, false))
-      })
-
-      let i = 0,
-        columns = this.data.columns
-      let list = _list.map((item, index) => {
-        item.realKey = item.extraNode ? -1 : i++ // 真实顺序
-        item.sortKey = index // 整体顺序
-        item.tranX = `${(item.sortKey % columns) * 100}%`
-        item.tranY = `${Math.floor(item.sortKey / columns) * 100}%`
-        return item
-      })
-
-      this.data.rows = Math.ceil(list.length / columns)
-
-      this.setData({
-        list,
-        listWxs: list,
-        wrapStyle: `height: ${this.data.rows * this.data.itemHeight}rpx`,
-      })
-      if (list.length === 0) return
-
-      // 异步加载数据时候, 延迟执行 initDom 方法, 防止基础库 2.7.1 版本及以下无法正确获取 dom 信息
-      setTimeout(() => this.initDom(), 0)
-    },
-  },
-  ready() {
-    this.init()
-  },
-})

components/drag/index.json

-{"component": true
-}

components/drag/index.less

-.item-wrap {
-  position: relative;
-}
-.item-wrap .item {
-  position: absolute;
-  z-index: 1;
-  top: 0;
-  left: 0;
-}
-.item-wrap .item.tran {
-  transition: transform 0.3s !important;
-}
-.item-wrap .item.cur {
-  z-index: 2;
-}
-.item-wrap .item.fixed {
-  z-index: 0 !important;
-}

components/drag/index.sjs

-var isOutRange = function (x1, y1, x2, y2, x3, y3) {
-  return x1 < 0 || x1 >= y1 || x2 < 0 || x2 >= y2 || x3 < 0 || x3 >= y3
-}
-
-var sortCore = function (sKey, eKey, st) {
-  var _ = st.baseData
-
-  var excludeFix = function (cKey, type) {
-    if (st.list[cKey].fixed) {
-      // fixed 元素位置不会变化, 这里直接用 cKey(sortKey) 获取, 更加快捷
-      type ? --cKey : ++cKey
-      return excludeFix(cKey, type)
-    }
-    return cKey
-  }
-
-  // 先获取到 endKey 对应的 realKey, 防止下面排序过程中该 realKey 被修改
-  var endRealKey = -1
-  st.list.forEach(function (item) {
-    if (item.sortKey === eKey) endRealKey = item.realKey
-  })
-
-  return st.list.map(function (item) {
-    if (item.fixed) return item
-    var cKey = item.sortKey
-    var rKey = item.realKey
-
-    if (sKey < eKey) {
-      // 正序拖动
-      if (cKey > sKey && cKey <= eKey) {
-        --rKey
-        cKey = excludeFix(--cKey, true)
-      } else if (cKey === sKey) {
-        rKey = endRealKey
-        cKey = eKey
-      }
-    } else if (sKey > eKey) {
-      // 倒序拖动
-      if (cKey >= eKey && cKey < sKey) {
-        ++rKey
-        cKey = excludeFix(++cKey, false)
-      } else if (cKey === sKey) {
-        rKey = endRealKey
-        cKey = eKey
-      }
-    }
-
-    if (item.sortKey !== cKey) {
-      item.tranX = (cKey % _.columns) * 100 + '%'
-      item.tranY = Math.floor(cKey / _.columns) * 100 + '%'
-      item.sortKey = cKey
-      item.realKey = rKey
-    }
-    return item
-  })
-}
-
-var triggerCustomEvent = function (list, type, ins) {
-  var _list = [],
-    listData = []
-
-  list.forEach(function (item) {
-    _list[item.sortKey] = item
-  })
-
-  _list.forEach(function (item) {
-    if (!item.extraNode) {
-      listData.push(item.data)
-    }
-  })
-  ins.triggerEvent(type, { listData: listData })
-}
-
-var touchStart = function (event, ownerInstance) {
-  var ins = event.instance
-  var st = ownerInstance.getState()
-  var _ = st.baseData
-
-  var sTouch = event.changedTouches[0]
-  if (!sTouch) return
-
-  st.cur = ins.getDataset().index
-
-  // 初始项是固定项则返回
-  var item = st.list[st.cur]
-  if (item && item.fixed) return
-
-  // 如果已经在 drag 中则返回, 防止多指触发 drag 动作, touchstart 事件中有效果
-  if (st.dragging) return
-  st.dragging = true
-  ownerInstance.callMethod('drag', { dragging: true })
-
-  // 计算X,Y轴初始位移, 使 item 中心移动到点击处, 单列时候X轴初始不做位移
-  st.tranX = _.columns === 1 ? 0 : sTouch.pageX - (_.itemWidth / 2 + _.wrapLeft)
-  st.tranY = sTouch.pageY - (_.itemHeight / 2 + _.wrapTop)
-  st.sId = sTouch.identifier
-
-  ins.setStyle({
-    transform: 'translate3d(' + st.tranX + 'px, ' + st.tranY + 'px, 0)',
-  })
-
-  st.itemsInstance.forEach(function (item, index) {
-    item.removeClass('tran')
-    item.removeClass('cur')
-    item.addClass(index === st.cur ? 'cur' : 'tran')
-  })
-
-  ownerInstance.callMethod('vibrate')
-}
-
-var touchMove = function (event, ownerInstance) {
-  var ins = event.instance
-  var st = ownerInstance.getState()
-  var _ = st.baseData
-
-  var mTouch = event.changedTouches[0]
-  if (!mTouch) return
-
-  if (!st.dragging) return
-
-  // 如果不是同一个触发点则返回
-  if (st.sId !== mTouch.identifier) return
-
-  // 计算X,Y轴位移, 单列时候X轴初始不做位移
-  var tranX = _.columns === 1 ? 0 : mTouch.pageX - (_.itemWidth / 2 + _.wrapLeft)
-  var tranY = mTouch.pageY - (_.itemHeight / 2 + _.wrapTop)
-
-  // 到顶到底自动滑动
-  if (mTouch.clientY > _.windowHeight - _.itemHeight - _.realBottomSize) {
-    // 当前触摸点pageY + item高度 - (屏幕高度 - 底部固定区域高度)
-    ownerInstance.callMethod('pageScroll', {
-      scrollTop: mTouch.pageY + _.itemHeight - (_.windowHeight - _.realBottomSize),
-    })
-  } else if (mTouch.clientY < _.itemHeight + _.realTopSize) {
-    // 当前触摸点pageY - item高度 - 顶部固定区域高度
-    ownerInstance.callMethod('pageScroll', {
-      scrollTop: mTouch.pageY - _.itemHeight - _.realTopSize,
-    })
-  }
-
-  // 设置当前激活元素偏移量
-  ins.setStyle({
-    transform: 'translate3d(' + tranX + 'px, ' + tranY + 'px, 0)',
-  })
-
-  var startKey = st.list[st.cur].sortKey
-  var curX = Math.round(tranX / _.itemWidth)
-  var curY = Math.round(tranY / _.itemHeight)
-  var endKey = curX + _.columns * curY
-
-  // 目标项是固定项则返回
-  var item = st.list[endKey]
-  if (item && item.fixed) return
-
-  // X轴或Y轴超出范围则返回
-  if (isOutRange(curX, _.columns, curY, _.rows, endKey, st.list.length)) return
-
-  // 防止拖拽过程中发生乱序问题
-  if (startKey === endKey || startKey === st.preStartKey) return
-  st.preStartKey = startKey
-
-  var list = sortCore(startKey, endKey, st)
-  st.itemsInstance.forEach(function (itemIns, index) {
-    var item = list[index]
-    if (index !== st.cur) {
-      itemIns.setStyle({
-        transform: 'translate3d(' + item.tranX + ',' + item.tranY + ', 0)',
-      })
-    }
-  })
-
-  ownerInstance.callMethod('vibrate')
-  ownerInstance.callMethod('listChange', { list: list })
-  triggerCustomEvent(list, 'change', ownerInstance)
-}
-
-var touchEnd = function (event, ownerInstance) {
-  var ins = event.instance
-  var st = ownerInstance.getState()
-
-  if (!st.dragging) return
-  triggerCustomEvent(st.list, 'sortend', ownerInstance)
-
-  ins.addClass('tran')
-  ins.setStyle({
-    transform: 'translate3d(' + st.list[st.cur].tranX + ',' + st.list[st.cur].tranY + ', 0)',
-  })
-
-  st.preStartKey = -1
-  st.dragging = false
-  st.cur = -1
-  st.tranX = 0
-  st.tranY = 0
-}
-
-var baseDataObserver = function (newVal, oldVal, ownerInstance, ins) {
-  var st = ownerInstance.getState()
-  st.baseData = newVal
-}
-
-var listObserver = function (newVal, oldVal, ownerInstance, ins) {
-  setTimeout(() => {
-    var st = ownerInstance.getState()
-    st.itemsInstance = ownerInstance.selectAllComponents('.item')
-
-    st.list = newVal || []
-
-    st.list.forEach(function (item, index) {
-      var itemIns = st.itemsInstance[index]
-      if (item && itemIns) {
-        itemIns.setStyle({
-          transform: 'translate3d(' + item.tranX + ',' + item.tranY + ', 0)',
-        })
-        if (item.fixed) itemIns.addClass('fixed')
-      }
-    })
-  }, 100)
-}
-
-module.exports = {
-  touchStart: touchStart,
-  touchMove: touchMove,
-  touchEnd: touchEnd,
-  baseDataObserver: baseDataObserver,
-  listObserver: listObserver,
-}

components/drag/index.tyml

-<sjs module="handler" src="./index.sjs"></sjs>
-<view class="item-wrap item-wrap-class"
-			list="{{list}}"
-			style="{{wrapStyle}}"
-			baseData="{{baseData}}"
-			change:list="{{handler.listObserver}}"
-			change:baseData="{{handler.baseDataObserver}}">
-  <view
-		class="item"
-		ty:for="{{list}}"
-		ty:key="id"
-		data-index="{{index}}"
-		style="width: {{100/columns}}%"
-		bind:touchstart="{{handler.touchStart}}"
-		catch:touchmove="{{handler.touchMove}}"
-		catch:touchend="{{handler.touchEnd}}">
-    <block ty:if="{{item.extraNode}}">
-      <slot name="{{item.slot}}"></slot>
-    </block>
-    <block ty:else>
-      <view style="height: 50px; border: 1px solid green; margin: 16px 0;" data-index="{{index}}" columns="{{1}}" item-data="{{item.data}}" bind:click="itemClick">???????{{index}}</view>
-    </block>
-  </view>
-</view>
\ No newline at end of file

components/ff-chart/index.js

-import Render from './index.rjs'
-Component({
-  lifetimes: {
-    created: function () {
-      this.render = new Render(this)
-    },
-    ready: function (e) {
-      this.draw()
-    },
-  },
-  methods: {
-    draw() {
-      this.render.draw([
-        { genre: 'Sports', sold: Math.floor(Math.random() * 500) },
-        { genre: 'Strategy', sold: Math.floor(Math.random() * 500) },
-        { genre: 'Action', sold: Math.floor(Math.random() * 500) },
-        { genre: 'Shooter', sold: Math.floor(Math.random() * 500) },
-        { genre: 'Other', sold: Math.floor(Math.random() * 500) },
-      ])
-    },
-  },
-})

components/ff-chart/index.json

-{
-  "component": true
-}
\ No newline at end of file

components/ff-chart/index.rjs

-// index.rjs
-import F2 from '@antv/f2'
-import {documentAdapter } from '@tuya-miniapp/rjs-adapter'
-documentAdapter()
-let chart
-export default Render({
-  position: {
-    x: 150,
-    y: 150,
-    vx: 2,
-    vy: 2,
-  },
-  x: -100,
-  async draw(data) {
-    if (chart) {
-      chart.clear() // 清除
-      chart.interval().position('genre*sold').color('genre')
-      // Step 2: 载入数据源
-      chart.source(data)
-      // Step 4: 渲染图表
-      chart.render()
-    } else {
-      let canvas = await getCanvasById('myCanvas')
-      // Step 1: 创建 Chart 对象
-      chart = new F2.Chart({
-        el: canvas,
-        pixelRatio: getSystemInfo().pixelRatio || 2, // 指定分辨率
-      })
-
-      // Step 2: 载入数据源
-      chart.source(data)
-
-      // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
-      chart.interval().position('genre*sold').color('genre')
-
-      // Step 4: 渲染图表
-      chart.render()
-    }
-  },
-})

components/ff-chart/index.tyml

-<!-- <sjs src="./chart.sjs" module="chart" /> -->
-<view class="container">
-  {{chart.foo}}
-  <canvas
-    class="canvasDom"
-    canvas-id="myCanvas"
-    style="width: 100%; height: 250px;"
-  ></canvas>
-  <button bindtap="draw">重新渲染自定义组件图表</button>
-</view>
\ No newline at end of file

components/picture/index.js

-import Render from './index.rjs'
-Component({
-  lifetimes: {
-    created: function () {
-      this.render = new Render(this)
-    },
-    ready: function (e) {
-      this.render.renderCar()
-    },
-  },
-})

components/picture/index.json

-{
-  "component": true
-}

components/picture/index.rjs

-export default Render({
-  position: {
-    x: 150,
-    y: 150,
-    vx: 2,
-    vy: 2,
-  },
-  x: -100,
-
-  async renderCar() {
-    let canvasCar = await getCanvasById('canvas')
-    let width = canvasCar.width
-    let height = canvasCar.height
-
-    let ctx = canvasCar.getContext('2d')
-
-    let dpr = 1
-    canvasCar.width = width * dpr
-    canvasCar.height = height * dpr
-    ctx.scale(dpr, dpr)
-
-    let renderLoop = () => {
-      this.render(canvasCar, ctx)
-      canvasCar.requestAnimationFrame(renderLoop)
-    }
-    canvasCar.requestAnimationFrame(renderLoop)
-
-    let img = canvas.createImage()
-    img.onload = () => {
-      this._img = img
-    }
-    img.src = './car.png'
-  },
-
-  render(canvas = null, ctx) {
-    ctx.clearRect(0, 0, 300, 300)
-    this.drawBall(ctx)
-    this.drawCar(ctx)
-  },
-
-  drawBall(ctx) {
-    let p = this.position
-    p.x += p.vx
-    p.y += p.vy
-    if (p.x >= 300) {
-      p.vx = -2
-    }
-    if (p.x <= 7) {
-      p.vx = 2
-    }
-    if (p.y >= 300) {
-      p.vy = -2
-    }
-    if (p.y <= 7) {
-      p.vy = 2
-    }
-
-    function ball(x, y) {
-      ctx.beginPath()
-      ctx.arc(x, y, 5, 0, Math.PI * 2)
-      ctx.fillStyle = '#1aad19'
-      ctx.strokeStyle = 'rgba(1,1,1,0)'
-      ctx.fill()
-      ctx.stroke()
-    }
-
-    ball(p.x, 150)
-    ball(150, p.y)
-    ball(300 - p.x, 150)
-    ball(150, 300 - p.y)
-    ball(p.x, p.y)
-    ball(300 - p.x, 300 - p.y)
-    ball(p.x, 300 - p.y)
-    ball(300 - p.x, p.y)
-  },
-
-  drawCar(ctx) {
-    if (!this._img) return
-    if (this.x > 350) {
-      this.x = -100
-    }
-    ctx.drawImage(this._img, this.x++, 150 - 25, 100, 50)
-    ctx.restore()
-  },
-
-  async renderImageData() {
-    let canvas3 = await getCanvasById('canvas3')
-    let ctx = canvas3.getContext('2d')
-    let imgData = ctx.createImageData(100, 100)
-    for (i = 0; i < imgData.width * imgData.height * 4; i += 4) {
-      imgData.data[i + 0] = 255
-      imgData.data[i + 1] = 0
-      imgData.data[i + 2] = 0
-      imgData.data[i + 3] = 155
-    }
-    ctx.putImageData(imgData, 50, 50)
-  },
-})

components/picture/index.tyml

-<canvas
-  type="2d"
-  canvas-id="canvas"
-  style="width: 300px; height:300px"
-></canvas>
\ No newline at end of file

components/picture/index.tyss

-.canvasDom{
-  /* background-color: coral; */
-  /* margin: 50px auto; */
-  /* border: 1px solid black; */
-}
\ No newline at end of file

components/playlist/index.js

-Component({
-    options: {},
-    data: { x: 999 }, // 组件内部数据
-    lifetimes: {}, // 组件声生命周期
-    methods: {}
-})
\ No newline at end of file

components/playlist/index.json

-{
-    "component": true
-}
\ No newline at end of file

components/playlist/index.tyml

-<view >
-  {{x}}111
-</view>
\ No newline at end of file

components/recycleviewCardList/index.js

-/* eslint-disable no-console */
-Component({
-  properties: {
-    list: {
-      type: Array,
-      value: []
-    },
-  },
-  methods: {
-    onTap() {
-      const myEventDetail = {
-        age: 18
-      } // detail对象，提供给事件监听函数
-      const myEventOption = {
-        bubbles: true,
-        composed: true
-      } // 触发事件的选项
-      this.triggerEvent('myevent', myEventDetail, myEventOption)
-    }
-  }
-})

components/recycleviewCardList/index.json

-{
-  "component": true
-}

components/recycleviewCardList/index.less

-.card{
-  border: 1px solid black;
-}

components/recycleviewCardList/index.tyml

-<!--具体业务列表-->
-<view ty:for="{{list}}" ty:key="index">
-  <view style="height: {{item.height}}px; line-height: {{item.height}}px" class="card">
-    高度：{{item.height}}
-  </view>
-</view>
-<!--具体业务列表-->

components/reduxComponent/index.js

-Component({
-  click: function () {
-    this.triggerEvent("xlComponentClick", void 0, {
-      bubbles: true,
-    })
-  }
-})

components/reduxComponent/index.json

-{
-  "component": true
-}