@qihoo/wx2qh-components v0.1.0

wx2qh-components

components are used in wx2qh

Usage

• QHTemplate

QHTemplate

360 小程序的底层是 vue.js, 为了兼容微信小程序的模板(template) 语法，QHTemplate.js 是用 vue 实现的小程序模板。主要用于迁移微信小程序的工具中。迁移工具

微信小程序 template 语法介绍

WXML 提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用

• 定义模板 使用 name 属性，作为模板的名字。然后在内定义代码片段

<!--
  index: int
  msg: string
  time: string
-->
<template name="msgItem">
  <view>
    <text>{{index}}: {{msg}}</text>
    <text>Time: {{time}}</text>
  </view>
</template>

• 使用模板 使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入

<template is="msgItem" data="{{...item}}" />

template-def

实现了 微信小程序的 template 定义功能,使用方式如下

<!--
  name: string 声明的模板名称
  scope: number 要定义模板到vue实例的uid
-->
<template-def name="a" :scope="_uid">
  <!--
      v-slot: object 模板内容中定义的变量标识符必须在这里声明，否则传入的标识符值为undefined 而报错
    -->
  <template v-slot="{ _uid, content }">
    <!--为什么要有这个 div，vue.js 中 template 不能有多个子节点-->
    <div>
      <se-view class="is_view">template a</se-view>
      <se-view class="is_view">{{content}}</se-view>
    </div>
  </template>
</template-def>

template-ref

实现了 微信小程序的 template 引用功能,使用方式如下

<!--
  name: string 引用模板的名称
  data: int     模板所需要的 data
  scope: number 从与scope匹配的vue实例上读取模板
-->
<template-ref name="a" :data="{ ...tData }" :scope="_uid"></template-ref>