一、页面布局
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代码