博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端系列——小程序开发记录片
阅读量:5876 次
发布时间:2019-06-19

本文共 1518 字,大约阅读时间需要 5 分钟。

概要

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

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

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

小程序里面的很多写法,和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组件。

总结

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

转载地址:http://cskix.baihongyu.com/

你可能感兴趣的文章
Excel批量导出
查看>>
visio 2010
查看>>
CENTOS流水账0002.1[MySQL安装]
查看>>
为什么Eclipse中 按 F3 无效
查看>>
Nginx+tomcat(window)配置
查看>>
spring mybatis 框架集成之applicationContext.xml配置方法
查看>>
rhel 6.0 yum 安装装7zip压缩解压缩软件
查看>>
LNMP——php-fpm
查看>>
sth about initial project with heroku(simple)
查看>>
添加第三方的APK的俩种方法
查看>>
DataTable.Select方法(String,String)
查看>>
C++代码问题(segment fault)
查看>>
TCP的连接和释放
查看>>
垃圾收集算法(jvm之三)
查看>>
读、写其他应用的SharedPreferences
查看>>
Android官方提供的支持不同屏幕大小的全部方法
查看>>
Android 编程下的代码混淆
查看>>
分布式任务队列-celery
查看>>
执行shell的时候开启调试模式
查看>>
[ASP.NET Debugging BuggyBits读书笔记] Lab05 Crash
查看>>