一、页面布局
position: relative; 相对布局。使用top、left、bottom、right。
position: absolute; 绝对布局。
display: flex;
flex-direction: row; 左右布局。
z-index 层级关系。position: relative 生效。
假如text需要垂直居中显示
先给text添加一个view，在view中样式设置
display: flex;
justify-content: center;
再在text中样式设置
line-height: 100rpx; /*对应需要显示的高度，一般和view保持一致*/
text-align: center;
左右布局flex弹性盒模型对象
父视图view
display: flex;
flex-direction: row;
align-items: center; /*内容居中
其中flex-direction属性：
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
视图固定底部
position:fixed;
bottom:0;
二、npm导入及使用
1、npm install -y（npm install），初始化，根目录创建package.json package-lock.json。
2、导入需要导入的库。npm install xxx。编辑器详情勾选构建npm，工具->构建。
3、.json中引入对应需要使用的库。
三、WebUI使用
1、$ npm install weui-miniprogram
2、app.wxss 导入
@import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';
3、对应.json导入需要使用的组件，
"usingComponents": {
"mp-gallery": "../../miniprogram_npm/weui-miniprogram/gallery/gallery"
},
4、.wxml/.js使用对应组件标签。
注意：可查看对应组件中的代码，可修改WebUI组件中的代码达到自定义效果，或者复制对应class，在使用页面的.xcss中自定义样式。
如设置cells中的icon宽高。首先查看cell.wxml中icon class为weui-cell__icon，可在WebUI组件的cell.wxml中直接修改style，但为了不影响后续其他引用，所以在需要修改样式的.xcss中设置.weui-cell__icon{属性}。
四、string 获取 length
五、网络请求wx.request
POST请求需要设置content-type和服务器对应，否则服务器取不到对应的传参数据
header: {
'content-type': 'application/x-www-form-urlencoded',
},
六、字符串操作
截取：从第1位截取到第3位（不是从第一位开始往后截三位）
string.substring(1,3)
七、布局 display属性
常用方法：
none：隐藏，不会显示
block：设置元素为块级元素，理解为每个元素的类容单独占据一行。默认情况下，block元素宽度自动填满其父元素宽度。类似h1、h1。
inline：设置元素为内联元素，元素不会单独占据一行，设置width,height属性无效。其宽度随元素的内容而变化。
inline-block：不会单独占据一行，同时有块级元素和行内元素的属性，可以设置width,height。类似标签功能，一行内显示，但需要固定每个标签宽高。
八、align-items、align-self、align-content使用及区别
使用前需要将父视图设置为 display: flex;
align-items：设置每个flex子视图的对齐方式。常用属性：
flex-start顶部对齐；
flex-end底部对齐；
center居中对齐；
stretch拉伸适应容器。
九、setdata给data中子元素设置值
var keyStr = 'carNoNumData[' + i + '].value';
this.setData({
[keyStr]: "",
})
数组添加元素：push
数组添加数组：concat
十、Vant有赞控件导入及使用
1、安装：先初始化npm—— cd到小程序工程根目录，执行 npm init
对应的工程描述可一直按回车键跳过，最后按照提示输入yes即可初始化成功。
2、执行导入命令：npm i @vant/weapp -S --production
3、小程序工程勾选使用npm模板
4、工具->构建npm
5、在miniprogram_npm文件夹中可查看vant代码
网友评论