微信小程序

1、保持某元素水平居中：使用弹性盒子。

/*wxss文件*/
.user{
  display: flex;
  flex-direction: column;
  /*justify-content: center;*/
  
  align-items: center;
}

justify-content：space-around保持垂直方向均匀分布。

2、position:absolute可以实现在图片上加文字。

<image></image>
<view>内容</view>

3、跳转：
①图片/文字添加超链接跳转：使用navigator标签。默认是块状元素。

//插入文本里
<view>
	<text>前方</text><navigator url="..." style="display:inline">中部</navigator><text>后方</text>
</view>

√ text内的元素只能包含纯文本。其中包含的其它类型的元素都会被忽略掉。
√ 注：要跳转页面的路径(pagePath)不能是tabBar里的。

√ 默认跳转页面可点左上角返回，对应属性值open-type:navigate。如果不返回/重叠式操作：open-type:redirect。

√ 为超链接增添点击态样式效果：属性hover-class。适用于组件：view、button、navigator。

//wxml文件：
<navigator hover-class='nav-hover' class='nav-default'>xxx</navigator>
//wxss文件：
.nav-hover{
	color:red;//点击态颜色
}
.nav-default{
	color:blue;//默认时链接颜色
}

按这个顺序定义后，发现点击链接时不显示红色。
原因：参看wxml面板：
点击前：

点击时：class自动添加了点击态样式规则hover-class的名称。

根据css级联算法：两规则的属性值冲突，且两规则对应选择器的特指度相同时，取后面定义的属性值。即覆盖。
∴nav-hover样式放nav-default后面。

如果在style里定义了默认态颜色，hover-class也失效。

②组件跳转：绑定事件。
button实现swiper跳转。

//wxml文件：
<swiper current:{{currentIndex}}></swiper>
<button bindtap='f0'>Click me</button>

//js文件：
Page({
	data:{
		swiperList:[...],
		...
	},
	f0:function(event){
		this.setData({
			currentIndex:this.data.swiperList.length-1
		})
	}

③wx.navigateTo()
wx.redirectTo()
wx.switchTab()

4、

注：小程序页面加载的时候，可以通过options获取到上一个页面标签的属性以及属性值。

5、视图层的更新不会自动引起内部状态数据的变化。数据层对内部状态数据是单向绑定。

6、事件：视图层→逻辑层的通讯方式。
√将用户的行为反馈到逻辑层进行处理。
√可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。

冒泡事件：一个组件上的事件被触发后，事件会向父节点传递。
bindtap：触发事件向父节点传递，并使父节点调用自己的事件。
catchtap：阻止事件向父节点传递。
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

7、dataset：组件的自定义元素属性。
在js函数里打印事件对象属性：console.log(event.currentTarget)：

在属性中定义data-articleid={{item.id}](绑定js的数据)，点击后：

组件元素上的数据属性data-a-b会转换成对象的属性aB(驼峰表示法)。

流程：点击——调用tap事件绑定的函数——函数的event获取当前元素的自定义属性——触发附带属性的url打开页面。首先读取‘?’后querystring部分的参数——解析成options参数对象——调用对应页面js文件里Page({object})中定义的onLoad函数——把options参数对象传入onLoad——onLoad执行时会对options的属性进行操作。
通过this.setData({xx:options.x})就可以保存变量属性值。可以在视图渲染中，以数据绑定方式渲染输出。

8、wx.request：异步调用。调用完会立刻返回，不会阻塞，然后执行后面的语句/逻辑。小程序后台负责监听什么时候收到response，调用对应回调函数处理。

配置服务台域名刷新后报错：
如若已在管理后台更新域名配置，请刷新项目配置后重新编译项目，操作路径：“项目-域名信息”
方法：工具——项目详情——勾选最后一项：不校验安全域名xxx。

data属性：抽取HTTP response中的body进行转换，保存在data属性中。
→header的Content-Type是text/html：直接把response body的内容作为字符串存入data。
→…………是application/json：返回json格式的文本，运行环境会解析成javascript值。
→→返回的文本是json对象：解析成javascript对象；
→→返回的文本是json对象数组：解析成js对象数组。

header属性：response的header字段及值抽取出来，封装为对应的js对象。
statusCode属性：response状态码。

采用代理访问豆瓣电影：

控制台结果：

发现data是空的。没有搜到原因，换了一个大佬的代理：https://douban.uieee.com/，content-type也改了json格式，结果不断提示403。后来发现：Content-Type是大写。

成功。

9、修改checkbox样式：

//wxss文件
//原状态
checkbox .wx-checkbox-input{
	border-radius:50%;//圆形
	...
}
//选中后的图标样式
checkbox .wx-checkbox-input.wx-checkbox-input-checked{
	...
}
//选中后的对钩样式
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
	...
}

注：①样式名称是固定的，自定义的没用。②一定要带上checkbox+空格！！有空格！！

transform：变换。

• scale：缩放，1 为原始大小。参数为正数时放大，负数缩小。属性值为一个时，x/y 轴同时缩放；为两个值时，分别控制 x、y 轴的缩放。

• rotate：水平旋转，属性值格式为 Xdeg。X 为正→顺时针旋转；为负→逆时针旋转

• translate：平移，基于 XY 轴重新定位元素。属性值为一个时，x、y 轴参数相同；为两个时，x、y 轴分别定位

• skew：将元素沿水平方向倾斜变形。属性值为一个时，x/y 轴参数相同；为两个时，x、y 轴各自倾斜

-webkit 是表示针对 safari 浏览器支持，-ms表示针对 IE 浏览器支持。

参考：https://blog.csdn.net/robin912/article/details/80753859

10、元素:nth-of-type(x)：规定属于其父元素的第x个某元素的每个该元素的样式。
x=2n+1或x为odd：所有排奇数位的元素。
x=an+b：n是计数器，b是偏移值。

11、实现九宫格：
①每个小格width=33.3333333%。
注：每个格子包在<navigator>标签中！！不然不生效！！所有的都变成一排了！！以及加上flex-wrap:wrap，并且不能设置margin，否则也不生效！
②结合weui：下载github上weui.wxss文件，安装小程序项目在根目录下。
大格面板属性：weui-grids，小格属性：weui-grid，可结合需求自行修改。