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 相关文章推荐
chrome原生方法之数组
Nov 30 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
Dec 28 Javascript
捕获键盘事件(且兼容各浏览器)
Jul 03 Javascript
浅析javascript中的DOM
Mar 01 Javascript
基于jquery实现省市联动效果
Nov 23 Javascript
jQuery 限制输入字符串长度
Jun 20 Javascript
ReactNative实现图片上传功能的示例代码
Jul 11 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
Spring Boot/VUE中路由传递参数的实现代码
Mar 02 Javascript
vue点击页面空白处实现保存功能
Nov 06 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
Mar 03 Javascript
利用JavaScript为句子加标题的3种方法示例
Jan 05 Javascript
JS新手入门数组处理的实用方法汇总
Apr 07 #Javascript
vue backtop组件的实现完整代码
一文帮你理解PReact10.5.13源码
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
给原生html中添加水印遮罩层的实现示例
html实现随机点名器的示例代码
如何利用JavaScript实现二叉搜索树
You might like
PHP XML操作类DOMDocument
2009/12/16 PHP
PHPMYADMIN导入数据最大为2M的解决方法
2012/04/23 PHP
php使用正则过滤js脚本代码实例
2014/05/10 PHP
Yii2增删改查之查询 where参数详细介绍
2016/08/08 PHP
PHP simplexml_load_string()函数实例讲解
2019/02/03 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
基于jQuery的Tab选项框效果代码(插件)
2011/03/01 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
2014/06/23 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
2014/06/23 Javascript
JavaScript中property和attribute的区别详细介绍
2015/03/03 Javascript
javascript判断网页是关闭还是刷新
2015/09/12 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
2016/08/31 Javascript
结合mint-ui移动端下拉加载实践方法总结
2017/11/08 Javascript
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
vue-router 路由传参用法实例分析
2020/03/06 Javascript
[41:13]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第一场 11.20
2020/11/20 DOTA
python cookielib 登录人人网的实现代码
2012/12/19 Python
在Django的session中使用User对象的方法
2015/07/23 Python
Python 70行代码实现简单算式计算器解析
2019/08/30 Python
python使用pip安装SciPy、SymPy、matplotlib教程
2019/11/20 Python
python判断一个变量是否已经设置的方法
2020/08/13 Python
Python从MySQL数据库中面抽取试题,生成试卷
2021/01/14 Python
虚拟环境及venv和virtualenv的区别说明
2021/02/05 Python
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
实习生自我评价
2014/01/18 职场文书
房产公证书范本
2014/04/10 职场文书
给市场的环保建议书
2014/05/14 职场文书
团日活动总结报告
2014/06/25 职场文书
银行竞聘报告范文
2014/11/06 职场文书
朋友聚会开场白
2015/06/01 职场文书
Vue3 Composition API的使用简介
2021/03/29 Vue.js
golang 实现菜单树的生成方式
2021/04/28 Golang
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android
springboot如何接收application/x-www-form-urlencoded类型的请求
2021/11/02 Java/Android
Python Pandas解析读写 CSV 文件
2022/04/11 Python