提要

因为公司的营业需求，本想岁尾偷个懒，然则开辟小顺序的使命袭来。

第一次开辟这玩意，纪录一些须要注重的点，今后再次开辟时能够疾速处理。

假如你是新手，引荐你先看官方文档，假如你在开辟小顺序过程当中碰到一些不懂的处所，能够看看这篇文章会不会给你启示。

小顺序内里的许多写法，和vue异常像，假如你是vue开辟者，进修小顺序不须要任何进修本钱。

细则

1、优先运用rpx替换px。

2、设计图一般依据iPhone6的基准。

3、当运用一些交互组件时，优先从官方组件内里遴选，没有再自定义组件。

4、自定义组件一般依据以下花样来写js。

Component({
  options: {
    multipleSlots: true
  },
  properties: {
    data: {
      type: String
    }
  },
  methods: {
    handleClcik: function (e) {
      if (!!e) {
        //handleClcik相似一个回调函数，点击当前自定义组件的某个按钮触发
        this.triggerEvent('_handleClcik', e)
      }
    }
  }
})

5、自定义组件还须要增添json文件。

{
  "component": true
}

6、自定义组件的wxml和wxss和官方组件写法一样。

7、事宜一般以catch或许bind开首，事宜函数用双引号括起来，固然单引号也是能够的。catch和bind的区别是前者不会冒泡，后者支撑冒泡。

<view catchtap="handleClcik"></view>

<view bindtap="handleClcik"></view>

8、假如你的page引用了某个自定义组件，须要在json设置途径，不然不能在page内里挪用。

{
  "usingComponents": {
    "myComponent": "/components/MyComponent/myComponent"
  }
}

9、在page内里挪用自定义组件也很简朴，下面这类体式格局。_handleClcik对应自定义组件内里的triggerEvent。

<myComponent
    data="{{data}}"
    bind:_handleClcik="_handleClcik"
></myComponent>

10、组件中的事宜怎样通报参数呢？这就须要用到HTML5的 data-xx 了。

<view 
    bindtap="handleClcik"
    data-item="{{data}}"
>{{data}}</view>

接着你能够依据上面用到的triggerEvent通报的e，将数据和函数一同通报给父组件中猎取实行。

_handleClcik: function(e) {
    console.log(e) //打印它，你会看到当前点击对象的实例。
}

11、小顺序没有window对象，一切原生组件（包含view）、自定义组件等，经由过程操纵它们的实例，能够猎取到组件的信息（比方高度）。

let query = wx.createSelectorQuery()
    query.select('#id').boundingClientRect()
    query.exec((res) => {
      console.log(res) //当前组件实例的属性
    })

12、onReady是确保你的组件已实例而且衬着完成的函数。

13、更新数据经由过程 this.setData({}) 来完成，这类行动很像React，但在小顺序中是同步的操纵。

14、给组件绑定数据就很简朴了，2个大括号 {{data}}。

15、在组件中设置三元表达式。有时候，我们须要用三元表达式推断款式。

<view
    style="color: {{isRed ? '#f00' : '#fff'}}"
></view>

16、假如你想在小顺序衬着HTML花样的内容，能够运用rich-text组件。

<rich-text nodes='{{html}}'></rich-text>

总结

临时只想到这些，更多的用法在官方文档有细致申明。