使用uni-app开发(h5、小程序、app)步骤

简介: 使用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:[]
      }
    },
    /* 页面加载成功会执行 */
    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>

 


相关文章
|
1天前
|
开发框架 移动开发 JavaScript
SpringCloud微服务实战——搭建企业级开发框架(四十七):【移动开发】整合uni-app搭建移动端快速开发框架-添加Axios并实现登录功能
在uni-app中,使用axios实现网络请求和登录功能涉及以下几个关键步骤: 1. **安装axios和axios-auth-refresh**: 在项目的`package.json`中添加axios和axios-auth-refresh依赖,可以通过HBuilderX的终端窗口运行`yarn add axios axios-auth-refresh`命令来安装。 2. **配置自定义常量**: 创建`project.config.js`文件,配置全局常量,如API基础URL、TenantId、APP_CLIENT_ID和APP_CLIENT_SECRET等。
|
4天前
|
安全 JavaScript 前端开发
kotlin开发安卓app,JetPack Compose框架,给webview新增一个按钮,点击刷新网页
在Kotlin中开发Android应用,使用Jetpack Compose框架时,可以通过添加一个按钮到TopAppBar来实现WebView页面的刷新功能。按钮位于右上角,点击后调用`webViewState?.reload()`来刷新网页内容。以下是代码摘要:
|
2天前
|
监控 小程序 前端开发
基础入门-抓包技术&HTTPS协议&WEB&封包监听&网卡模式&APP&小程序
基础入门-抓包技术&HTTPS协议&WEB&封包监听&网卡模式&APP&小程序
|
2天前
|
移动开发 小程序 安全
基础入门-APP架构&小程序&H5+Vue语言&Web封装&原生开发&Flutter
基础入门-APP架构&小程序&H5+Vue语言&Web封装&原生开发&Flutter
|
2天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的小程序疫苗预约网站系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的小程序疫苗预约网站系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
2天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的课堂考勤微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的课堂考勤微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
2天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的答题小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的答题小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
2天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的校园顺路代送微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的校园顺路代送微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
2天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的疫苗预约小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的疫苗预约小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
2天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的垃圾分类小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的垃圾分类小程序的详细设计和实现(源码+lw+部署文档+讲解等)

热门文章

最新文章