重要提示：echarts不支持小程序！！！
uni-app APP端Echarts 使用与踩坑总结在线定制echarts图表选择自己想要的图表类型、坐标系、组件等，点击下载，会生成echarts.min.js文件 样式的复用
很多时候我们有些模板的样式是基本一致的，但是属于不同的大模块，希望复用的话还是参考之前的样式，复制过来比较好，如果沿用结构和类名，后期修改比较复杂。
高度和宽度在移动端开发中，因为手机机型不一致，尺寸不一致等原因，我们要求页面自适应，因此，元素的高度我们可以是设置确定的值，但是元素的宽度要随着屏幕的方法而变化。
很多时候我们也不需要给父元素设置高度，我们只需要设置margin，padding这些属性，确定元素之间的间隔就好。
var preDate = new Date(curDate.getTime() - 24*60*60*1000); //前⼀天
var nextDate = new Date(curDate.getTime() + 24*60*60*1000); //后⼀天
全局搜索：ctrl+alt+f
单文件搜索：ctrl+f
1.建立utils文件夹，创建api.js文件
2.在api.js中封装方法
3.在mian.js中引入并且挂载到全局，需要用的地方就可以直接使用
4.也可以在单个文件中引入
1.npm安装:
npm i moment
2.在用到的地方引入：
import moment from 'moment'
3.在项目中常用的moment的方法
//获取当前时间
let raw_time=moment()
//获取当前时间,并格式化形式为 2020-12-12，这种形式
let now=moment().format('YYYY-MM-DD')
//获取输入的日期与今天 的差值。两个日期相差几天
let diff = moment().diff(moment('2020-12-12')，'days')
//判断日期是否小于今天的日期
let value = moment('2016-01-01');
let t= moment()>moment(value)
//日期加法add，并格式化
let addtime = moment().add(1, 'd').format('YYYY-MM-DD'),
说明：'d'：天（=day）。还可以是'week'：周，'hours':小时，'months':月，等等
1.npm安装:
npm install dayjs --save
2.在用到的地方引入：
import dayjs from ‘dayjs’
引入的图片或者文件的路径比如，放在静态资源文件夹的static的图片可以这样写路径：/static/image/top-bg.png。
创建于根目录的放置公共方法的文件夹utils。
在需要用到的文件中引入的方法有两种：
import dateFormat from '@/utils/formatDate.js'
import formatDate from '../../utils/formatDate.js'
┌─uniCloud 云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb（详见uniCloud）
├─components 符合vue组件规范的uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─common/utils 项目相关公共js方法
│ └─http.js 请求封装
├─store vuex 目录
├─.gitignore git 版本管制忽略的配置
├─hybrid App端存放本地html文件的目录
├─platforms 存放各平台专用页面的目录
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ │ └─index.scss index页面样式表
│ └─else
│ └─else.vue 其它页面
│ └─else.scss 其它页面样式表
├─static 存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─node_modules 存放[node_module](/node_moduless)。
├─uni_modules 存放[uni_module](/uni_modules)。
├─wxcomponents 存放小程序组件的目录
├─nativeplugins App原生插件
├─unpackage 非工程代码，一般存放运行或发行的编译结果
├─LICENSE 许可证
├─uview-ui uview-ui插件依赖
├─App.vue vue项目入口文件
├─main.js Vue初始化入口文件
├─App.vue 应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json 配置应用名称、appid、logo、版本等打包信息
├─package.json 应用包配置文件
├─package-lock.json 应用包配置各依赖版本号，实际安装的结构
├─README.md 说明文档
└─uni.scss 这里是uni-app内置的常用样式变量
目录1
.hbuilderx 运行时生成临时目录
pages 页面存放目录
static 静态文件资源目录
App.vue 应用入口文件，与小程序 app.js 类似
main.js 应用入口文件，注册Vue等
manifest.json 项目配置文件
pages.json 页面配置文件
uni.scss 定义常用样式目录
目录2
common 存放公用的文件
components 存放自定义组件目录
store vuex 目录
unpackage 编译后的文件存放目录
给父元素添加样式：
display: flex;
justify-content: center;
align-items: center;
父元素：设置一个相对定位属性position:relative，子元素：设置一个绝对定位属性：position:absolute。
文本超出部分隐藏 单行text-overflow:ellipsis; /*让超出的用...实现*/
white-space:nowrap; /*禁止换行*/
overflow:hidden; /*超出的隐藏*/
overflow: hidden;
text-overflow: ellipsis;
display:-webkit-box; //作为d性伸缩盒子模型显示。
-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上
属性lines设置一行没办法像设置两行一行出现省略号。
顶部导航栏是默认开启的，开始的时候很多时候我们是不需要这个默认的导航栏的，我们在pages.json中进行配置，既可以去除单个页面的导航栏，也可以去除所有页面的导航栏。
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationStyle":"custom",
"app-plus": {
"titleNView": false, // 去掉APP、H5的顶部导航
"scrollIndicator": "none" //app页面不显示滚动条
}
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"navigationStyle":"custom",
"app-plus": {
"titleNView": false, // 去掉APP、H5的顶部导航
"scrollIndicator": "none" //app页面不显示滚动条
}
}
以tab标签页为例，我们需要修改每个标签在激活状态下的样式，可以使用属性activeStyle，属性值为一个对象。
:activeStyle="{color: '#fff',fontWeight: '600',fontSize: '20px',lineHeight: '28px'}"
属性值中出现的字符串我们用单引号，也就是双引号中包单引号，或者单引号中包双引号。不能使用一种引号。如果出现font-size等属性值，我们才用小驼峰写法fontSize。
样式表分页面在uni-app开发中，如果我们要写的样式很多，全部写在标签中无法提高开发效率，我们可以将很多的样式代码放到一个文件，然后引入页面。
在同一个文件夹中创建一个扩展名为.scss中样式文件，文件中可以写入我们的样式，可以写css的语法，也能写scss/sass预处理器的语法。
然后我们在.vue文件中引入该样式文件。
在pages.json里面进行配置：
去掉所有页面的顶部导航栏"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
"navigationStyle":"custom",
"app-plus":{
"titleView":false // 去掉APP、H5的顶部导航
}
}
navigationStyle导航栏样式，仅支持 default/custom。custom即取消默认的原生导航栏。
“titleNView”: false ，表示禁用原生导航栏。
{
"path": "pages/index/index",
"style": {
// "navigationBarTitleText": "uni-app"
"app-plus": {
"titleNView": false, // 去掉APP、H5的顶部导航
"scrollIndicator": "none" //app页面不显示滚动条
},
}
}
box-sizing: border-box;
语法
box-sizing：content-box | border-box
默认值：content-box
取值
content-box：
padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding)
此属性表现为标准模式下的盒模型。
border-box：
padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )
此属性表现为怪异模式下的盒模型。
在uni-app中引入uView的方式有两种：
通过npm下载// 如果您的根目录没有package.json文件的话，请先执行如下命令：
// npm init -y
npm install uview-ui
// 更新
// npm update uview-ui
1.引入uView主JS库
在项目根目录中的main.js中，引入并使用uView的JS库，注意这两行要放在import Vue之后。
// main.js
// 引入全局 uView 框架
import uView from 'uview-ui';
Vue.use(uView);
2.在引入uView的全局SCSS主题文件
在项目根目录的uni.scss中引入此文件。
/* uni.scss引入view主题样式 */
@import 'uview-ui/theme.scss';
3.引入uView基础样式
注意：在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性
4.配置easycom组件模式
在pages.json配置，uni-app为了调试性能的原因，修改easycom规则不会实时生效，配置完后，您需要重启Hbuilder X或者重新编译项目才能正常使用uView的功能。请确保您的pages.json中只有一个easycom字段，否则请自行合并多个引入规则。
"easycom": {
"^u-(.*)": "uview-ui/components/u-/u-.vue"
},
如果使用Hbuilder X进行开发，就可以在uni-app插件市场通过uni_modules的形式进行安装。
1.点击导入
2.打开hbuilderX
3.选择项目
4.开始下载
5.确保安装了scss/sass编译器
在工具中找到“插件安装”
1.引入uView主JS库
在项目根目录中的main.js中，引入并使用uView的JS库，注意这两行要放在import Vue之后。
// main.js
import uView from '@/uni_modules/uview-ui'
Vue.use(uView
2.在引入uView的全局SCSS主题文件
在项目根目录的uni.scss中引入此文件。
/* uni.scss */
@import '@/uni_modules/uview-ui/theme.scss';
3.引入uView基础样式
注意：在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性
4.配置easycom组件模式
在pages.json配置，uni-app为了调试性能的原因，修改easycom规则不会实时生效，配置完后，您需要重启Hbuilder X或者重新编译项目才能正常使用uView的功能。请确保您的pages.json中只有一个easycom字段，否则请自行合并多个引入规则。uni_modules方式引入的uview可以不配置。
"easycom": {
"^u-(.*)": "@/uni_modules/uview-ui/components/u-/u-.vue"
},
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）