uniapp开发小程序的经验总结


Posted in Javascript onApril 08, 2021

1. 新建UI项目

首先,我们的UI是基于ColorUI,当ColorUI没有的样式,就基于Uniapp自带的UI。所以项目的开始要引入这两个UI框架。
如下,新建一个uni-ui项目。

uniapp开发小程序的经验总结

再建立一个ColorUI项目。

uniapp开发小程序的经验总结

如果需要观看ColorUI的效果以便直到自己需要用哪些组件,可以将其运行起来,如下。

uniapp开发小程序的经验总结

uni-ui同理。这样只要我们需要的样式都可以在这两个UI取材了。

2. 搭建自己的项目

新建一个自己的uniapp项目,建立完成后。项目结构如下。

uniapp开发小程序的经验总结

接着先引入ColorUI样式:

  • 将ColorUI项目下的colorui目录,拷贝到自己项目的根目录下。
  • 在自己项目根目录的App.vue文件下引入两个css文件,如下
<style>
	/*每个页面公共css */
	@import "colorui/main.css";
	@import "colorui/icon.css";

</style>
  • 需要哪个样式,可以到ColorUI项目下审查元素,拷贝对应的class即可。

如果自己想要的样式ColorUI没有,则需要引入uni-ui的样式:

  • 将uni-ui项目根目录下的common复制到自己项目的根目录
  • 在App.vue目录中引入css文件

最后App.vue类似:

<style>
	/*每个页面公共css */
	@import "colorui/main.css";
	@import "colorui/icon.css";
	@import url("common/uni.css");
</style>

自此,UI项目导入完成

3. 一些基础工作

使用tabbar:可以到uniapp官网找到tabbar部分拷贝过来使用。

uniapp开发小程序的经验总结

页面跳转、发起请求:到uniapp官网看看,使用uniapp的组件即可

如果一个页面太复杂,建议分成多个组件。在该页面目录下新建一个compoment目录,在compoment目录下新建多个组件(vue文件),如下图所示:

uniapp开发小程序的经验总结

引入组件:如下图所示在需要用到的地方引入组件,甚至还可以传值。

uniapp开发小程序的经验总结

4. 页面布局

这里讲一些页面布局的实用建议。

  • 元素是从上到下,独占一行的,使用标准流div布局即可
  • 如果元素是需要在一行中排列,则需要浮动float布局。但浮动布局不能精确将元素布局在容器中指定位置,所以需要定位position布局。但是这种方式需要脱离了文档流,需要各种clear清除浮动,这种方式落后了。建议使用flex布局
  • 综上,从上到下布局使用div,从左到右布局使用float和position。或者使用flex
  • 使用flex的好处很多,可以在左右布局中justify-content将元素布局到指定的位置。因此流行使用该布局。

总结

到此这篇关于uniapp开发小程序结的文章就介绍到这了,更多相关uniapp开发小程序内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
基于Jquery的将DropDownlist的选中值赋给label的实现代码
May 06 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
Dec 12 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
Feb 05 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
Dec 07 Javascript
JS通过Cookie判断页面是否为首次打开
Feb 05 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
Apr 12 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
May 05 Javascript
详解用vue.js和laravel实现微信授权登陆
Jun 23 Javascript
35个最好用的Vue开源库(史上最全)
Jan 03 Javascript
react结合bootstrap实现评论功能
May 30 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
Sep 21 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
JS新手入门数组处理的实用方法汇总
Apr 07 #Javascript
vue backtop组件的实现完整代码
一文帮你理解PReact10.5.13源码
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
给原生html中添加水印遮罩层的实现示例
html实现随机点名器的示例代码
如何利用JavaScript实现二叉搜索树
You might like
DC动画很好看?新作烂得令人发指,名叫《红色之子》
2020/04/09 欧美动漫
解析php中如何直接执行SHELL
2013/06/28 PHP
PHP统计二维数组元素个数的方法
2013/11/12 PHP
php对数组排序代码分享
2014/02/24 PHP
Extjs学习笔记之九 数据模型(上)
2010/01/11 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
2015/05/01 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
2018/05/02 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
2018/09/16 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
如何实现一个简易版的vuex持久化工具
2019/09/11 Javascript
解析vue、angular深度作用选择器
2019/09/11 Javascript
vue elementui tree 任意级别拖拽功能代码
2020/08/31 Javascript
[03:02]2014DOTA2西雅图邀请赛 让队员自己告诉你DK NAVI备战情况
2014/07/08 DOTA
[27:08]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第二场 11.21
2020/11/23 DOTA
天翼开放平台免费短信验证码接口使用实例
2013/12/18 Python
python使用post提交数据到远程url的方法
2015/04/29 Python
Python实现栈的方法
2015/05/26 Python
Python实现的简单hangman游戏实例
2015/06/28 Python
详解 Python 与文件对象共事的实例
2017/09/11 Python
python 实现对数据集的归一化的方法(0-1之间)
2018/07/17 Python
基于Python数据分析之pandas统计分析
2020/03/03 Python
python 等差数列末项计算方式
2020/05/03 Python
Python docutils文档编译过程方法解析
2020/06/23 Python
python使用smtplib模块发送邮件
2020/12/17 Python
40岁生日感言
2014/02/15 职场文书
商业融资计划书
2014/04/29 职场文书
娱乐节目策划方案
2014/06/10 职场文书
药剂专业毕业生求职信
2014/06/24 职场文书
解除租房协议书
2014/12/03 职场文书
读鲁迅先生的经典名言
2019/08/20 职场文书
2019年世界儿童日宣传标语
2019/11/22 职场文书
Vue实现下拉加载更多
2021/05/09 Vue.js
python析构函数用法及注意事项
2021/06/22 Python
Flask response响应的具体使用
2021/07/15 Python
分析SQL窗口函数之排名窗口函数
2022/04/21 Oracle
在windows server 2012 r2中安装mysql的详细步骤
2022/07/23 Servers