大家好,今天我们要解答,下载完python之后还要下载什么文件 下载完python之后还要下载什么软件,现在让我们一起来看看吧!
这篇文章主要介绍了怎么用python写小程序,具有一定借鉴价值,需要的朋友可以参考下PHP与Python:哪个更快上手?。希望大家阅读完这篇文章后大有收获,下面让小编带着大家一起了解一下。
上一篇已经基本介绍完小程序的整体布局以及设计思路,所以本篇开始介绍如何搭建一个简单的小程序。
一、新建小程序
首先我们通过模板新建一个小程序python做简单笑脸。
然后将文件夹下所有文件删除。
会发现报错:
于是新建,并根据提示逐步完善内容。
新建两个文件夹:pages/index,并点击新建page。
这时候一个什么内容都没有但是能够运行的小程序就新建好了!
二、组件
接下来自定义下里面的布局,简单介绍下组件,基本上说掌握了以下组件就可以做出市面上百分之八十的小程序。
text 编写文本信息,类似于span标签view 容器,类似于div标签image 图片
我们在中写入相应组件,新建了static文件夹,里面存放图片,并加载本地图片。
<text>yunlord</text>
<view class="c1">yunlord13</view>
<image src=""> </image>
其中class是设置样式,我们在中定义"c1"的样式。
.c1{
color: blue;
}
效果如下所示
三、全局配置
我们可以在里面进行全局设置,查看小程序全局配置文档。
可以看到里面有许多配置项,简单的试验几个效果。
{
"pages": [
"pages/index/index",
"pages/home/home"
],
"window":{
"navigationBarBackgroundColor": "#FFDAB9",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "Yunlord"
},
"tabBar": {
"selectedColor":"#CD5C5C",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "",
"selectedIconPath": ""
},
{
"pagePath": "pages/home/home",
"text": "我的",
"iconPath": "",
"selectedIconPath": ""
}
]
}
}
效果如下:
四、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/columnjustify-content: space-around; 元素在主轴方向上的排列方式:flex-start/flexend/space-around/space-betweenalign-items: center; 元素在副轴方向上的排列方式:flex-start/flexend/space-around/space-between
3.实际效果
代码:
<!-->
<text>yunlord</text>
<view class="c1">yunlord13</view>
<image src=""> </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=""></image>
</view>
<view class="small">
<image src=""></image>
<image src=""></image>
<image src=""></image>
<image src=""></image>
</view>
</view>
</view>
代码:
/* */
.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;
}
效果如下:
四、预览
接下来就是预览效果,但是点击上方预览会提示这个错误。
所以我们新建一个,就解决了,最后生成一个二维码,小狗二维码就能在手机上看看自己做的小程序效果如何。
欢迎关注『从零开始Python+微信小程序开发』系列,本文是该系列第三篇,持续更新中。
原文地址1:https://blog.csdn.net/2401_82891133/article/details/136431649
参考资料:python中用turtle画一个圆形 https://blog.csdn.net/SXIAOYAN_/article/details/140061099