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 相关文章推荐
推荐dojo学习笔记
Mar 24 Javascript
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 Javascript
jquery蒙版控件实现代码
Dec 08 Javascript
javascript字符串拼接的效率问题
Dec 25 Javascript
一个检测表单数据的JavaScript实例
Oct 31 Javascript
Node.js中的模块机制学习笔记
Nov 04 Javascript
JSP防止网页刷新重复提交数据的几种方法
Nov 19 Javascript
防止页面url缓存中ajax中post请求的处理方法
Oct 10 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
Dec 09 Javascript
七行JSON代码把你的网站变成移动应用过程详解
Jul 09 Javascript
vue基于better-scroll仿京东分类列表
Jun 30 Javascript
JavaScript原型链详解
Nov 07 Javascript
JS新手入门数组处理的实用方法汇总
Apr 07 #Javascript
vue backtop组件的实现完整代码
一文帮你理解PReact10.5.13源码
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
给原生html中添加水印遮罩层的实现示例
html实现随机点名器的示例代码
如何利用JavaScript实现二叉搜索树
You might like
yii框架builder、update、delete使用方法
2014/04/30 PHP
php 伪造HTTP_REFERER页面URL来源的三种方法
2016/09/22 PHP
PHP实现的日历功能示例
2018/09/01 PHP
jquery实现checkbox全选全不选的简单实例
2013/12/31 Javascript
jQuery验证元素是否为空的两种常用方法
2015/03/17 Javascript
javascript执行环境及作用域详解
2016/05/05 Javascript
JS获取随机数和时间转换的简单实例
2016/07/10 Javascript
[原创]jQuery常用的4种加载方式分析
2016/07/25 Javascript
教你用十行node.js代码读取docx的文本
2017/03/08 Javascript
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
vue.js将时间戳转化为日期格式的实现代码
2018/06/05 Javascript
基于JS实现一个随机生成验证码功能
2019/05/29 Javascript
vue webpack重写cookie路径的方法
2019/07/10 Javascript
解决layer 动态加载select 失效的问题
2019/09/18 Javascript
jQuery 实现扁平式小清新导航
2020/07/07 jQuery
使用Python编写Linux系统守护进程实例
2015/02/03 Python
Python下载懒人图库JavaScript特效
2015/05/28 Python
Python SQLite3数据库日期与时间常见函数用法分析
2017/08/14 Python
用于业余项目的8个优秀Python库
2018/09/21 Python
Python pip install如何修改默认下载路径
2020/04/29 Python
django使用多个数据库的方法实例
2021/03/04 Python
美国著名的婴儿学步鞋老品牌:Robeez
2016/08/20 全球购物
Crabtree & Evelyn英国官网:瑰珀翠护手霜、香水、沐浴和身体护理
2018/04/26 全球购物
htmlentities() 和 htmlspecialchars()有什么区别
2015/07/01 面试题
JSF面试题:Jsf中的核心类用那些?有什么作用?LiftCycle六大生命周期是什么?
2014/07/17 面试题
银行自荐信范文
2013/10/07 职场文书
英文简历中的自荐信范文
2013/12/14 职场文书
高级护理专业毕业生推荐信
2013/12/25 职场文书
家长给孩子的评语
2014/01/30 职场文书
校园安全教育广播稿
2014/02/17 职场文书
培训科主任岗位职责
2014/08/08 职场文书
运动会演讲稿100字
2014/08/25 职场文书
《语言的突破》读后感3篇
2019/12/12 职场文书
对Keras自带Loss Function的深入研究
2021/05/25 Python
告别网页搜索!教你用python实现一款属于自己的翻译词典软件
2021/06/03 Python
Python机器学习应用之基于线性判别模型的分类篇详解
2022/01/18 Python