微信小程序使用

提炼出小程序使用的一些注意事项，属于本人的参考文档

1. App

1.1 在其他页面获取app实例

const appInstance = getApp()

2. page

2.1 获取页面的 data 的值，this.data

2.2 设置data的值 this.setData

this.setData(newData, cb)

支持改变数组中的某一项或对象的某个属性，如 array[2].message，a.b.c.d，并且不需要在 this.data 中预先定义

2.3 behaviors 类似 vue 的mixin

var myBehavior = require('./my-behavior.js')
Page({
  behaviors: [myBehavior],
  onLoad: function() {
    this.data.sharedText === 'This is a piece of data shared between pages.'
  }
})

3. 组件

Component(obj)

3.1 配置

• 需要在 .json 里面声明

{
  "component": true
}

• 在组件wxss中不应使用ID选择器、属性选择器和标签名选择器，改用class选择器。

3.2 属性

• 数据监听 observers
• created()，生命周期，组件实例刚刚被创建时执行，注意此时不能调用 setData
• 其他生命周期：attached()、ready()、moved()、detached()
• relations 组件间关系定义

 relations: {
    './custom-li': {
      type: 'child', // 关联的目标节点应为子节点
      linked: function(target) {},
      linkChanged: function(target) {},
      unlinked: function(target) {}
    }
  }

可以通过 this.getRelationNodes() 获取关联的nodes

3.3 使用自定义组件

• 声明 .json

{
  "usingComponents": {
    "component-tag-name": "/components/helloWorld/helloWorld"
  }
}

使用 usingComponents 后可以通过 selectComponent获取子组件

this.selectComponent('.helloWorld')

• 使用子组件

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

• 自定义组件和页面所在项目根目录名不能以“wx-”为前缀，否则会报错

• properties 与 vue 的 prop类型

// 子组件
 properties: {
    propA: String,
    propB: String
  },

<!-- 父组件 -->
<my-component prop-a="{{dataFieldA}}" prop-b="{{dataFieldB}}">
  <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
    <view>这里是插入到组件slot中的内容</view> 
</my-component>

3.4 slot与vue的slot类似

• 使用多个slot，首先进行申明

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  }
})

• 以不同的 name 来区分

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

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

3.5 组件样式

#a { } /* 在组件中不能使用 */
[a] { } /* 在组件中不能使用 */
button { } /* 在组件中不能使用 */
.a > .b { } /* 除非 .a 是 view 组件节点，否则不一定会生效 */
/* 继承样式，如 font 、 color ，会从组件外继承到组件内。 */