uniapp开发微信小程序教程（二）实现一个页面

已于 2022-11-03 16:38:33 修改
阅读量3.3k 收藏 21
点赞数 2
CC 4.0 BY-SA版权
分类专栏： 移动端开发 文章标签： 微信小程序 ui 小程序
于 2021-12-23 12:12:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43585799/article/details/122093178

文章目录


本文项目源码地址：https://gitee.com/caojianbang168/bi-demo.git

拿到需求原型并分析

原型如下所示：
在这里插入图片描述

一、设计页面结构：

小程序页面结构大体由3部分构成：顶部导航栏 + 内容区 + 底部导航栏。
我们要做的页面：顶部导航栏 + 内容区。
顶部导航栏从左到右包括：图标 + 返回按钮
内容区从上到下包括：时间选择组件 + tab切换组件 + 块状条形内容 + 分为三块的块状条形内容 + 饼图。

二、UI框架介绍及ColorUI

  1. UI是什么
    先来说下 UI，这俩字母是 User Interface 的缩写，一般翻译成“用户界面”。UI最主要的功能就是建立用户和系统后台之间的联系，系统后台通过 UI 把数据转换成可视化
最低0.47元/天 解锁文章

200万优质内容无限畅学
企业项目实训（二）uniapp页面设计
m0_57907070的博客
06-10 997
不管是使用vue框架还是使用uniapp框架进行开发，前端开发唯一不变的就是要保证开发出来的页面美观得体，本文会从以下几点介绍使用uniapp框架开发小程序页面的建议。
uni-app小程序开发实战 | (从零设计一款个人中心页面，最详细)
猫哥 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS，AIOT)
05-30 7346
个人中心页面很常用，几乎每个app里面都少不了。同时个人中心页也较简单，可以作为UI项目练手，熟悉常用UI界面的设计和flex布局。这里分享下一款简约的个人中心页面，并详细介绍从零的实现过程，分享给有需要的小伙伴，需要的可以收藏。
UniApp 从入门到实战：一套代码，搞定 App + 小程序 + H5！
最新发布
idree的博客
07-03 1048
UniApp是基于Vue.js的跨平台前端框架，只需一套代码即可发布到微信/支付宝等小程序、iOS/Android App及Web(H5)。主要优点包括多端适配、Vue语法支持、丰富插件和原生功能调用。 新手可使用HBuilderX工具创建项目，项目结构包含pages（页面）、components（组件）、static（静态资源）等目录。开发时通过pages.json配置路由，使用uni.request进行网络请求，uni.setStorageSync实现本地存储。
UNIAPP实战项目笔记39 我的页面布局
Ggome的博客
11-17 3629
common 公共文件：全局css文件 || 全局js文件。pages.json 配置文件： 导航、 tabbar、 路由。manifest.json 配置文件： appid、logo…App.vue 全局配置：样式、全局监视。static 静态资源：图片、字体图标。main.js vue初始化入口文件。具体图片自己替换哈，随便找了个图片的做示例。components 组件。my.vue 我的页面布局。
uniapp简单UI界面设计《登录界面 粉丝列表 我的好友 设置页面等》（附源码）
热门推荐
Hdhdi的博客
01-05 1万+
涉及Uniapp框架结构、UI图到界面标涉及Uniapp框架结构、UI图到界面标签元素的转换过程、标签Uniapp框架配置和Uniapp常见组件使用，熟练使用Uniapp常用API和Flex布局，熟练掌握页面跳转数据传参方法以及uniapp innerAudioContext接口调用和控制等Uniapp相关技术。
uni-app微信小程序——商城（6）——我的主页
徐小硕—心之所向，素履以往
08-18 1万+
本篇文章要介绍微信小程序商城最重要的内容——我的主页，“我的”这个页面内容包含了太多的东西，比如用户的个人信息，订单内容，地址管理，客服电话等等。所以它成为了整个功能模块中最为重要的部门，本篇文章将只会介绍页面的设计和功能模块的规划，其他内容将会在后续文章中一一介绍。 效果图如下所示： “我的”页面主要包括三个模块：个人积分及优惠券模块、订单内容模块、地址管理和客服联系等模块。三个模块基本包含了“我的”功能模块的基本内容，如果后续有具体的内容更新，还会在里面添加新的内容。 代码内容如下： &l
uniapp陪诊微信小程序 使用uniapp+vue3开发微信小程序代码示例
10-24
uniapp结合vue3开发陪诊微信小程序，不仅能够提升开发效率，缩短开发周期，还能够确保开发出的应用具有良好的跨平台兼容性，以及出色的用户体验。随着未来技术的不断进步和医疗陪诊服务的持续升级，此类小程序将拥有...
uniapp开发微信小程序-人脸采集功能
05-16
uniapp开发微信小程序-人脸采集功能
uniapp转微信小程序mqtt可用完整代码示例-解决整机调试网络不通问题
04-26
标题中的“uniapp转微信小程序mqtt可用完整代码示例”表明这是一个关于使用uniapp框架将应用转换为微信小程序，并且实现了MQTT（Message Queuing Telemetry Transport）通信功能的项目。MQTT是一种轻量级的发布/订阅...
UniApp 开发微信小程序教程（一）：准备工作和环境搭建，项目结构和配置
学IT，找陈寒
06-20 5058
通过本篇文章，你已经完成了 UniApp 开发环境的搭建，了解了项目的基本结构，并进行了初步的配置。在接下来的文章中，我们将深入探索页面设计、数据管理和接口调用等关键技术，帮助你一步步掌握 UniApp 微信小程序开发的核心技能。如果你有任何问题或建议，欢迎在评论区留言。让我们一起进入 UniApp 开发的精彩世界！😊🙏Java面试技巧Java面试八股文 - 掌握面试必备知识（目录篇）Java学习路线2023年完整版Java学习路线图AIGC人工智能。
基于uniapp微信小程序我的钱包页面
03-26
本教程将深入探讨如何使用uniapp来开发一个“我的钱包”页面，主要涉及以下几个关键知识点： 1. **uniapp环境搭建**：首先，你需要安装HBuilderX IDE，它是uniapp的官方开发工具。通过HBuilderX，你可以创建uniapp...
微信小程序---B站首页界面设计：附详细教程
12-11
微信小程序---B站首页界面设计：附详细教程 微信小程序---B站首页界面设计：附详细教程
uniapp简单UI界面设计《登录界面 音乐界面，粉丝列表 我的好友 设置页面等》全部源码
06-01
uniapp简单UI界面设计《音乐模块 播放界面 搜索模块 登录界面 音乐界面，粉丝列表 我的好友 设置页面等》全部源码资料详情如下： （1）音乐播放的基本控制需求 控制组件（包含六个部分）如下： ①随机播放/列表循环/单曲循环 ②上一首：播放上一首歌曲； ③播放：实现对歌曲的正常播放；暂停：停止当前播放的歌曲，而显示播放的图标； ④下一首：播放歌曲列表的下一首； ⑤歌曲列表：只要播放歌曲即可将歌曲添加至列表，添加成功则更新了歌曲列表； 删除歌曲：选中歌曲列表中的歌曲后，点击旁边的删除图标对所选歌曲进行删除或者点击右上方图标对整个列表歌曲进行删除操作； ⑥进度条：显示播放歌曲进度； ⑦时间栏：显示播放的时间； ⑧查看歌词：左滑即可查看。 （2）娱乐模块管理需求 ①搜索：在搜索框内输入回车命令，自动跳转，随机输出头像，并在搜索框下方输出生成的头像 （3）我的模块管理需求 ①登录界面②我的博客③粉丝列表：④实时热点⑤我的好友⑥设置 （4）搜索 ①搜索：在搜索框内输入要寻找的歌曲或歌手，点击搜索，会跳转到列表页面，点击你所需要的歌曲。
微信小程序首页设计
qq_48220231的博客
03-26 7708
微信小程序
【微信小程序】 清爽简约的主页界面（布局+配色方案）
m0_66653437的博客
04-14 3337
早就想出一个微信小程序入门引导了，但是又担心鄙人才疏学浅，造成错误引导……那篇文章拖了好久，写了大概4000字，迟迟没有发出来，还是需要很多时间去完善，需要我自己从头走一遍，才能更熟悉初学者会遇到的困难所在。。。对于没有前端开发经验的开发者来说，学习微信小程序开发可能需要花费一定的时间和精力。需要掌握一些前端开发技术，如HTML、CSS、JavaScript等，并了解小程序的开发规范和API。
前端开发之从零开始的uniapp(2):编写uni-app的第一个页面
m0_62217360的博客
02-27 1155
前端开发之从零开始的uniapp(2):编写uni-app的第一个页面
uniapp我的页面
weixin_73566800的博客
12-31 139
【代码】uniapp我的页面。
IT廉连看——Uniapp——页面样式与布局
weixin_72932310的博客
02-27 2650
​
uni-app实战之社区交友APP（9）我的页面开发
CUFEECR的博客
02-04 4089
个人中心页面需要配置导航栏标题、菜单按钮等；个人中心需要实现顶部个人信息栏、互动信息栏、广告位、浏览历史、社区认证和审核帖子，使用uni-list-item组件；设置页入口是个人中心页面。修改密码页面入口在设置页；需要验证后两次密码相同；修改邮箱页面入口也是设置页，需要验证邮箱格式。编辑资料页也使用uni-list-item实现；修改头像使用图片上传接口实现；修改昵称使用输入框，修改性别、情感和职业使用接口；修改生日使用picker组件；城市选择使用三级联动城市选择器。开发帮助反馈页面；开发关于页面。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值