AI 助理
备案控制台
开发者社区 云原生 文章 正文

【微信小程序开发小白零基础入门】微信小程序框架演示【建议收藏】

2022-05-25 270
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 微信小程序框架演示文章目录微信小程序框架演示一、容器属性1.flex-direction的用法2.flex-wrap的用法4.align-items的用法5.align-content的用法二、项目属性1.order的用法2.flex-shrink的用法3.flex-grow的用法4.flex-basis的用法5.flex-self的用法三、推荐小程序（欢迎各位大佬指导）一、容器属性1.flex-direction的用法flex-direction.wxml<view class='title'>1.flex-dir二、项目属性1.order的用法2.flex-shrink的用法3.flex-

微信小程序框架演示

文章目录

一、容器属性

1.flex-direction的用法

2.flex-wrap的用法

3.justify-content的用法

4.align-items的用法

5.align-content的用法

二、项目属性

1.order的用法

2.flex-shrink的用法

3.flex-grow的用法

4.flex-basis的用法

5.flex-self的用法

三、推荐小程序（欢迎各位大佬指导）

一、容器属性

1.flex-direction的用法

flex-direction.wxml


<view class='title'>1.flex-direction的用法</view>
<view class='myContainer'>
  <view class='demo'>云</view>
  <view class='demo'>慧</view>
  <view class='demo'>智</view>
</view>


flex-direction.wxss

.myContainer {
  margin: 80rpx auto;
  width: 600rpx;
  height: 500rpx;
  border: 1px solid silver;
  display: flex;
  flex-direction: column-reverse; /*自行更换成row-reverse, column,column-reverse试试*/
}
.demo {
  width: 100px;
  height: 100rpx;
  line-height: 100rpx;
  margin: 15rpx; 
  text-align: center;
  background-color: lightgreen;
}


983ac5d0c3ab4366a16b4c8476517bf6.png


2.flex-wrap的用法

flex-wrap.wxml

<view class='title'>2.flex-wrap的用法</view>
<view class='myContainer'>
  <view class='demo'>工</view>
  <view class='demo'>具</view>
  <view class='demo'>箱</view>
</view>


flex-wrap.wxss

.myContainer {
  margin: 80rpx auto;
  width: 600rpx;
  height: 500rpx;
  border: 1px solid silver;
  display: flex;
  flex-direction: row; 
  flex-wrap:wrap;/*自行更换成nowrap, wrap-reverse试试*/
}
.demo {
  width: 100px;
  height: 100rpx;
  line-height: 100rpx;
  margin: 15rpx; 
  text-align: center;
  background-color: lightgreen;
}


c5ec6861a26644c5a83e2bd996315084.png


3.justify-content的用法

justify-content.wxml

<view class='title'>3.justify-content的用法</view>
<view class='myContainer'>
  <view class='demo'>智</view>
  <view class='demo'>慧</view>
  <view class='demo'>云</view>
</view>


justify-content.wxss

.myContainer {
  margin: 80rpx auto;
  width: 600rpx;
  height: 500rpx;
  border: 1px solid silver;
  display: flex;
  flex-direction: row;
  justify-content: flex-start; /*换成 flex-end| center| space-between| space-around| space-evenly 试试*/
}
.demo {
  width: 50px;
  height: 100rpx;
  line-height: 100rpx;
  border: 1px solid;
  text-align: center;
  background-color: lightgreen;
}


06f3d2e9250141c2aadb4d0b164acd95.png


4.align-items的用法

align-items.wxml

<view class='title'>4.align-items的用法</view>
<view class='myContainer'>
  <view class='demo z'>智</view>
  <view class='demo h'>慧</view>
  <view class='demo y'>云</view>
</view>


align-items.wxss

.myContainer {
  margin: 80rpx auto;
  width: 600rpx;
  height: 500rpx;
  border: 1px solid silver;
  display: flex;
  flex-direction: row; 
  align-items: flex-start;/*自行更换成stretch（默认值）| flex-start | center | flex-end | baseline试试*/
}
.demo {
  height: 100rpx;
  line-height: 100rpx;
  border: 1px solid;
  text-align: center;
  background-color: lightgreen;
}
/*如果align-items取值为stretch，请注释掉以下全部代码*/
.z{
  width: 200rpx;
}
.h{
  width: 300rpx;
}
.y{
  width: 400rpx;
}


4985005f049c4f2491fc6a08ec97a6f6.png


5.align-content的用法

align-content.wxml

<view class='title'>5.align-content的用法</view>
<view class='myContainer'>
  <view class='demo z'>智</view>
  <view class='demo h'>慧</view>
  <view class='demo y'>云</view>
  <view class='demo g'>工</view>
  <view class='demo j'>具</view>
  <view class='demo x'>箱</view>
</view>


align-content.wxss

.myContainer {
  margin: 80rpx auto;
  width: 600rpx;
  height: 500rpx;
  border: 1px solid silver;
  display: flex;
  flex-direction: row; 
  flex-wrap: wrap;
  align-content: flex-start;/*自行更换成stretch（默认值） | flex-start | center | flex-end | space-between |space-around | space-evenly试试*/
}
.demo {
  height: 100rpx;/*如果align-items取值为stretch，请注释掉关于height的代码*/
  line-height: 100rpx;
  border: 1px solid;
  text-align: center;
  background-color: lightgreen;
}
.z{
  width: 200rpx;
}
.h{
  width: 300rpx;
}
.y{
  width: 400rpx;
}
.g{
  width: 200rpx;
}
.j{
  width: 300rpx;
}
.x{
  width: 400rpx;
}




eca242e511a34c3e92dca6302b2e8aa3.png


二、项目属性

1.order的用法

order.wxml

<view class='title'>1.order的用法</view>
<view class='myContainer'>
  <view class='demo z'>智</view>
  <view class='demo h'>慧</view>
  <view class='demo y'>云</view>
</view>


order.wxss

.myContainer {
  margin: 80rpx auto;
  width: 600rpx;
  height: 500rpx;
  border: 1px solid silver;
  display: flex;
  flex-direction: row; 
  flex-wrap:wrap;/*自行更换成nowrap, wrap-reverse试试*/
}
.demo {
  width: 50px;
  height: 100rpx;
  line-height: 100rpx;
  margin: 15rpx; 
  text-align: center;
  background-color: lightgreen;
}
.z{
  order: 6;
}
.h{
  order: -1;
}
.y{
  order: 2
}


28536481fcb9410388921910a1c34da3.png


2.flex-shrink的用法

flex-shrink.wxml

<view class='title'>2.flex-shrink的用法</view>
<view class='myContainer'>
  <view class='demo z'>智</view>
  <view class='demo h'>慧</view>
  <view class='demo y'>云</view>
  <view class='demo g'>工</view>
  <view class='demo j'>具</view>
  <view class='demo x'>箱</view>
</view>


flex-shrink.wxss

.myContainer {
  margin: 80rpx auto;
  width: 500rpx;
  height: 500rpx;
  border: 1px solid silver;
  display: flex;
  flex-direction: row; 
}
.demo {
  height: 100rpx;
  line-height: 100rpx;
  border: 1px solid;
  text-align: center;
  background-color: lightgreen;
}
.z{
  width: 200rpx;
  flex: 1;
}
.h{
  width: 200rpx;
  flex: 2;
}
.y{
  width: 200rpx;
  flex: 3;
}
.g{
  width: 200rpx;
  flex: 1;
}
.j{
  width: 200rpx;
  flex: 2;
}
.x{
  width: 200rpx;
  flex: 3;
}


390cf69569cd4d2094ba1705af7489ef.png


3.flex-grow的用法

flex-grow.wxml

<view class='title'>3.flex-grow的用法</view>
<view class='myContainer'>
  <view class='demo z'>智</view>
  <view class='demo h'>慧</view>
  <view class='demo y'>云</view>
</view>


flex-grow.wxss

.myContainer {
  margin: 80rpx auto;
  width: 600rpx;
  height: 500rpx;
  border: 1px solid silver;
  display: flex;
  flex-direction: row; 
}
.demo {
  height: 100rpx;
  line-height: 100rpx;
  border: 1px solid;
  text-align: center;
  background-color: lightgreen;
}
.z{
  width: 100rpx;
  flex-grow: 0;
}
.h{
  width: 100rpx;
  flex-grow: 1;
}
.y{
  width: 100rpx;
  flex-grow: 2;
}


092836c750f14938add97ea13234f233.png


4.flex-basis的用法

flex-basis.wxml

<view class='title'>4.flex-basis的用法</view>
<view class='myContainer'>
  <view class='demo g'>工</view>
  <view class='demo j'>具</view>
  <view class='demo x'>箱</view>
</view>


flex-basis.wxss

.myContainer {
  margin: 80rpx auto;
  width: 600rpx;
  height: 500rpx;
  border: 1px solid silver;
  display: flex;
  flex-direction: row; 
}
.demo {
  height: 100rpx;
  line-height: 100rpx;
  border: 1px solid;
  text-align: center;
  background-color: lightgreen;
}
.g{
  width: 100rpx;
  flex-grow: 0;
}
.j{
  width: 100rpx;
  flex-grow: 1;
}
.x{
  width: 100rpx;
  flex-grow: 2;
}

5a40c287e58440d3ba839740cf5f0682.png


5.flex-self的用法

flex-self.wxml
<view class='title'>5.align-self的用法</view>
<view class='myContainer'>
  <view class='demo y'>云</view>
  <view class='demo g'>工</view>
  <view class='demo j'>具</view>
  <view class='demo x'>箱</view>
</view>


flex-self.wxss

.myContainer {
  margin: 80rpx auto;
  width: 500rpx;
  height: 500rpx;
  border: 1px solid silver;
  display: flex;
  flex-direction: row;
}
.demo {
  width: 100rpx;
  line-height: 100rpx;
  margin: 15rpx;
  text-align: center;
  background-color: lightgreen;
}
.y {
  height: 100rpx;
  align-self: flex-start;
}
.g {
  height: 100rpx;
  align-self: center;
}
.j {
  height: 100rpx;
  align-self: flex-end;
}
.x {
  align-self: stretch;
}

5ce2b05ef3f14f23b46da5ea9583efd7.png

三、推荐小程序（欢迎各位大佬指导）

文章标签：
容器
小程序
关键词：
小程序微信
微信开发
微信框架
微信小程序
微信小程序开发
游客5yjykjssz3skc
目录
相关文章
卓伊凡
|
5月前
|
小程序 前端开发 Android开发
小程序微信分享功能如何开发？开放平台已绑定仍不能使用的问题？-优雅草卓伊凡
小程序微信分享功能如何开发？开放平台已绑定仍不能使用的问题？-优雅草卓伊凡
卓伊凡
1173 29
小程序微信分享功能如何开发？开放平台已绑定仍不能使用的问题？-优雅草卓伊凡
多客LIJIE
|
6月前
|
监控 前端开发 小程序
陪练,代练,护航,代打小程序源码/前端UNIAPP-VUE2.0开发 后端Thinkphp6管理/具备家政服务的综合型平台
这款APP通过技术创新，将代练、家政、娱乐社交等场景融合，打造“全能型生活服务生态圈”。以代练为切入点，提供模块化代码支持快速搭建平台，结合智能匹配与技能审核机制，拓展家政服务和商业管理功能。技术架构具备高安全性和扩展性，支持多业务复用，如押金冻结、录屏监控等功能跨领域应用。商业模式多元，包括交易抽成、增值服务及广告联名，同时设计跨领域积分体系提升用户粘性，实现生态共生与B端赋能。
多客LIJIE
545 12
开心工作室V(kaic_kaic)
|
6月前
|
小程序 Java 关系型数据库
weixin163基于微信小程序的校园二手交易平台系统设计与开发ssm(文档+源码)_kaic
本文介绍了一款基于微信小程序的校园二手物品交易平台的开发与实现。该平台采用Java语言开发服务端，使用MySQL数据库进行数据存储，前端以微信小程序为载体，支持管理员和学生两种角色操作。管理员可管理用户、商品分类及信息、交易记录等，而学生则能注册登录、发布购买商品、参与交流论坛等。系统设计注重交互性和安全性，通过SSM框架优化开发流程，确保高效稳定运行，满足用户便捷交易的需求，推动校园资源共享与循环利用。
开心工作室V(kaic_kaic)
482 12
赣州云智科技的技术铺子
|
6月前
|
人工智能 开发框架 小程序
工会成立100周年纪念，开发职工健身AI运动小程序、APP方案推荐
为庆祝中华全国总工会成立100周年，特推出基于AI技术的智能健身系统，以小程序和APP形式呈现，助力职工健康生活。方案包括：1) 小程序插件，支持多种运动识别，开箱即用；2) APP插件，提供更高精度的运动检测；3) 成熟的「AI乐运动」系统，支持赛事活动管理。这些方案满足不同需求，推动全民健身体验升级，彰显工会对职工健康的关怀。
赣州云智科技的技术铺子
210 3
游客4v3gpgavlizks
|
1月前
|
消息中间件 人工智能 Java
抖音微信爆款小游戏大全：免费休闲/竞技/益智/PHP+Java全筏开源开发
本文基于2025年最新行业数据，深入解析抖音/微信爆款小游戏的开发逻辑，重点讲解PHP+Java双引擎架构实战，涵盖技术选型、架构设计、性能优化与开源生态，提供完整开源工具链，助力开发者从理论到落地打造高留存、高并发的小游戏产品。
游客4v3gpgavlizks
290 1
白雾茫茫丶
|
2月前
|
小程序 JavaScript API
uni-halo + 微信小程序开发实录：我的第一个作品诞生记
这篇文章介绍了使用uni-halo框架进行微信小程序开发的过程，包括选择该框架的原因、开发目标以及项目配置和部署的步骤。
白雾茫茫丶
111 0
uni-halo + 微信小程序开发实录：我的第一个作品诞生记
爱专研的技术土狗
|
8月前
|
自然语言处理 搜索推荐 小程序
微信公众号接口：解锁公众号开发的无限可能
微信公众号接口是微信官方提供的API，支持开发者通过编程与公众号交互，实现自动回复、消息管理、用户管理和数据分析等功能。本文深入探讨接口的定义、类型、优势及应用场景，如智能客服、内容分发、电商闭环等，并介绍开发流程和工具，帮助运营者提升用户体验和效率。未来，随着微信生态的发展，公众号接口将带来更多机遇，如小程序融合、AI应用等。
爱专研的技术土狗
942 1
游客vx6uejvd6s6ck
|
4月前
|
监控 数据可视化 数据处理
微信养号脚本，全自动插件，AUTOJS开发版
这是一套自动化微信养号工具，包含主脚本`wechat_auto.js`与配置文件`config.json`。主脚本实现自动浏览朋友圈、随机阅读订阅号文章及搜索指定公众号三大功能，支持自定义滚动次数、阅读时长等参数。代码通过随机化操作间隔模拟真实用户行为，具备完善的错误处理和日志记录功能。配套UI模块提供可视化操作界面，可实时监控任务状态与运行日志，便于调整参数设置。控制器部分扩展了批量数据处理能力，如学生信息的增删改查操作，适用于多场景应用。下载地址：https://www.pan38.com/share.php?code=n6cPZ 提取码：8888（仅供学习参考）。
游客vx6uejvd6s6ck
194 0
邹荣乐
|
12月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
邹荣乐
2628 7
蚝油菜花
|
8月前
|
人工智能 开发框架 机器人
AstrBot：轻松将大模型接入QQ、微信等消息平台，打造多功能AI聊天机器人的开发框架，附详细教程
AstrBot 是一个开源的多平台聊天机器人及开发框架，支持多种大语言模型和消息平台，具备多轮对话、语音转文字等功能。
蚝油菜花
4614 38
AstrBot：轻松将大模型接入QQ、微信等消息平台，打造多功能AI聊天机器人的开发框架，附详细教程

热门文章

最新文章

  • 1
    市面上的小程序平台对比
  • 2
    市面上小程序平台的跨平台框架有哪些优缺点？
  • 3
    基于springboot的考研互助小程序
  • 4
    小程序跨平台框架未来的发展趋势是什么？
  • 5
    行业里面最烦的一句话：“做个小程序大概多少钱？”-优雅草卓伊凡
  • 6
    引入小程序平台对app有啥好处
  • 7
    app 引入小程序平台后有哪些优点
  • 8
    热门小程序源码合集：微信抖音小程序源码支持PHP/Java/uni-app完整项目实践指南
  • 9
    一键搞定本土认证难题，AnalyticDB版Supabase助力AI应用实现支付宝&微信登录
  • 10
    抖音微信爆款小游戏大全：免费休闲/竞技/益智/PHP+Java全筏开源开发
  • 1
    weixin163基于微信小程序的校园二手交易平台系统设计与开发ssm(文档+源码)_kaic
    482
  • 2
    weixin168“返家乡”高校暑期社会实践微信小程序设计与开发ssm(文档+源码)_kaic
    174
  • 3
    weixin116大学生就业平台微信小程序+ssm(文档+源码)_kaic
    287
  • 4
    微信小程序开发全流程：从注册到上线的完整指南
    2444
  • 5
    技术小白如何利用DeepSeek半小时开发微信小程序？
    2053
  • 6
    微信小程序数据绑定与事件处理：打造动态交互体验
    284
  • 7
    微信小程序页面导航与路由：实现多页面跳转与数据传递
    687
  • 8
    微信小程序网络请求与API调用：实现数据交互
    767
  • 9
    微信小程序组件封装与复用：提升开发效率
    380
  • 10
    微信小程序数据缓存与本地存储：优化用户体验
    1321

    • 相关课程

    更多
  • IoT小程序框架课程

    • 相关电子书

    更多
  • 阿里云产业赋能： 多端小程序 SaaS 平台的突围之路
  • 钉钉小程序——为工作方式插上翅膀
  • 阿里小程序繁星计划-高德小程序
    • 下一篇
    阿里云无影云电脑免费使用_免费申请教程