Python+微信小程序开发（三）开发小程序及页面布局

上一篇已经基本介绍完小程序的整体布局以及设计思路，所以本篇开始介绍如何搭建一个简单的小程序。

一、新建小程序

首先我们通过模板新建一个小程序。

然后将文件夹下所有文件删除。

 会发现报错：

于是新建app.json，并根据提示逐步完善内容。

新建两个文件夹：pages/index，并点击新建page。

 这时候一个什么内容都没有但是能够运行的小程序就新建好了！

二、组件

接下来自定义下里面的布局，简单介绍下组件，基本上说掌握了以下组件就可以做出市面上百分之八十的小程序。

• text 编写文本信息，类似于span标签
• view 容器，类似于div标签
• image 图片

我们在index.wxml中写入相应组件，新建了static文件夹，里面存放图片，并加载本地图片。

<text>yunlord</text>
<view class="c1">yunlord13</view>
<image src="/static/profile.png">  </image>

其中class是设置样式，我们在index.wxss中定义"c1"的样式。

.c1{
    color: blue;
}

效果如下所示

三、全局配置

我们可以在app.json里面进行全局设置，查看小程序全局配置文档。

可以看到里面有许多配置项，简单的试验几个效果。

{
    "pages": [
        "pages/index/index",
        "pages/home/home"
    ],
    "window":{
        "navigationBarBackgroundColor": "#FFDAB9",
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "Yunlord"
    },
    "tabBar": {
        "selectedColor":"#CD5C5C",
        "list": [
        {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tabbar/ic_menu_choice_nor.png",
        "selectedIconPath": "static/tabbar/ic_menu_choice_pressed.png"
        },
        {
        "pagePath": "pages/home/home",
        "text": "我的",
        "iconPath": "static/tabbar/ic_menu_me_nor.png",
        "selectedIconPath": "static/tabbar/ic_menu_me_pressed.png"
        }
        ]
    }
}

效果如下： 

四、flex布局

1.基本概念

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

2.基本样式 

• display: flex; flex布局
• flex-direction: row; 规定主轴的方向：row/column
• justify-content: space-around; 元素在主轴方向上的排列方式:flex-start/flexend/space-around/space-between
• align-items: center; 元素在副轴方向上的排列方式:flex-start/flexend/space-around/space-between

3.实际效果

index.wxml代码：

<!--pages/index/index.wxml-->
<text>yunlord</text>
<view class="c1">yunlord13</view>
<image src="/static/profile.png">  </image>

<view>示例</view>
<view class='introduce'>
    <view class='item'>
        <view class='title'>Yunlord的介绍</view>
        <view class='tips'>
            <view class='status'>2021-10-23</view>
            <view class='count'>1200人感兴趣</view>
        </view>
        <view class="big">
            <image src="/static/profile.png"></image>
        </view>
        
        <view class="small">
            <image src="/static/profile.png"></image>
            <image src="/static/profile.png"></image>
            <image src="/static/profile.png"></image>
            <image src="/static/profile.png"></image>

        </view>
    </view>
</view>

index.wxss代码： 

/* pages/index/index.wxss */

.c1{
    color:blue;
}

.introduce .item .title{
    font-size: 80rpx;
    font-weight: 600;
}

.introduce .item .tips{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 30rpx;
    color: gray;
}

.introduce .item .big{
    height: 600rpx;
    overflow: hidden;
}

/* .introduce .item .big image{
    width: 100%;
    height: 100%;
} */

.introduce .item .small{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.introduce .item .small image{
    height: 150rpx;
    width: 150rpx;
    padding: 20rpx;
}

 效果如下：

四、预览 

接下来就是预览效果，但是点击上方预览会提示这个错误。 

所以我们新建一个app.js，就解决了，最后生成一个二维码，扫描二维码就能在手机上看看自己做的小程序效果如何。

欢迎关注『从零开始Python+微信小程序开发』系列，本文是该系列第三篇，持续更新中。