概要由于公司的业务需求,本想年底偷个懒,但是开发小程序的任务袭来。 第一次开发这玩意,记录一些需要注意的点,以后再次开发时可以快速解决。 如果你是新手,推荐你先看官方文档,如果你在开发小程序过程中遇到一些不懂的地方,可以看看这篇文章会不会给你启发。 细则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> 总结暂时只想到这些,更多的用法在官方文档有详细说明。 |
前端系列——小程序开发记录片
发布:2018-05-05 14:45浏览: 次来源:网络 作者:cola
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
相关文章
- 微信小程序app.json文件常用配置说明2021-07-09
- 微信小程序文字控制单行超过显示省略号2021-07-09
- 微信小程序参数传递的几种方法2021-07-09
- 微信小程序使用button按钮分享2021-07-09
- 微信小程序的setData2021-07-09
- 小程序分享,获取openid2021-07-08
- 微信小程序-实现tab2021-07-08
- 微信开发者工具新建和导入小程序2021-07-08
- 微信小程序实现点击拍照长按录像功能2021-07-08
- 微信小程序必知知识2021-07-08