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

jcc 发布于2019-08-26 11:32 / 1431人阅读

摘要：第一次开发这玩意，记录一些需要注意的点，以后再次开发时可以快速解决。小程序里面的很多写法，和非常像，如果你是开发者，学习小程序不需要任何学习成本。更新数据通过来完成，这种行为很像，但在小程序中是同步的操作。

概要

由于公司的业务需求，本想年底偷个懒，但是开发小程序的任务袭来。

第一次开发这玩意，记录一些需要注意的点，以后再次开发时可以快速解决。

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

小程序里面的很多写法，和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的区别是前者不会冒泡，后者支持冒泡。

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

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

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

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

{{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、在组件中设置三元表达式。有时候，我们需要用三元表达式判断样式。

16、如果你想在小程序渲染HTML格式的内容，可以使用rich-text组件。

总结

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

GPU云服务器云服务器小程序开发开发小程序开发小程序开发开发制作福州小程序开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107081.html

前端资源系列（3）-微信小程序开发资源汇总

摘要：微信小程序应用号开发资源汇总文档工具教程代码插件组件文档从搭建一个微信小程序开始小程序开发文档小程序设计指南工具小程序开发者工具官方支持微信小程序实时预览的支持的微信小程序组件化开发框架转在线工具小程序云端增强社区微信小程序微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件文档从搭建一个微信小程序开始小程序开发文档小程序设计指南工具小程序开发者...

paney129 2019-08-20 11:14 评论0 收藏0
微信小程序开发库grace vs wepy

摘要：和都是辅助小程序开发的开源库，本文对两者做个对比。微信的这种限制决定了小程序一般只是用于实现核心功能，不会用作复杂功能。在笔者了解的很多小程序，甚至大都是用原生开发的。 grace和wepy都是辅助小程序开发的开源库，本文对两者做个对比。注：本文是作者本人的一些拙见，纯粹的技术讨论，不想引起技术信仰之争，欢迎积极、正向的讨论及建议。如果你还不了解Grace, 请参考：微信小程序开发...

james 2019-08-22 15:12 评论0 收藏0