微信小程序学习记录

环境配置

1、申请小程序ID
2、安装微信开发者工具
3、app.json

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

配置字段：
page
window
tabBar
networkTimeout
4、project.config.json
相当于package.json
5、page.json
为每一个页面，配置自己的属性。app.json是全局的。

6、JSON语法
key值必须是双引号包裹。
没有注释。
数据用[]，，对象用{}

数据绑定

wx:if
wx:for

wxss

全局样式和局部样式。
app.wxss和page.wxss。（和app.json,page.json一样）

新增单位rpx，适配不同dpr设备。

绑定事件

bandtap绑定点击事件。

事件分为冒泡事件和非冒泡事件：

冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

catchtap阻止冒泡。

wxs导入 “js”文件并引用

dataset自定义数据

dataset
在组件节点中可以附加一些自定义数据。这样，在事件中可以获取这些自定义的节点数据，用于事件的逻辑处理。

在 WXML 中，这些自定义数据以 data- 开头，多个单词由连字符 - 连接。这种写法中，连字符写法会转换成驼峰写法，而大写字符会自动转成小写字符。如：

data-element-type ，最终会呈现为 event.currentTarget.dataset.elementType ；
data-elementType ，最终会呈现为 event.currentTarget.dataset.elementtype 。

mark和dataset类似。主要区别在于： mark 会包含从触发事件的节点到根节点上所有的 mark: 属性值；而 dataset 仅包含一个节点的 data- 属性值。

动态绑定class

rgba和opacity透明

opacity会让盒子的内容也跟着透明
rgba只透明背景

1、组件内不能使用id选择器，属性选择器等

2、浮动元素无法点击?

需要为浮动元素设置position：relactive；才能点击。
3、浮动元素不影响标准流布局，但会影响文字布局，挤开文字。

微信小程序和vue动态绑定class的区别

微信小程序单条件class=“{ { index2 ? ‘active’:’ ’ }}”
微信小程序多条件class="{ { index1 ? ‘active’:’ ’ }} { { index2 ? ‘activeT’:’ ’ }} { { index3 ? ‘activeH’:’ ’ }}"(以空格分隔)

VUE 单条件判断 :class=" index1? ‘active’:’ ’ " 或者 :class="{borderbottom:index1}"
VUE 多条件判断 :class="{‘redRoom’: items.status=== 1, ‘greenRoom1’: Number(items.status) === 2, greenRoom2: Number(items.status) > 2}"(以，分隔)

链接：https://www.jianshu.com/p/7f6951dd1597

脱离标准文档流

1、float
2、position: fixed/absolute

flex布局

1、flex内浮动无效。
2、水平居中
3、垂直居中
flex-direction属性，设置布局方向。主轴方向
justify-content设置对齐方向。主轴上的对齐方式

align-items，垂直居中。交叉轴上的对齐方式。

项目上的属性：
order
flex-grow，比例划分，再套一层盒子。
align-self属性，定义自己独特的align-items属性。

flex项目被挤压问题

产生原因：子项目大于父容器
解决方法：
给被挤压项目设置属性：flex-shrink：0

• 合理使用div
  使用h，ul，li，button，

外边距合并问题：

父级元素增加border,overflow
使用定位或者是浮动
使用padding-top替代margin-top,。

组件和页面

都有四个文件，js,json,wxml,wxss.

组件中的js文件，用Component({}）包裹着。properties定义属性，data定义数据，methods定义方法。

页面中的js，用Page（{}）包裹着，data定义数据，函数直接写。

<