微信小程序 基础
欢迎体验个人小程序
表情小作坊 轻松定制表情包 三连图 文字转图片
吃什么都行 解决广大用户吃饭选择恐惧症的问题
官网
微信公众平台，上面有最新的api和开发工具
https://mp.weixin.qq.com/debug/wxadoc/dev/quickstart/basic/getting-started.html
微信开发者工具
https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
新建项目
https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/page.html
目录结构
每个小程序都需要包含：
- app.js 为小程序主逻辑
- app.wxss 为小程序公共样式
- app.json 为小程序公共配置
pages目录里存放的是小程序各个页面的信息；
每个页面包含：
- .js文件 各个页面的逻辑
- wxml文件 各个页面所包含的组件的结构
- .wxss文件 各个页面的组件样式
- .json文件 各个页面的配置（此处的配置会覆盖app.json下相同的配置）
页面的显示需要在app.json的pages节点以文件目录+文件名注册，第一个注册的页面为启动页
调试
小程序的注册
app.js 里必须要一个有App()函数来注册当前小程序，App()函数接受一个 object 参数，其指定小程序的生命周期函数等。
//app.js
App({
/**
* 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
*/
onLaunch: function () {
},
/**
* 当小程序启动，或从后台进入前台显示，会触发 onShow
*/
onShow: function (options) {
},
/**
* 当小程序从前台进入后台，会触发 onHide
*/
onHide: function () {
},
/**
* 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
*/
onError: function (msg) {
}
})
各个页面的注册
各个页面的.js文件必须有Page() 函数用来注册当前页面。Page() 函数接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
布局
1.flex布局
2.相对定位和绝对定位
flex布局
默认的主轴和交叉轴方向
flex容器属性：
- flex-direction 决定元素的排列方向（指定哪个方向是主轴）
- flex-wrap 决定元素如何换行（排列不下时）
- flex-flow flex-direction和flex-wrap的简写
- justify-content 元素在主轴上的对齐方式
- align-items 元素在交叉轴上的对齐方式
flex元素属性：
- flex-grow 当有多余空间时，元素的放大比例
- flex-shrink 当空间不足时，元素的缩小比例
- flex-basis 元素在主轴上占据的空间（若空间不足时不会被压缩）
- flex时grow、shrink、basis的简写
- order定义元素的排列顺序
- align-self定义元素自身的对齐方式 会复写flex容器对此元素的align-items属性
我们在例子里慢慢分析好了。。。
flex-direction
wxml：
1
2
3
4
wxss：
.container {
width: 100%;
/*vh
*vh就是当前屏幕可见高度的1%，也就是说
*height:100vh == height:100%;
*但是有个好处是当元素没有内容时候，设置height:100%该元素不会被撑开，
*但是设置height:100vh，该元素会被撑开屏幕高度一致 */
height: 100vh;
background-color: rebeccapurple;
/*指定flex布局方式 */
display: flex;
/*决定由左到右为主轴，从上到下为交叉轴 */
flex-direction: row;
}
.item {
width: 100rpx;
height: 100rpx;
background-color: yellow;
/*边框 1px 白色 */
border: 1px solid white;
}
看下结果吧
很好理解吧。。
最外层的view是flex容器，容器的样式为container，里面有四个item，item样式为item（注释上分析了我们使用的属性）
flex-wrap
当我们添加几个条目，修改wxml如下时，发现条目被挤的变形了
wxml：
1
2
3
4
5
6
7
8
9
显示：
加上flex-wrap属性后
wxml：
.container {
width: 100%;
/*vh
*vh就是当前屏幕可见高度的1%，也就是说
*height:100vh == height:100%;
*但是有个好处是当元素没有内容时候，设置height:100%该元素不会被撑开，
*但是设置height:100vh，该元素会被撑开屏幕高度一致 */
height: 100vh;
background-color: rebeccapurple;
/*指定flex布局方式 */
display: flex;
/*决定由左到右为主轴，从上到下为交叉轴 */
flex-direction: row;
/*wrap 当一行排列不下时换行 nowrap当排列不下时不换行 wrap-reverse反转 */
flex-wrap: wrap;
/*flex-flow 指定 flex-direction对应属性值+空格+flex-wrap对应属性值 相当于上两个属性同时指定 */
}
.item {
width: 100rpx;
height: 100rpx;
background-color: yellow;
/*边框 1px 白色 */
border: 1px solid white;
}
结果：
justify-content
wxml:
.container {
width: 100%;
/*vh
*vh就是当前屏幕可见高度的1%，也就是说
*height:100vh == height:100%;
*但是有个好处是当元素没有内容时候，设置height:100%该元素不会被撑开，
*但是设置height:100vh，该元素会被撑开屏幕高度一致 */
height: 100vh;
background-color: rebeccapurple;
/*指定flex布局方式 */
display: flex;
/*决定由左到右为主轴，从上到下为交叉轴 */
flex-direction: row;
/*wrap 当一行排列不下时换行
*nowrap当排列不下时不换行
*wrap-reverse反转 */
flex-wrap: wrap;
/*flex-flow 指定 flex-direction对应属性值+空格+flex-wrap对应属性值 相当于上两个属性同时指定 */
/*
*指定主轴的排列方式
*center 居中
*flex-start 居于主轴方向起点依次排列
*flex-end 居于主轴方向终点依次排列
*space-between 主轴起点、终点分别为第一个、最后一个元素，其余元素分割剩余空间
*space-around 主轴上每个元素两边占据的空间相等 */
justify-content: center;
}
.item {
width: 100rpx;
height: 100rpx;
background-color: yellow;
/*边框 1px 白色 */
border: 1px solid white;
}
显示：
align-item：
前三种类似上面，后两种不再举例，可动手实验
- flex-start
- flex-end
- center
- stretch 当元素没有设置高度时，设置此属性，元素高度会占满容器
- baseline 让元素以元素中第一行文字来对齐
好了，flex容器属性介绍完了，再挑几个flex元素属性再举个例子
order
我们把元素数量减少为4个，为4个条目均添加样式，指定其不同的order值。
wxml：
1
2
3
4
显示：
可以看到，order即为元素排列的顺序（由1至4 为 从大到小）
align-self
此例中item1 item2 item4 公用item样式，item3的样式中添加了align-self为center
wxml:
1
2
3
4
wxss：
.container {
width: 100%;
/*vh
*vh就是当前屏幕可见高度的1%，也就是说
*height:100vh == height:100%;
*但是有个好处是当元素没有内容时候，设置height:100%该元素不会被撑开，
*但是设置height:100vh，该元素会被撑开屏幕高度一致 */
height: 100vh;
background-color: rebeccapurple;
/*指定flex布局方式 */
display: flex;
/*决定由左到右为主轴，从上到下为交叉轴 */
flex-direction: row;
/*wrap 当一行排列不下时换行
*nowrap当排列不下时不换行
*wrap-reverse反转 */
flex-wrap: wrap;
/*flex-flow 指定 flex-direction对应属性值+空格+flex-wrap对应属性值 相当于上两个属性同时指定 *//*
*指定主轴的排列方式
*center 居中
*flex-start 居于主轴方向起点依次排列
*flex-end 居于主轴方向终点依次排列
*space-between 主轴起点、终点分别为第一个、最后一个元素，其余元素分割剩余空间
*space-around 主轴上每个元素两边占据的空间相等 */
justify-content: center;
/*
*flex-start
*flex-end
*center
*stretch 当元素没有设置高度时，设置此属性，元素高度会占满容器
*baseline 让元素以元素中第一行文字来对齐
*/
align-items: baseline;
}
.item {
width: 100rpx;
height: 100rpx;
background-color: yellow;
/*边框 1px 白色 */
border: 1px solid white;
}
.item3 {
width: 100rpx;
height: 100rpx;
background-color: yellow;
/*边框 1px 白色 */
border: 1px solid white;
/*
*flex-start 不再赘述
*flex-end
*center
*
*/
align-self: center;
}
相对定位和绝对定位
相对定位的元素时相对自身进行定位，参照物是自己
绝对定位的元素时相对离它最近的一个已定位的父级元素进行定位
相对定位：
wxml：
1
2
3
4
wxss：
.container {
width: 100%;
height: 100%;
background-color: rebeccapurple;
}
.item {
width: 150rpx;
height: 150rpx;
background-color: yellow;
border: 1px solid white;
}
.item2 {
width: 150rpx;
height: 150rpx;
background-color: yellow;
border: 1px solid white;
/*相对定位，相对于自身向左偏移150rpx*/
position: relative;
/*距离左边150rpx*/
left: 150rpx;
}
显示：
绝对定位：
wxml：
1
2
3
4
wxss：
.item {
width: 150rpx;
height: 150rpx;
background-color: yellow;
border: 1px solid white;
}
.item2 {
width: 150rpx;
height: 150rpx;
background-color: yellow;
border: 1px solid white;
/*绝对定位，由于父容器未指定位置，所以是相对于整个页面距离左边50rpx，距离上边50rpx*/
position: absolute;
left: 50rpx;
top: 50rpx;
}
显示：
绝对定位，由于父容器未指定位置，所以是相对于整个页面距离左边50rpx，距离上边50rpx
感觉不够有说服力是吧？
我们给父容器view添加一个margintop
好了，很清楚咯
当我们给父容器view添加position属性，使其已定位
好了，布局就介绍到这里。。23：16，明天还要上班，洗洗睡了