uniapp项目的helloworld
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}}
自行体会里面的变量关系和方法调用，废话不多说了。我们下期再见。