qq小程序天坑之旅

qq小程序

吐槽qq小程序开发者工具

• 不能通过uni-app打开。
• 项目文件间互相引用问题颇多。
• 开发工具容易崩溃。
• 文档不够详尽。

注意点

• 在组件qss中不应使用id，属性，标签选择器，最好用类选择器。
• qml文件标签名只能是小写字母，中划线，下划线的组合，所以自定义组件的标签名也只能包含这些字符。
• 自定义组件也是可以引用自定义组件，引用方法类似于页面引用自定义组件的方式usingComponent字段
• 自定义组件和页面所在项根目录名不能以qq-为前缀，否则会报错。
• 是否在页面文件中使用 usingComponents 会使得页面的 this 对象的原型稍有差异，包括：
  • 使用 usingComponents 页面的原型与不使用时不一致，即 Object.getPrototypeOf(this) 结果不同。
  • 使用 usingComponents 时会多一些方法，如 selectComponent 。
  • 出于性能考虑，使用 usingComponents 时， setData 内容不会被直接深复制，即 this.setData({ field: obj }) 后 this.data.field === obj。（深复制会在这个值被组件间传递时发生。）
• 直接修改this.data而不调用this.setData是无法改变页面的状态的，还会造成数据不一致
• 不要将data里的任何一项的value设为undefined，否则这一项将不被设置并可能会存在一些潜在问题。
• navigateTo，redirectTo只能打开非tabBar页面，switchtab只能打开tabBar的页面。reLaunch可打开任意页面。调用页面路由带的参数可以在目标页面的onLoad中获取。
• 通过全局函数getApp（）可以获取全局的应用实例，如果需要全局的数据可以在App（）中获取。
• require只支持相对路径，不支持绝对路径。
• 约定以on开头的API用来监听某个时间是否发生，当事件触发时会调用这个回调函数并将相关数据以参数的形式传入。
• 除继承样式外，app.qss中的样式，组将所在页面的样式对自定义组件无效。组件可以指定他所在节点的默认样式，使用:host选择器。

使用自定义组件

1. 在自定义组件中的json文件定义{"component":true}
2. 在自定义组件中的qml编写组件模板（同index.qml写的相同），qss中加样式。（在组件qss中不应使用id，属性，标签选择器，最好用类选择器）
3. 在自定义组件的 js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法。

Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    customMethod() {}
  },
  externalClasses:['my-class']//从index页面中传过来的类
})

4. 在index.json文件中引用声明。

{
  "usingComponents": {
    "component-tag-name": "path/to/the/custom/component"
  }
}
//路径是相对于index文件夹的
//component-tag-name是在页面中使用的组件名

5. index页面中使用组件。

<view>
  <!-- 以下是对一个自定义组件的引用 -->
  <component-tag-name inner-text="Some text" class="my-class"></component-tag-name>
</view>

父子组件间传值

注：设index页面是引用页面，component为组件，便于理解。

<view>
  <component-tag-name prop-a="{{dataFieldA}}" prop-b="{{dataFieldB}}">
    <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
    <view>这里是插入到组件slot中的内容</view>
  </component-tag-name>
</view>
<!-- 在引用组件中的js文件中定义dataFiledA，并通过属性propA传给组件 -->
<!-- 标签中中划线连接者，在组件中都需要将其转为驼峰式 -->

在组件的js文件中通过properties进行接收

Component({
	properties:{
		propA:Object //注名类型
	}
})

在组件的qml文件中引用

<view class="wrapper">
    <view>这是组件内部的节点</view>
    <slot></slot>
    {{propA.name}}
</view>

组件中使用多slot

• 默认情况下，一个组件只能使用一个slot。需要使用多slot时，可以在组件js中声明启用。

Component({
	options:{
		multipleSlots:true
	},
	properties:{},
	data:{},
	methods:{}
})

• 在组件模板component.qml使用多个slot，以不同name值区分

<view class="wrapper">
	<slot name = "before"></slot>
	<view>这里是组件的内部细节</view>
	<slot name="after"></slot>
</view>

• 在index.qml中使用时，用 slot 属性来将节点插入到不同的slot上。

<view>
  <header>
    <!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->
    <view slot="before">这里是插入到组件slot name="before"中的内容</view>
    <!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
    <view slot="after">这里是插入到组件slot name="after"中的内容</view>
  </header>
</view>

导入模板

• 定义模板template.qml及其样式文件template.qss

<!-- template.qml -->
<template name="navigation">
    <view class="navigation_grounp">
        <view class="navigation" hover-class="none" hover-stop-propagation="false">
            <block wx:if="{{true}}">
                <text class="nav_search">返回</text>
            </block>
            <text class="nav_title">nija</text>
        </view>
    </view>
</template>

 /* template.qss */
.navigation_grounp{
     position: flexed;
     top: 0;
     width: 100%;
 }
 .navigation_grounp > .navigation{
     display: flex;
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
     padding: 0 15px;
     background-color: green; 
     height: 44px;
     color:red;
 }
 .navigation .nav_search{
     width: 33.3%;
     overflow: hidden;
 }
  .navigation .nav_title{
        width: 33.3%;
        text-align: center;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }

• 在index文件中导入

<!-- index.qml -->
<import src="./../template/template" />
<template is="navigation"></template>

/* index.qss，没导入该文件，其样式不会在index中显示 */
@import './../template/template.qss'