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"
}
}