uni-app介绍
uni-app
是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。
官网地址(使用文档)
https://uniapp.dcloud.io/README
这里创建小程序为例
开发工具:Hbuilder 、微信开发者工具
打开如下hbuilder首先创建一个项目,不是正真开发的项目 ,一会要用到里面的文件 ,当然这个可以作为其他组件使用参照
接着创建要开发的项目
复制第一次创建的项目中的common到这个oa项目中 ,
将common中的uni.css引入
将这个oa运行到微信小程序开发工具中
这里开发一个新闻列表页
index.vue代码
<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="openinfo" :data-id="item.id">
<view class="uni-media-list">
<image class="uni-media-list-logo" :src="item.author_avatar"></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.content}}</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list:[]
}
},
/* 页面加载成功会执行 */
onLoad() {
uni.showLoading({
title:'加载中...'
})
uni.request({
url:'https://unidemo.dcloud.net.cn/api/news',
method:'GET',
data:{},
success: res=>{
this.list=res.data;
uni.hideLoading()
},
complete: () => {
},
complete: () => {
}
})
},
methods: {
openinfo(e){
var id = e.currentTarget.dataset.id;
console.log(id)
uni.navigateTo({
url: '../info/info?newid='+id,
});
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
info.vue代码
<template>
<view class="content">
<rich-text class="richtext" :nodes="content"></rich-text>
</view>
</template>
<script>
export default {
data() {
return {
title: '',
content: ''
}
},
onLoad:function(e){
console.log(e.newid)
uni.request({
url:'https://unidemo.dcloud.net.cn/api/news/36kr/'+e.newid,
method:'GET',
data:{},
success: res => {
console.log(res),
this.title=res.data.title,
this.content=res.data.content
}
})
}
}
</script>
<style>
</style>