uni-app快速入手 ——（1）学会搭建基础项目，如何建uni-app项目和运行

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。

DCloud公司拥有420万开发者，几十万应用案例、6.5亿手机端月活用户，数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app（详见），腾讯课堂官方为uni-app录制培训课程（详见），开发者可以放心选择。

uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序开发框架（详见）、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。

快速体验

一套代码编到8个平台，这不是梦想。眼见为实，扫描8个二维码，亲自体验最全面的跨平台效果！

注：某些平台不能提交简单demo，故补充了一些其他功能；hello uni-app示例代码可从github获取

第一步：创建项目

打开hbuilderX：文件→新建→项目

 选择uni-app → 默认模板 → 创建

运行项目到浏览器

效果

 

这个时候简单的uni-app就创建好了，并且可以运行，运行到其他端查看方法

 

第二步：简单实战，了解uni-app页面的搭建和跳转

我们需要用到uni-app官方提供的组件，可以从官网下载Hello uni-app

也可以使用HbuilderX创建项目选择Hello uni-app模板

创建完Hello uni-app组件模板后把common文件拷到我们自己的项目目录下使用

 

 

在app.vue中引入uni.css组件样式文件

在pages中创建index文件页面index.vue

使用ulistmedia快捷代码片段

新闻列表页大概长这样

 

点击每一条的时候去跳转详情页面，去调取详情的接口

 

跳转页面方法：

	goInfos(oData){
				console.log(oData.post_id)
				uni.navigateTo({
					url: '../infos/infos?newid='+oData.post_id,
				});
			}

详情页：

文章详情页大概长这样：

 

页面的头部样式在pages.js中配置

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "two-demo"
			}
		}
	    ,{
            "path" : "pages/infos/infos",
            "style" : {
				"navigationBarTitleText": "文章详情"
			}
        }
    ],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	}
}