前端系列——小程序开发记录片

概要

因为公司的业务需求，本想年末偷个懒，可是开发小程序的任务袭来。

第一次开发这玩意，记录一些须要注意的点，之后再次开发时能够快速解决。

若是你是新手，推荐你先看官方文档，若是你在开发小程序过程当中遇到一些不懂的地方，能够看看这篇文章会不会给你启发。

小程序里面的不少写法，和vue很是像，若是你是vue开发者，学习小程序不须要任何学习成本。

细则

一、优先使用rpx替代px。

二、设计图一般按照iPhone6的基准。

三、当使用一些交互组件时，优先从官方组件里面挑选，没有再自定义组件。

四、自定义组件一般按照如下格式来写js。

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

五、自定义组件还须要增长json文件。

{
  "component": true
}

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

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

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

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

八、若是你的page引用了某个自定义组件，须要在json配置路径，不然不能在page里面调用。

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

九、在page里面调用自定义组件也很简单，下面这种方式。_handleClcik对应自定义组件里面的triggerEvent。

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

十、组件中的事件如何传递参数呢？这就须要用到HTML5的 data-xx 了。

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

接着你能够根据上面用到的triggerEvent传递的e，将数据和函数一块儿传递给父组件中获取执行。

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

十一、小程序没有window对象，全部原生组件（包括view）、自定义组件等，经过操做它们的实例，能够获取到组件的信息（好比高度）。

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

十二、onReady是确保你的组件已经实例而且渲染完成的函数。

1三、更新数据经过 this.setData({}) 来完成，这种行为很像React，但在小程序中是同步的操做。

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

1五、在组件中设置三元表达式。有时候，咱们须要用三元表达式判断样式。

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

1六、若是你想在小程序渲染HTML格式的内容，可使用rich-text组件。

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

总结

暂时只想到这些，更多的用法在官方文档有详细说明。