使用uni-app开发（h5、小程序、app）步骤

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:[]
      }
    },
    /* 页面加载成功会执行 */
    onl oad() {
      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: ''
      }
    },
    onl oad: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>