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

╰+攻爆jí腚メ 2023-07-10 12:42 5阅读 0赞

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

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

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

### [快速体验][Link 4] ###

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70][]

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

## 第一步：创建项目 ##

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

![format_png][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 1][]

运行项目到浏览器

![format_png 1][]

效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 2][]

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

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 3][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 4][]

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

在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>

新闻列表页大概长这样

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 5][]

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

跳转页面方法：

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>

文章详情页大概长这样：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 6][]

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

[Vue.js]: https://vuejs.org/
[Link 1]: https://docs.alipay.com/mini/ide/0.70-stable
[Link 2]: https://ask.dcloud.net.cn/article/35640
[Link 3]: https://ask.dcloud.net.cn/article/35947
[Link 4]: https://uniapp.dcloud.io/README?id=%E5%BF%AB%E9%80%9F%E4%BD%93%E9%AA%8C
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200302152717380.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ==,size_16,color_FFFFFF,t_70
[github]: https://github.com/dcloudio/hello-uniapp
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWctY2RuLXFpbml1LmRjbG91ZC5uZXQuY24vdW5pYXBwL2RvYy9jcmVhdGUxLnBuZw?x-oss-process=image/format,png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200302155828503.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ==,size_16,color_FFFFFF,t_70
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWctY2RuLXFpbml1LmRjbG91ZC5uZXQuY24vdW5pYXBwL2RvYy9ydW4tY2hyb21lLnBuZw?x-oss-process=image/format,png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200302160100906.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ==,size_16,color_FFFFFF,t_70
[Link 5]: https://uniapp.dcloud.io/quickstart?id=%E8%BF%90%E8%A1%8Cuni-app
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200302165209268.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/2020030219173515.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/2020030816292550.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200308163515636.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ==,size_16,color_FFFFFF,t_70