小程序开发笔记

小程序启动

1.微信客户端在打开小程序之前，会将整个小程序代码包下载到本地。然后通过app.json中pages字段知道当前小程序所有页面路径。打开小程序看到的第一个页面就是pages中配置的第一个页面。
2.小程序启动后，app.js中定义的App实例的onLaunch回调会被执行。

运行机制

启动机制

1.冷启动--用户首次打开或者小程序被微信主动销毁后再次打开，此时小程序需要重新加载启动。
2.热启动--用户已经打开过小程序，然后在一定时间内再次打开，不需要重新加载启动，只需要将后台态的小程序切换到前台。

运行机制

1.小程序没有重启的概念。
2.当小程序进入后台，客户端会维持一段时间的运行，超过一定时间(目前是5分钟)后会被微信主动销毁。
3.当短时间(5s)内连续收到两次以上系统内存告警，微信会主动销毁小程序。

更新机制

小程序冷启动时如果发现有新版本，将会异步下载新版本的代码包，并同时用客户端本地的包进行启动，即新版本的小程序需要等下一次冷启动才会应用上。 如果需要马上应用最新版本，可以使用 wx.getUpdateManager API 进行处理。

生命周期

• 小程序冷启动时如果发现有新版本，将会异步下载新版本的代码包，并同时用客户端本地的包进行启动，即新版本的小程序需要等下一次冷启动才会应用上。 如果需要马上应用最新版本，可以使用 wx.getUpdateManager API 进行处理。

事件

• bind事件绑定不会阻止冒泡事件向上冒泡(阻止捕获事件)，catch事件绑定可以阻止冒泡事件向上冒泡。
• 小程序事件绑定格式是使用key/value形式。key值构成是bind或catch加上事件类型；value是字符串，是page中定义的函数名。比如：bindtap="switchTab"也可以写成：bind:tap="switchTab"
• capture-bind支持事件捕获，capture-catch中断捕获和阻止冒泡。

wxml

• wxml提供了两种文件引用方式import和include。
  1.import有作用域概念，只导入目标文件中定义的template，不导入目标文件import的template。导入后，可以在现文件中，直接使用目标文件中定义的template。
  2.include可以将目标文件除了<template/> <wxs/>外的整个代码引入，相当于拷贝到include位置。

wxss

• 单位(rpx)：开发可以按这样的比例换算：
  *rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

• image、textarea组件都会有一个默认宽、高。

组件元素

• 小程序中 canvas、textarea、video 等组件使用原生渲染，所以在这些组件面前使用z-index是无效的。会有什么影响？--造成点击穿透、弹窗被覆盖。
  ----使用textarea时候，如果页面上有其它的按钮、内容，textarea的height尽量不要使用autoheight。

js

• 对数据进行格式化尽量在js中处理，尽量不要在wxml组件中处理数据！
• 如果需要跳转到在tabBar中配置的页面，需要使用wx.switchTab，使用wx.redirectTo会无效。

自定义组件

父子组件间通信

• 父组件向子组件传递数据

wxml数据绑定，子 Component中properties用来接收父组件传递过来的数据，使用和data中数据一样this.data调用。
但是在子组件中修改properties中对象的值，不会影响父组件中值。在子组件中是生效的。

• 子组件将变化数据同步给父组件

在引用子组件的时候，属性加上bindmyevent="onMyEvent"。在子组件中使用triggerEvent触发事件
用法this.triggerEvent('myevent', myEventDetail, myEventOption) ,myevent--事件名称，myEventDetail
--传递给父组件的数据(父组件需要监听的数据),myEventOption--触发事件的选项

image.png

跳转

小程序内navigateTo方式最多打开5个页面。比如已经使用navigateTo打开5个页面，再使用navigateTo打开新页面，页面不会跳转也不会报错。
navigateTo方式跳转尽量少用。

图片上传

小程序上传图片，是将文件的二进制流数据发送给服务器。每次只能上传1张。