微信小程序学习笔记

TIPS

小程序学习笔记

微信开放文档-小程序 (opens new window)

标签

• div --- view 容器组件
• img --- image 图片组件 可以使用绝对路径, 相对于该项目存在的文件夹
• span --- text 文字组件
• css里面设置page相当于设置body样式

配置

.json可以配置当前页面的导航颜色和其他样式

自适应

小程序里面所有的机型的宽度为750rpx, 高度为1334rpx, ihpone6的宽375, 高667, 此时2rpx=1px

绑定事件

• catch: bindcatch/bind:catch 可以阻止事件冒泡
• bind: bindtap/bind:tap

点击事件里面的事件对象e, e.currentTarget: 事件绑定的当前组件, e.target: 触发事件的源组件(触发事件的dom)

组件

• button: 按钮组件, 去掉边框只能通过伪元素

• text组件:

  直接写在小程序中的文字一样有效果, 但是无法长按选中, 所以需要text组件

  组件属性: selectable 是否可选, sapce 显示连续空格, decode 是否解码, 如解析 &nbsp

• view组件:

  • hover-class: 手指按下去的样式, 值为none时无效果
  • hover-stop-propagation: 阻止冒泡
  • hover-start-time: 按住多久出现点击态(ms)
  • hover-stay-time: 手指松开后保留样式的时间(ms)

TIPS

组件上传值: data-属性名, 在点击事件里面通过 e.currentTarget.dataset.属性名 获取, 无论前面写的属性名是不是驼峰, 取值时必须全是小写

路由

• wx.redirectTo 关闭当前页面, 跳转新的页面
• wx.navigateTo 保留当前页面, 跳转新页面, 可以通过 wx.navigateBack 返回

WARNING

微信小程序因性能规定, 最多能缓存10个页面

生命周期

小程序生命周期: onLaunch => onShow => onHide(onError) 页面生命周期: onLoad => onShow => onReady => onHide => onShow => onUnload

循环

`wx:for="{{array}}"` 默认是 `item` 和 `index`

绑定key: wx:key

`wx:key="id"` 不需要使用item.id,可以直接使用id
`wx:key="*this"` 如果是 `[1,2,3,4]` 可以直接绑定为当前的值

自定义item `wx:for-item="arrayItem"`
自定义index `wx:for-index="arrayIndex"`

设置数据

设置data: this.setData({})

小程序组件注意事项

1. 在组件中不能使用 id 选择器, 属性选择器和标签选择器, 需要使用 class 选择器
2. 在 properties 里面接收的数据同样可以在 data 里面定义, 但是 properties 的优先级更高
3. 图片的预览: wx.previewImage({urls:[],current: 'img-url'}) 图片的url好像必须是https, 否则会出现黑屏
4. cover-image 标签无法显示gif图
5. 原生的 video 组件绑定事件只能用 bind, 不能用 catch, 并且 bind 的写法只能是 bindtap
6. 组件内使用 this.triggerEvent("", {}, {}) 触发自定义事件
7. input 如果同时使用 提交事件 和 blur 事件, 在输入框内回车提交会先执行 提交, 再执行 blur 事件
8. 视频设置封面是会出现设置不上的bug, 需要自己手动设置封面, 原生的标签层级是最高的, 无论其它dom的z-index多大都无法覆盖, 所以需要用 cover-view 和 cover-image 标签