1.组件照片组合
<view>示例一</view>
<view class="menu">
<view class="item">
<text>精品</text>
<image src="/.../.../xxx.jpg"></image>
</view>
<view class="item">
<text>精品</text>
<image src="/.../.../xxx.jpg"></image>
</view>
<view class="item">
<text>精品</text>
<image src="/.../.../xxx.jpg"></image>
</view><view class="item">
<text>精品</text>
<image src="/.../.../xxx.jpg"></image>
</view>
</view>
<view>示例二</view>
<view class="action">
<view class="item">
<view class="title">第一场拍卖吃的东西</view>
<view class="tips">
<view class="status">2020-01-01</view>
<view class="count">111观围</view>
</view>
<view class="big">
<image src="/../xxx.jpg"></image>
</view>
<view class="small">
<image src="/../xxx.jpg"></image>
<image src="/../xxx.jpg"></image>
<image src="/../xxx.jpg"></image>
<image src="/../xxx.jpg"></image>
<image src="/../xxx.jpg"></image>
</view>
</view>
</view>
-
flex布局
/*示例一样式*/ image{ width:100rpx; height:100rpx border-radius:50rpx; } .menu{ display:flex; /*在水平方向排列 row规定主轴的方向为水平*/ flex-direction:row; /*在水平方向排列 在主轴方向如何让排列center space-around space-between flex-start*/ justify-content:center;//居中 /*在副轴方向如何让排列* flex-begin flex-end*/ align-items:center; } .menu .item{ display:flex; flex-direction:column; } /*示例二样式*/ .ation .item .title{ font-size:50rpx; font-weight:600; } .ation .item .tips{ display:flex; flex-direction:row; justify-content:space-between;//居中 font-size:30rpx; color:pink; } .ation .item .big{ height:400rpx; overflow:hidden; } .ation .item .big image{ width:100%; heigit:100%; } .ation .item .small{ display:flex; justify-content:flax-start;//居中 } .ation .item .small image{ height:100rpx; width:100rpx; padding-right:20rpx; }
-
一种常用方便的布局方式
2.小程序里边特殊的样式
- px
- rpx 自适应排列 宽度:750rpx
3.实战页面
- 首页
- 拍卖页面
- 消息页面
- 个人页面
- 不需要写二级页面只需要写一级页面
4.tabBar导航
{
"pages": ["pages/index/index", "pages/logs/index"],
"window": {
"navigationBarTitleText": "Demo"
},
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/logs/logs",
"text": "日志"
}
]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": true,
}
5.全局配置
{
"window": {
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
}
属性 | 类型 | 必填 | 描述 | 最低版本 |
---|---|---|---|---|
entryPagePath | string | 否 | 小程序默认启动首页 | |
pages | string[] | 是 | 页面路径列表 | |
window | Object | 否 | 全局的默认窗口表现 | |
tabBar | Object | 否 | 底部 tab 栏的表现 | |
networkTimeout | Object | 否 | 网络超时时间 | |
debug | boolean | 否 | 是否开启 debug 模式,默认关闭 | |
functionalPages | boolean | 否 | 是否启用插件功能页,默认关闭 | 2.1.0 |
subpackages | Object[] | 否 | 分包结构配置 | 1.7.3 |
workers | string | 否 | Worker 代码放置的目录 | 1.9.90 |
requiredBackgroundModes | string[] | 否 | 需要在后台使用的能力,如「音乐播放」 | |
plugins | Object | 否 | 使用到的插件 | 1.9.6 |
preloadRule | Object | 否 | 分包预下载规则 | 2.3.0 |
resizable | boolean | 否 | PC 小程序是否支持用户任意改变窗口大小(包括最大化窗口);iPad 小程序是否支持屏幕旋转。默认关闭 | 2.3.0 |
usingComponents | Object | 否 | 全局自定义组件配置 | 开发者工具 1.02.1810190 |
permission | Object | 否 | 小程序接口权限相关设置 | 微信客户端 7.0.0 |
sitemapLocation | string | 是 | 指明 sitemap.json 的位置 | |
style | string | 否 | 指定使用升级后的weui样式 | 2.8.0 |
useExtendedLib | Object | 否 | 指定需要引用的扩展库 | 2.2.1 |
entranceDeclare | Object | 否 | 微信消息用小程序打开 | 微信客户端7.0.9 |
darkmode | boolean | 否 | 小程序支持 DarkMode | 2.11.0 |
themeLocation | string | 否 | 指明 theme.json 的位置,darkmode为true为必填 | 开发者工具 1.03.2004271 |
lazyCodeLoading | string | 否 | 配置自定义组件代码按需注入 | 2.11.1 |
singlePage | Object | 否 | 单页模式相关配置 | 2.12.0 |
- 全局配置 网址:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
- tabBer网址:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar