微信小程序前端开发经验分享

2018-10-25 15:42

摘要:如果你是新手,推荐你先看官方文档,如果你在开发小程序过程中遇到一些不懂的地方,可以看看这篇文章会不会给你启发。

如果你是新手,推荐你先看官方文档,如果你在开发小程序过程中遇到一些不懂的地方,可以看看这篇文章会不会给你启发。

细则

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的区别是前者不会冒泡,后者支持冒泡。

8、如果你的page引用了某个自定义组件,需要在json配置路径,否则不能在page里面调用。

{

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

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

    data={{data}}

    bind:_handleClcik=_handleClcik

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

    bindtap=handleClcik

    data-item={{data}}

{{data}}

接着你可以根据上面用到的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、在组件中设置三元表达式。有时候,我们需要用三元表达式判断样式。

    style=color: {{isRed: \'#f00\' : \'#fff\'}}

总结

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


相关资讯: 微信小程序   微信小程序开发教程

参与讨论

发表评论

扫码添加专属客服即可随时咨询

还可领取小程序推广攻略