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

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

一、新建小程序

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

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

 会发现报错：

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

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

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

二、组件

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

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

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

yunlord
yunlord13
  

其中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代码：

yunlord
yunlord13
  示例
Yunlord的介绍2021-10-231200人感兴趣

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+微信小程序开发』系列，本文是该系列第三篇，持续更新中。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！