uni-app官网
现在官网上面粗略的读一下，了解一下他的一些概念和语法规则即可。
然后我们来创建一个uniapp项目，需要用到的开发软件是Hbuilder和微信开发者工具
双击Hbuilder，打开创建一个uni-app项目
这是一个创建之后默认的项目结构
pages.json是页面路由配置，几乎所有的页面都需要在该文件中声明
page文件夹存放页面（.vue文件，标准前端）
App.vue学过java的就当做springboot中的启动类吧
其他的文件、文件夹暂且不管
接下来，学习运行一个uni-app项目（微信小程序）
运行成功后，会自动调出微信开发者工具
上面这个图就是自动调出的微信开发者工具了
我们需要回顾一下我们在官网看到的一些东西，在脑子里有一个印象
uni-app 组件是基本组成单元，每个组件都有开始标签、结束标签、内容、属性和属性值
每个.vue文件的根节点必须为,下必须有且只有一个
接下来理解一下 属性名称前带冒号是什么意思，标识属性值不是字符串，而是js，消化一下，待会我们要用到
当属性值是js时，在属性前面添加:冒号。比如:disable="false"
在uni-app中，每个组件都有这些属性：id ref class style hidden data-* @*
data-* 自定义属性
@*组件的事件，有事件处理器
好了，可以开始新建一个页面了，不再是html页面喽，在pages文件下创建，体会冒号语法和.vue文件的基本格式。在学习了vue的基本使用之后，就会非常容易上手了。
所以看这篇文章的你，没有用过vue那还是先去用用和学学vue吧
uni-app中组件分为了基础组件和扩展组件，扩展组件需要导入才能使用
基础组件有：view scroll-view可滚动视图容器 swiper滑块视图容器（轮播图） text rich-text progress button checkbox editor form input lable picker弹出式列表选择器 navigator audio camera image video map ad
uni-app支持的组件分为vue组件和小程序自定义组件
在这里穿插一个小知识，因为我是后端程序员，接触前端的东西还是不太理解es6，那其实呢，根据我老板的话来说，es6可以看成是js，只要清楚了ES6新增了let命令，用来声明变量，用法类似于var，只在let命令所在的代码块内有效
如何判断你用的是es5还是es6呢，就从是否有let命令来吧
接下来，我们进阶了，因为老板要求作出这样一个页面（其实不止一个，好多个，但是别着急，听我一一道来）
首先第一个页面
怎么开始呢？快速上手就要学会借鉴（抄）和模仿（袭）
大家肯定有一个疑问，那就是这个页面是怎么出来的，我们打开pages.json，配置一下就能出来
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path" : "pages/order/order",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
},
{
"path": "pages/loginWX/loginWX",
"style": {
"navigationBarTitleText": "uni-app"
}
},
{
"path" : "pages/test1/test1",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
},
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
,{
"path" : "pages/itooktheorder/itooktheorder",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/detail/detail",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"tabBar": {
"color": "#C0C4CC",
"selectedColor": "#b25858",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/order/order",
"iconPath": "static/tab-home.png",
"selectedIconPath": "static/tab-home-current.png",
"text": "我是接单人"
},
{
"pagePath": "pages/test1/test1",
"iconPath": "static/tab-home.png",
"selectedIconPath": "static/tab-home-current.png",
"text": "我是发单人"
}
]
}
}
那么大一个代码块哈，不要害怕，其实关键的一段就在截图里面。不必多说，页面就是pages下的test1下的test1.vue文件。
{{item.text}} {{item.toCreateData}} {{item.stateTip}} {{item.toTitle}} {{orderstatusMap[item.toStatus]}} {{item.toPrice}} page, .content{ background: $page-color-base; height: 100%; } .swiper-box{ height: calc(100% - 40px); } .list-scroll-content{ height: 100%; } .navbar{ display: flex; height: 40px; padding: 0 5px; background: #fff; box-shadow: 0 1px 5px rgba(0,0,0,.06); position: relative; z-index: 10; .nav-item{ flex: 1; display: flex; justify-content: center; align-items: center; height: 100%; font-size: 15px; color: $font-color-dark; position: relative; &.current{ color: $base-color; &:after{ content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 44px; height: 0; border-bottom: 2px solid $base-color; } } } } .uni-swiper-item{ height: auto; } .order-item{ display: flex; flex-direction: column; padding-left: 30upx; background: #fff; margin-top: 16upx; .i-top{ display: flex; align-items: center; height: 80upx; padding-right:30upx; font-size: $font-base; color: $font-color-dark; position: relative; .time{ flex: 1; } .state{ color: $base-color; } .del-btn{ padding: 10upx 0 10upx 36upx; font-size: $font-lg; color: $font-color-light; position: relative; &:after{ content: ''; width: 0; height: 30upx; border-left: 1px solid $border-color-dark; position: absolute; left: 20upx; top: 50%; transform: translateY(-50%); } } } .goods-box{ height: 160upx; padding: 20upx 0; white-space: nowrap; .goods-item{ width: 120upx; height: 120upx; display: inline-block; margin-right: 24upx; } .goods-img{ display: block; width: 100%; height: 100%; } } .goods-box-single{ display: flex; padding: 20upx 0; .goods-img{ display: block; width: 120upx; height: 120upx; } .right{ flex: 1; display: flex; flex-direction: column; padding: 0 30upx 0 24upx; overflow: hidden; .title{ font-size: $font-base + 2upx; color: $font-color-dark; line-height: 1; } .attr-box{ font-size: $font-sm + 2upx; color: $font-color-light; padding: 10upx 12upx; } .price{ font-size: $font-base + 2upx; color: $font-color-dark; &:before{ content: '￥'; font-size: $font-sm; margin: 0 2upx 0 8upx; } } } } .price-box{ display: flex; justify-content: flex-end; align-items: baseline; padding: 20upx 30upx; font-size: $font-sm + 2upx; color: $font-color-light; .num{ margin: 0 8upx; color: $font-color-dark; } .price{ font-size: $font-lg; color: $font-color-dark; &:before{ content: '￥'; font-size: $font-sm; margin: 0 2upx 0 8upx; } } } .action-box{ display: flex; justify-content: flex-end; align-items: center; height: 100upx; position: relative; padding-right: 30upx; } .action-btn{ width: 160upx; height: 60upx; margin: 0; margin-left: 24upx; padding: 0; text-align: center; line-height: 60upx; font-size: $font-sm + 2upx; color: $font-color-dark; background: #fff; border-radius: 100px; &:after{ border-radius: 100px; } &.recom{ background: #fff9f9; color: $base-color; &:after{ border-color: #f7bcc8; } } } } .uni-load-more { display: flex; flex-direction: row; height: 80upx; align-items: center; justify-content: center } .uni-load-more__text { font-size: 28upx; color: #999 } .uni-load-more__img { height: 24px; width: 24px; margin-right: 10px } .uni-load-more__img>view { position: absolute } .uni-load-more__img>view view { width: 6px; height: 2px; border-top-left-radius: 1px; border-bottom-left-radius: 1px; background: #999; position: absolute; opacity: .2; transform-origin: 50%; animation: load 1.56s ease infinite } .uni-load-more__img>view view:nth-child(1) { transform: rotate(90deg); top: 2px; left: 9px } .uni-load-more__img>view view:nth-child(2) { transform: rotate(180deg); top: 11px; right: 0 } .uni-load-more__img>view view:nth-child(3) { transform: rotate(270deg); bottom: 2px; left: 9px } .uni-load-more__img>view view:nth-child(4) { top: 11px; left: 0 } .load1, .load2, .load3 { height: 24px; width: 24px } .load2 { transform: rotate(30deg) } .load3 { transform: rotate(60deg) } .load1 view:nth-child(1) { animation-delay: 0s } .load2 view:nth-child(1) { animation-delay: .13s } .load3 view:nth-child(1) { animation-delay: .26s } .load1 view:nth-child(2) { animation-delay: .39s } .load2 view:nth-child(2) { animation-delay: .52s } .load3 view:nth-child(2) { animation-delay: .65s } .load1 view:nth-child(3) { animation-delay: .78s } .load2 view:nth-child(3) { animation-delay: .91s } .load3 view:nth-child(3) { animation-delay: 1.04s } .load1 view:nth-child(4) { animation-delay: 1.17s } .load2 view:nth-child(4) { animation-delay: 1.3s } .load3 view:nth-child(4) { animation-delay: 1.43s } @-webkit-keyframes load { 0% { opacity: 1 } 100% { opacity: .2 } }
自行体会里面的变量关系和方法调用，废话不多说了。我们下期再见。
