vue、uni-app基础知识学习与开发
关注
分享
扫一扫
文章平均质量分 80
Vue基础知识学习与开发、进阶
uni-app基础知识学习与开发、进阶
yyxhzdm
通过近些年的学习，在Android、Java、微信小程序、uniapp等开发都有些心得体会。最近开始接触HarmonyOS原生以及ArkUI框架的开发...
展开
-
uni-app打包发布Android版本
一、查看编辑代码的HBuilder X工具的版本（帮助 --> 关于）下载Android离线SDK地址注意：您下载的Android离线SDK版本需要与你HBuilder X 开发工具一致先看清楚自己的版本，如果是最新版直接在上面百度云或和彩云中下载，如果不是最新版可以在下面下载历史版本。二、生成本地打包APP资源通过 HBuilderX 可视化界面创建的项目选择项目 -> 发行 -> 原生App-本地打包 -> 生成本地打包App资...原创 2021-11-17 11:20:24 · 3184 阅读 · 0 评论 -
uni-app css之background属性说明
background-color background-position background-size background-repeat background-image background-origin background-clip background-attachment1.background-color : 设置元素的背景颜色 有三种格式：（1）.background-color:yellow;（2）.background-color:#00ff00;（3.原创 2021-11-03 14:30:55 · 4552 阅读 · 0 评论 -
uni-app，文本实现展开、收起全文
效果:思路：1.根据文本显示的布局中，每行大致能显示的文字个数。（实例是大致每行26个文字）2.首先加载页面时，根据文字总长度判断是否超出自定义行数，来处理相应的数据，多余自定义行数，截取对应的文字个数做显示代码与讲解：1.设置参数（script中）isShowAllContent：是都显示“全文”文字txt_content：所有文字内容tempContent：处理后显示的文字内容2.进入页面处理数据onLoad() { var _th...原创 2021-10-14 15:02:09 · 5806 阅读 · 4 评论 -
uni-app swiper轮播图(全屏/卡牌)
效果图：1.自定义组件bw-swiper.vue 代码：<template> <view class="swiperContent"> <swiper @change="change" @animationfinish="animationfinish" :indicator-dots="indicatorDots" :indicator-act...原创 2021-09-30 15:33:05 · 4758 阅读 · 1 评论 -
uni-app 自定义组件之菜单左右滑动并点击切换选中居中显示
效果图：一、1.思路：计算每个子元素的宽度，点击时获取当前点击元素索引，当前点击子元素距离左边栏的距离 - scroll-view 宽度的一半 + 当前点击子元素一半的宽度 实现居中展示。一些简单数据说明：2.自定义组件HuaDongScrollviewCenter文件代码：<template name="HuaDongScrollviewCenter"> <view class="center-cut-menu"> <...原创 2021-09-30 10:52:27 · 1993 阅读 · 0 评论 -
uni-app 自定义下拉选择列表
效果图：1.自定义组件ChoiceSelected.vue2.组件代码：<template name="ChoiceSelected"> <!-- 自定义下拉选择框 start--> <view class="selected-all"> <view :class="isShowChoice ? 'drop-down-box-selected' : 'drop-down-box'" @click="btnShowHid...原创 2021-09-26 10:34:46 · 20476 阅读 · 7 评论 -
uni-app 自定义选择日期2（2021-09-16）
效果图：原创 2021-09-17 11:06:23 · 5199 阅读 · 1 评论 -
uni-app 自定义选择日期1（2021-09-16）
效果图：组件：ren-calendar.vue<template> <view class="calendar-wrapper"> <view class="header" v-if="headerBar"> <view class="pre" @click="changeMonth('pre')">上个月</view> <view>{{y+'年'+f...原创 2021-09-16 16:51:30 · 1240 阅读 · 0 评论 -
uni-app 二维码扫描识别功能
由此可以看出，uni-app自带api在h5平台时是不能调用uni.scanCode的，那么非h5平台实现二维码扫描识别方法：uni.scanCode({ success(res) { _this.tempImgUrl = res.path _this.isChooseI...原创 2021-09-14 09:43:23 · 3820 阅读 · 0 评论 -
uni-app 百度云实现OCR身份证识别功能
一、百度云1.注册百度云账号（网址：百度智能云控制台-管理中心）2.进入百度云点击控制台 -> 文字识别 -> 根据情况创建应用3.创建应用成功，点击管理应用里面有API Key和Secret Key，用于请求access_token。参考“Access Token获取”身份证识别的文档地址二、应用中1.获取Access Token（Access Token的有效期(秒为单位，有效期30天)；）注意：Access Token是有有效期的，所以需要定...原创 2021-09-13 17:47:33 · 1801 阅读 · 1 评论 -
uni-app 自定义导航栏组件
效果图：使用一般需要隐藏原生导航栏，即可在pages.json文件中，对应的页面设置中添加一下代码即可："navigationStyle":"custom"NavBar 导航栏导航栏组件，主要用于头部导航，组件名：uni-custom-navBar，代码块： navigationBar。在script中引用组件：<script> import navigationBar from "../../components/uni-custom-navbar...原创 2021-09-13 16:55:08 · 2382 阅读 · 0 评论 -
uni-app 非H5端，手机顶部状态栏区域设置
效果图：由于特殊需求，页面不需要默认的状态栏，这就需要隐藏状态栏了隐藏状态栏方法：在pages.json配置文件中，找到不需要显示状态栏的页面配置处添加："navigationStyle":"custom"例如：之后在vue中的template：<!-- 状态栏高度的css变量 --><view class="status_bar"></view>css ：.status_bar { heigh...原创 2021-09-13 11:05:26 · 822 阅读 · 0 评论 -
uni-app scroll-view横向、纵向基本使用
官网介绍：可滚动视图区域。用于区域滚动属性说明：注意：使用竖向滚动时，需要给<scroll-view>一个固定高度，通过 css 设置 height；使用横向滚动时，需要给<scroll-view>添加white-space: nowrap;样式一、纵向二、横向...原创 2021-09-09 11:49:14 · 2812 阅读 · 0 评论 -
uni-app scroll-view隐藏滚动条
效果图：代码： scroll-view ::-webkit-scrollbar { display: none; }原创 2021-09-09 11:40:44 · 403 阅读 · 0 评论 -
uni-app 自定义组件之星级评价分数
效果图：1.自定义的组件StarsRating.vue文件<template name="StarsRating"> <view class="stars"> <image @click="btnStars1" class="starsicon" :src="starsObject[0]" mode="widthFix"></image> <image @click="btnStars2" class...原创 2021-09-08 16:44:28 · 1841 阅读 · 1 评论 -
uni-app自定义组件（数据传递、自定义弹框、自定义图片选择）
效果图：自定义组建的步骤：1.在项目中创建目录：components2.新建组件.vue 文件 例如：AddImgs.vue3.组件文档结构实例：4.使用组件实例：5.接下来，我将其中图片选择的自定义组件代码粘贴出来（1）.子组件：<template name="AddImgs"> <view class="content"> <view class="image-wrap"&g...原创 2021-09-07 14:33:10 · 1386 阅读 · 0 评论 -
uni-app Image组件在加载图片发生错误时，显示默认图片
效果图：image属性根据数据结构来对 @error 属性进行传参其实最终的目的是将图图片加载失败的那条数据，替换成默认图片的路径（1）.如果你图片的加载是这种就是单层循环 ：<image v-for="(imgurl ,index_img) in attachList" :src="imgurl.attachUrl" mode="aspectFill" @error="imgerror($event, index_img )"></...原创 2021-08-19 10:22:18 · 13206 阅读 · 2 评论 -
uni-app text文字长实现单行或多行结尾省略
效果图：主要是样式：在text样式中添加这三行代码即可overflow: hidden;white-space: nowrap;text-overflow: ellipsis;说明：1.overflow属性：属性规定当内容溢出元素框时发生的事情2.white-space属性表3.text-overflow：属性规定当文本溢出包含元素时发生的事情...原创 2021-08-18 09:56:19 · 3384 阅读 · 0 评论 -
uni-app左右平分九宫格样式
效果图：1.template：布局<template> <view class="content"> <view class="cp-xiangmu" v-for="item in imgs"> <image :src="item.imgurl" class='cp_tupian' mode='widthFix'></image> <text class='c...原创 2021-08-18 09:48:20 · 1555 阅读 · 0 评论 -
uni-app省市区街道联动http
效果图：所有代码：<template> <view class="content"> <!-- 居住信息 --> <view class="item-address"> <view class="addressCot"> <view class="addressEdit"> <vie...原创 2021-08-13 17:24:16 · 681 阅读 · 0 评论 -
uni-app 本地省市区三级联动
效果图：1.vue主要代码template：<template> <view class="content"> <!-- 居住信息 --> <view class="item-address"> <view class="addressCot"> <view class="addressEdit"> ...原创 2021-08-13 16:45:56 · 750 阅读 · 0 评论 -
uni-app 多图片选中、删除与预览
效果图：整体页面vue代码：<template> <view class="content"> <!-- 图片选择 --> <view class="choose-img"> <view class="image-wrap"> <block v-for="(itemImg ,index) in imageList">...原创 2021-08-05 16:16:16 · 1561 阅读 · 0 评论 -
uni-app时间选择器并选择时间段
效果图：1.在script中引用自定义组件：mx-datepicker.vueimport MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";2.注册组件：components: { MxDatePicker },3.新建时间选择页面代码：<template> <view> <view class="t...原创 2021-08-03 10:48:20 · 11944 阅读 · 3 评论 -
uni-app使用scrollview+swiper实现滑动切换页面功能
效果图：一、创建自定义组件scrollbar.vue<template> <view class="uni-tab-bar"> <scroll-view class="uni-swiper-tab" scroll-x="true"> <block v-for="(tab,index) in tabBars" :style="scrollStyle"> <view...原创 2021-07-28 15:00:09 · 4868 阅读 · 1 评论 -
uni-app实现滑动查看大图功能
效果图：代码：<template> <view class="uni-tab-bar"> <swiper class="uni-swiper-tab" :style="{height:swiperheight+'rpx'}" current="1"> <swiper-item class="item-swiper" v-for="item in swiperList"> ...原创 2021-07-27 18:34:15 · 1101 阅读 · 0 评论 -
uni-app 基础之常用组件（2）基础内容
一、text文本<template> <view> <view> 我师傅收款回复康师傅哈萨克烧烤粉红色绿肥红瘦闪电发货森林防火施蒂利克复合大师科技发货了上课的恢复上课了方式 </view> <view class="txt1"> txt1我师傅收款回复康师傅哈萨克烧烤粉红色绿肥红瘦闪电发货森林防火施蒂利克复合大师科技发货了上课的恢复上课了方式...原创 2021-07-19 18:01:59 · 543 阅读 · 1 评论 -
uni-app 基础之常用组件（1）视图容器
一、最常用的view视图容器1.template2.样式 style<style> .view { display: flex; flex-direction: row; } .view1 { display: flex; align-items: center; justify-content: center; width: 100rpx; ...原创 2021-07-19 17:16:58 · 677 阅读 · 1 评论 -
uni-app 实现省市区三级联动
效果图：第一步：在项目中创建一个联动页面 popupActivity第二步：创建省市区数据的js文件provinceAndCity.jslet data = [ { "name": "北京", "city": [{ "name": "北京", "area": ["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房...转载 2021-07-19 16:46:07 · 13785 阅读 · 4 评论 -
vue基础课程学习之组件（十三）
组件的命名在注册一个组件的时候，我们始终需要给它一个名字。比如全局注册的时候Vue.component('my-component-name', { /* ... */})该组件的名就是Vue.component的第一个参数。组件命名方式有两种：第一种短横线分隔命名定义一个组件（my-component-name）。第二种首字母大写命名（MyConponentName）。注意：直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。#全局注册到目..原创 2021-06-11 10:52:41 · 262 阅读 · 2 评论 -
vue基础课程学习之组建基础（十二）
vue基础课程学习之组建基础（十一）#基本示例组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是<btton-counter>。我们可以在一个通过new Vue创建的 Vue 根实例中，把这个组件作为自定义元素来使用：因为组件是可复用的 Vue 实例，所以它们与new Vue接收相同的选项，例如data、computed、watch、methods以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。#组件复用注意当点击按钮...原创 2021-06-10 16:38:28 · 225 阅读 · 0 评论 -
vue基础课程学习之表单输入绑定（十一）
#基础用法 你可以用v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。v-model在内部为不同的输入元素使用不同的 property 并抛出不同的事件：text 和 textarea 元素使用valueprop...原创 2021-06-10 10:57:22 · 290 阅读 · 1 评论 -
vue基础课程学习之事件处理（十）
vue基础课程学习之事件处理（十）#监听事件可以用v-on指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。 然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在v-on指令中是不可行的。因此v-on还可以接收一个需要调用的方法名称。#内联处理器的方法除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法：有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量$eve...原创 2021-06-09 17:29:24 · 269 阅读 · 1 评论 -
vue基础课程学习之列表渲染（九）
vue基础课程学习之列表渲染（九）#数组的循环我们可以用v-for指令基于一个数组来渲染一个列表。v-for指令需要使用item in items形式的特殊语法，其中items是源数据数组，而item则是被迭代的数组元素的别名。在v-for 块中，我们可以访问所有父作用域的property。V-for 还支持一个可选的第二个参数，即当前项的索引注意：item in items 或 （item ，index）in items循环数组时语法的说明 Items: 源...原创 2021-06-09 15:50:40 · 404 阅读 · 1 评论 -
vue基础课程学习之条件渲染（八）
# v-if v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回truthy值的时候才能被渲染。当然也可以用v-else 添加一个“else 块”点击“测试if else”按钮，会循环切换不同内容。#在<template>元素上使用v-if 条件渲染分组 因为v-if是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个<template>元素当做不可见的包裹元素，并且在上面使用v-if。最终...原创 2021-06-07 18:19:43 · 268 阅读 · 1 评论 -
vue基础课程学习之Class 与 Style 绑定（七）
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用v-bind处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将v-bind用于class和style时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。#对象语法 我们可以传给 v-bind:class 一个对象，以动态地切换class：上面的语法表示active 这个cla...原创 2021-06-07 16:45:25 · 324 阅读 · 1 评论 -
vue基础课程学习之计算属性和侦听器（六）
vue基础课程学习之计算属性和侦听器（六）计算属性模板内的表达式非常便利，但是设计它们的初衷用于简单运算的。在模板中放入太多逻辑会让模板过重且难以维护。<p>{{message.split('').reverse().join('')}}</p>在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量message的翻转字符串。当你想要在模板中的多处包含此翻转字符串时，就会更加难以处理。所以，对于任何复杂逻辑，你都应当使用计...原创 2021-06-07 09:42:57 · 291 阅读 · 0 评论 -
vue基础课程学习之模板语法（五）
指令 指令是带有 v- 前缀的特殊的attribute，指令attribute的值预期是单个JavaScript表达式（v-for 是列外情况，稍后在讨论）。指令的职责是，当表达式的值改变时，将产生的连带影响，响应式地作用于DOM。回顾这里，v-if 指令根据表达式seen的值的true/false,来插入或移除<div>元素#参数 一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新Html 的att...原创 2021-06-04 16:26:16 · 262 阅读 · 2 评论 -
vue基础课程学习之模板语法（四）
一、插值#文本 数据绑定最常见的形式就是使用“Mustache”语法（双大括号）的文本插值<span>Message:{{msg}}</span>Mustache标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生改变，插值处的内容都会更新。当然，通过v-once指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其他数据绑定。<span ...原创 2021-06-04 11:59:57 · 284 阅读 · 0 评论 -
vue基础课程学习之Vue实例(三)
1.每个Vue应用都是通过Vue函数创建一个新的Vue实例开始的var vm = new Vue({//选项})当创建一个Vue实例时，你可以传入一个选项对象，这篇教程主要描述的就是如何使用这些选项来创建你想要的行为。作为参考你也可以在API 文档中浏览完整的选项列表。2.一个 Vue 应用由一个通过new Vue创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。举个例子，一个 todo 应用的组件树可以是这样的：根实例└─ TodoList...原创 2021-06-04 11:55:09 · 413 阅读 · 2 评论 -
vue基础课程学习之简单介绍（二）
条件与循环控制切换一个元素是否显示原创 2021-06-01 15:51:56 · 241 阅读 · 1 评论