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>
