微信小程序简单页面开发案例

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