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组件样式文件

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style>
	/*每个页面公共css */
	@import './common/uni.css';
</style>

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

使用ulistmedia快捷代码片段

<template>
	<view class="content">
		<view class="uni-list">
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in list" :key="index" @tap="goInfos(item)">
				<view class="uni-media-list">
					<image class="uni-media-list-logo" :src="item.cover"></image>
					<view class="uni-media-list-body">
						<view class="uni-media-list-text-top">{{item.title}}</view>
						<view class="uni-media-list-text-bottom uni-ellipsis">{{item.author_name}} {{item.created_at}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: []
			}
		},
		onLoad() {
			var that = this
			uni.request({
				url: 'https://unidemo.dcloud.net.cn/api/news',
				method: 'GET',
				data: {},
				success: res => {
					// console.log("123",res.data)
					that.list = res.data
				},
				fail: () => {},
				complete: () => {}
			});

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

		}
	}
</script>

<style>
.uni-media-list-body{
	height: auto;
}
.uni-media-list-text-top{
	line-height: 1.6em;
}
</style>

新闻列表页大概长这样

 

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

 

跳转页面方法：

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

详情页：

<template>
	<view class="infos-cont">
		<view class="img-title">
			<view class="infos-title">{{ newsText.title }}</view>
			<view class="news-text">
				<view>作者：{{ newsText.author_name }}</view>
				<view>时间：{{ newsText.published_at }}</view>
			</view>
		</view>
		<view class="news-cont"><rich-text :nodes="newsText.content"></rich-text></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			newsText: {}
		};
	},
	onLoad(e) {
		console.log('infos', e);
		uni.showLoading({
			title: '加载中...',
			mask: true
		});
		uni.request({
			url: 'https://unidemo.dcloud.net.cn/api/news/36kr/' + e.newid,
			method: 'GET',
			data: {},
			success: res => {
				console.log(res.data);
				this.newsText = res.data;
				uni.hideLoading();
			},
			fail: () => {},
			complete: () => {}
		});
	},
	methods: {}
};
</script>

<style>
.infos-cont {
	width: 100%;
}
.infos-title {
	text-align: center;
	font-weight: 700;
	width: 100%;
	padding: 10rpx 20rpx;
	box-sizing: border-box;
}
.uni-flex {
	align-items: flex-end;
}
.news-text {
	color: #cccccc;
	padding: 0 30rpx;
	display: flex;
	justify-content: flex-end;
}
.news-text > view:last-child {
	margin-left: 20rpx;
}
.new-img {
	text-align: center;
}
.news-cont {
	width: 100%;
	box-sizing: border-box;
	padding: 0 25rpx 30rpx;
	font-size: 30rpx;
}
</style>

文章详情页大概长这样：

 

页面的头部样式在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"
	}
}