返回顶部
首页 > 资讯 > 精选 >uniapp怎么使用uview
  • 356
分享到

uniapp怎么使用uview

2023-07-05 15:07:28 356人浏览 八月长安
摘要

本文小编为大家详细介绍“uniapp怎么使用uview”,内容详细,步骤清晰,细节处理妥当,希望这篇“uniapp怎么使用uview”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。安装uview的安装方式有两种,一

本文小编为大家详细介绍“uniapp怎么使用uview”,内容详细,步骤清晰,细节处理妥当,希望这篇“uniapp怎么使用uview”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

安装

uview的安装方式有两种,一种是去插件市场下载插件,另外一种是利用npm加载。

uniapp项目中添加sasssass-loader解析。

// 安装sassnpm i sass -D// 安装sass-loadernpm i sass-loader -D

引入uView主js

在项目根目录中的main.js中,引入并使用uView的JS库,注意这两行要放在import Vue之后。

import uView from '@/uni_modules/uview-ui'Vue.use(uView)

uniapp怎么使用uview


注意引用之后,就要添加uView的组件,否则项目报错。

在项目根目录的uni.sCSS中引入此文件。

@import '@/uni_modules/uview-ui/theme.scss';

引入uview基本样式。在App.vue中引入

<style lang="scss">@import "@/uni_modules/uview-ui/index.scss";</style>

配置easycom组件模式,在page.JSON文件中配置

// pages.json{// 如果您是通过uni_modules形式引入uView,可以忽略此配置"easycom": {"^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"},// 此为本身已有的内容"pages": [// ......]}

到这里就配置完了,在项目中正常引用组件即可。

案例

<template>    <view class="u-page">        <view class="u-demo-block">            <text class="u-demo-block__title">基础使用</text>            <view class="u-demo-block__content">                <u-row customStyle="margin-bottom: 10px">                    <u-col span="6">                        <view class="demo-layout bg-purple-light"></view>                    </u-col>                    <u-col span="6">                        <view class="demo-layout bg-purple"></view>                    </u-col>                </u-row>                <u-row customStyle="margin-bottom: 10px">                    <u-col span="4">                        <view class="demo-layout bg-purple"></view>                    </u-col>                    <u-col span="4">                        <view class="demo-layout bg-purple-light"></view>                    </u-col>                    <u-col span="4">                        <view class="demo-layout bg-purple-dark"></view>                    </u-col>                </u-row>                <u-row justify="space-between">                    <u-col span="3">                        <view class="demo-layout bg-purple"></view>                    </u-col>                    <u-col span="3">                        <view class="demo-layout bg-purple-light"></view>                    </u-col>                    <u-col span="3">                        <view class="demo-layout bg-purple"></view>                    </u-col>                    <u-col span="3">                        <view class="demo-layout bg-purple-light"></view>                    </u-col>                </u-row>            </view>        </view>    </view></template><style lang="scss">    .wrap {        padding: 12px;    }    .demo-layout {        height: 25px;        border-radius: 4px;    }    .bg-purple {        background: #CED7E1;    }    .bg-purple-light {        background: #e5e9f2;    }    .bg-purple-dark {        background: #99a9bf;    }</style>

运行效果:
uniapp怎么使用uview

这是uview的布局示例,基础使用 下是uview的组件,这里展示的是uveiw的布局。u-rowu-col,使用过bootstrap或者elementUI框架的小伙伴对此比较熟悉。应用起来也是比较方便。
对比colorUI的布局,uveiw这里会更加清晰。很清楚知道一行u-row被均分成了12份u-col,然后再定义每个小盒子占多少份(u-col中的span属性),很容易实现许多效果。与colorUI不同的是,这里使用的是u-rowu-col组件,而colorUI中使用的是uniapp的原生标签view。在迅速开发时使用uview会减轻许多繁琐的工作。但是面临精细化开发时,由于colorUI只是一个css框架,更接近原生应用,所以会有优势。这两种框架无好坏之分,看具体场景的应用情况。正像uniappandroidIOS语言一样。

读到这里,这篇“uniapp怎么使用uview”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注编程网精选频道。

--结束END--

本文标题: uniapp怎么使用uview

本文链接: https://www.lsjlt.com/news/352871.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • uniapp怎么使用uview
    本文小编为大家详细介绍“uniapp怎么使用uview”,内容详细,步骤清晰,细节处理妥当,希望这篇“uniapp怎么使用uview”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。安装uview的安装方式有两种,一...
    99+
    2023-07-05
  • uniapp使用uview-plus(vue3项目)
    先创建一个vue3的uniapp项目,建议选择空项目 Hbuilder X方式 下载方式配置文档 如果您是使用Hbuilder X开发的用户,您可以在uni-app插件市场通过uni_modules的形式进行安装,此安装方式可以方便您后续...
    99+
    2023-09-16
    vue 小程序
  • uniapp使用uview的简单案例
    简介 uview框架已经出到2.0了,从当初的1.0到2.0,一路走来,在uniapp中使用框架。确实帮助自己节省许多时间,为了以后更好的应用,记录一下使用方法和使用心得。 安装 1...
    99+
    2023-03-23
    uniapp使用uview报错 uniapp使用uview uview使用
  • uniapp使用第三方UI库uview-plus的方法
    目录前言:一、使用Album相册功能二、 picker  选择器三、input输入框 和 Textarea 文本域四、使用textarea总结前言: 开发uniapp时,有...
    99+
    2023-05-18
    uniapp使用uview-plus uniapp uview-plus uniapp使用第三方ui
  • uniapp怎么使用stomp
    随着现代 Web 应用程序的发展,越来越多的开发人员正在使用 WebSocket 技术来进行实时通信。但是,如果你需要使用消息代理,特别是 ActiveMQ 或 RabbitMQ,那么 STOMP 协议是另一个值得考虑的选择。而在开发移动应...
    99+
    2023-05-22
  • Uniapp中colorui怎么使用
    Uniapp是一款基于Vue.js的开发框架,可以一次编写代码,将应用程序部署到多个平台,如Web、iOS、Android等。ColorUI是Uniapp框架中的一种UI框架,它提供了丰富的UI组件、模板和样式,使得开发者可以快速开发出美观...
    99+
    2023-05-22
  • uniapp中怎么使用nvue
    这篇文章主要介绍“uniapp中怎么使用nvue”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“uniapp中怎么使用nvue”文章能帮助大家解决问题。开始创建第一个 nvue 页面。目录结构:ind...
    99+
    2023-07-04
  • Uniapp中怎么使用Echarts
    这篇文章主要介绍“Uniapp中怎么使用Echarts”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Uniapp中怎么使用Echarts”文章能帮助大家解决问题。一、视图层画图依赖于canvas标签...
    99+
    2023-07-04
  • uniapp uview <u-datetime-picker>时间选择器的使用 默认从当前时间开始选择
        能够从当前日期开始选择的关键  value1: Number(new Date()),   来源地址:https://blog.csdn.net/qq_59175937/article/details/129735326...
    99+
    2023-08-31
    uni-app 前端 javascript html
  • uniapp怎么使用audio标签
    随着移动互联网的发展,音频相关应用也越来越受到用户的欢迎,比如音乐播放器、语音聊天、语音识别等等。而使用uniapp开发这些音频应用是非常方便的,其中有一个重要的组件就是<audio>标签。本文将介绍uniapp中如何使用<...
    99+
    2023-05-14
  • uniapp中的easycom怎么使用
    这篇文章主要介绍了uniapp中的easycom怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇uniapp中的easycom怎么使用文章都会有所收获,下面我们一起来看看吧。什么是easycom?easy...
    99+
    2023-07-05
  • 怎么在uniapp项目中使用mqtt
    这篇文章将为大家详细讲解有关怎么在uniapp项目中使用mqtt,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一、uniapp插件市场的参考插件  https://ext.dcloud.net.cn/pl...
    99+
    2023-06-15
  • uniapp地图组件map怎么使用
    这篇文章主要介绍了uniapp地图组件map怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇uniapp地图组件map怎么使用文章都会有所收获,下面我们一起来看看吧。首先引入map组件 <...
    99+
    2023-07-02
  • uniapp怎么使用h5网络请求
    近年来,随着移动端互联网的不断发展,越来越多的Web应用逐渐被移植至原生应用中。而随着移动端开发技术的不断更新,开发者们也在不断地追求更加高效、优秀的开发方式。其中,Uniapp作为一种多端统一开发框架,受到了越来越多的关注和喜爱。在uni...
    99+
    2023-05-14
  • 怎么使用uniapp开发小程序
    要使用uniapp开发小程序,你可以按照以下步骤进行操作: 首先,安装uni-app开发工具,官方提供了uni-app的开发工具...
    99+
    2024-04-09
    uniapp
  • 聊聊uniapp项目中怎么使用Axios
    Uniapp 是基于 Vue.js 的跨平台开发框架,可以同时构建 iOS、Android 和 Web 应用,而 Axios 是一款流行的基于 Promise 的 HTTP 库。虽然 Uniapp 可以使用 Vue.js 自带的 $http...
    99+
    2023-05-14
  • 怎么用uni-app和uView实现多图上传功能
    本篇内容主要讲解“怎么用uni-app和uView实现多图上传功能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用uni-app和uView实现多图上传功能”吧!效果图上传初始状态:上传图片...
    99+
    2023-07-05
  • 小程序使用uview中的u-popup弹窗组件
    小程序封装弹窗组件(使用uview框架中的u-popup弹窗组件) 效果展示 代码结构 结构分析 最外层页面index.vue-可点击"选择优惠券",进入弹窗组件selector.vu...
    99+
    2023-09-15
    小程序 vue.js
  • uniapp使用地图
    uniapp使用地图 使用内置地图查看定位 效果 实现 唤醒题图// 高德地图、腾讯、百度等地图中打开data(){ return{ latitude: 39.909,longitude: 116.39742,covers:...
    99+
    2023-08-17
    uni-app 微信小程序 小程序
  • uniapp分页器怎么用
    随着移动互联网的快速发展,移动端应用的开发越来越受到重视。而开发一款好的移动端应用,需要具备多种技术和框架的支持。其中,uniapp是一款优秀的开发框架,可以兼容多个平台,节省了开发者的时间和成本。在开发过程中,实现分页功能是非常常见的需求...
    99+
    2023-05-14
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作