小程序: 一种新的应用形态
一种不要安装下载即可使用的应用
触手可及:
通过扫一扫,或者搜索,或者通过公众好跳转。
用完即走:
用户不关心是否安装太多应用的问题,应用无处不在,随时可用,无需安装,也无需卸载。
<!-- rpx: 微信把每个手机屏幕的宽度为750px -->
<!-- iphone 6 375px 750rpx=375px 1rpx=0.5px -->
flexbox布局弹性盒模型
1 display
flex-direction 排布的方向 row(横向) column(纵向)
<view id="container">
<view class=“cubic”></view>
<view class=“cubic”></view>
<view class=“cubic”></view>
<view class=“cubic”></view>
</view>
flex布局详见 https://www.runoob.com/w3cnote/flex-grammar.html
#container{
100%;
height: 700rpx;
background:#ddd;
display:flex;
flex-direction: row; 主轴为水平方向,起点在左端。
/*flex-dorection: column;*/ 主轴为垂直方向,起点在上沿
just-ify-content: flex-start; :左对齐
just-ify-content:flex-end; 右对齐
just-ify-content: center; 居中
just-ify-content: space-between; 两端对齐,项目之间的间隔都相等。
just-ify-content: space-around; 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
align-items: flex-start; 交叉轴的起点对齐
align-items: flex-end; 交叉轴的终点对齐
align-items: center ; 交叉轴的中点对齐
align-items: baseline; 项目的第一行文字的基线对齐
align-items: stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
}
.cubic{
100rpx;
height:100rpx;
background:#fff;
}
项目的配置 -- Pages
{
“pages”: [
"page/index/index",
“page/page02/page02”
],
"window":{
"navigationBarBackgroundColor": "#000000", 导航栏背景颜色,如 #000000
"navigationBarTextStyle": white, 导航栏标题颜色,仅支持 black
/ white
"navigationBarTitleText": "我的标题", 导航栏标题文字内容
"navigationStyle": default, 导航栏样式,仅支持以下值:default
默认样式,custom
自定义导航栏,只保留右上角胶囊按钮
"backgroundColor": "#fff", 窗口的背景色
"backgroundTextStyle": drak, 下拉 loading 的样式,仅支持 dark
/ light
"backgroundColorTop": "#ffffff", 顶部窗口的背景色,仅 iOS 支持
"backgroundColorBottom": "#ffffff", 底部窗口的背景色,仅 iOS 支持
"enablePullDownRefresh": false, 是否全局开启下拉刷新。
"onReachBottomDistance": 50 页面上拉触底事件触发时距页面底部距离,单位为px。
},
"tarBar":{
“color”: //tab 上的文字默认颜色
“selectColor”: //tab 上的文字选中时的颜色
“backgroundColor” //tab 的背景色
”borderStyle“: //tabbar上边框的颜色, 仅支持 black
/ white
"position": //tabBar的位置,仅支持 bottom
/ top
“list": [ //tab 的列表,详见 list
属性说明,最少2个、最多5个 tab
{
”pagePath”: “page/index/index”, //页面路径,必须在 pages 中先定义
"text": "首页", //tab 上按钮文
"iconPath": //图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,不支持网络图片。当 postion
为 top
时,不显示 icon。
"selectedIconPath": //选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,不支持网络图片。当 postion
为 top
时,不显示 icon。
},
{
”pagePath”: “page/index/index”,
"text": "首页"
}
]
},
"networkTimeout": { //各类网络请求的超时时间,单位均为毫秒。
"request": 60000, //wx.request 的超时时间,单位毫秒。
"connectSocket": 60000, // wx.connectSocket 的超时时间,单位毫秒。
“uploadFile”: 60000, //wx.uploadFile 的超时时间,单位毫秒。
"downloadFile": 600000 //wx.downloadFile 的超时时间,单位毫秒。
},
"debug": true
// 避坑提示:pages里面,第一个是缺省启动页面,这个约定俗称,无法通过其他方法控制
// 避坑提示:在tarBar上没有涉及的页面,tarbar不显示。
}
//页面配置
{
"navigationBarBackgroundCo
lor":
"#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light",
"disableScroll":false //设置为 true
则页面整体不能上下滚动;只在页面配置中有效,无法在 app.json
中设置该项
"onReachBottomDistance": 50, 页面上拉触底事件触发时距页面底部距离,单位为px。
"enablePullDownRefresh": false, //是否全局开启下拉刷新
}
onPullDownRefresh()
监听用户下拉刷新事件。
-
- 需要在
app.json
的window
选项中或页面配置中开启enablePullDownRefresh
。 - 可以通过
wx.startPullDownRefresh
触发下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。 - 当处理完数据刷新后,
wx.stopPullDownRefresh
可以停止当前页面的下拉刷新。
- 需要在
onReachBottom()
监听用户上拉触底事件。
onPageScroll(Object)
监听用户滑动页面事件。
nShareAppMessage(Object)
监听用户点击页面内转发按钮(<button>
组件 open-type="share"
)或右上角菜单“转发”按钮的行为,并自定义转发内容。
注意:只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮