![](https://img-blog.csdnimg.cn/20190927151132530.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
uni-app
uni-app 学习
前端学习007
学习、工作记录、技术交流
展开
-
uni-app返回上一层页面后数据刷新重置
1.页面跳转后返回之前页面数据重置全部刷新了这个问题很头疼,从a页面去b页面办了点事,回到a页面时之前的数据没了,页面重置了怎么办把路由页面跳转时用的uni.navigateTo({}) 改用uni.navigateBack()这个完美解决了页面自动刷新的问题,是自带的返回方法;2.页面不刷新的问题了这个简单,当你的数据发生变化后,页面视图如果没有随着改变只需要加上this.$forceUpdate()强制刷新页面...原创 2021-03-25 13:23:08 · 3969 阅读 · 0 评论 -
uni-app 自定义导航栏 图片按钮
按钮据右边边框距离设置: document.getElementsByClassName('uni-btn-icon')[2].style.marginRight = '22px'监听按钮状态: onNavigationBarButtonTap(e) { if (e.index === 1|| e.index === 2) { this.isfilter = !this.isfilter if (this.isfilter == false) { document..原创 2021-03-25 11:47:03 · 3624 阅读 · 0 评论 -
uni-app uniRate 动态赋值
uni-rate.vue 组件 :<template> <view> <view ref="uni-rate" class="uni-rate"> <view v-if="" class="uni-rate__icon" :class="{'uni-cursor-not-allowed': disabled}" :style="{ 'margin-right': margin + 'px' }" v-for="(star, index) in star原创 2021-03-25 11:32:30 · 1114 阅读 · 0 评论 -
this.$nextTick()怎么使用?
应用场景:this.$nextTick()方法主要是用在随数据改变而改变的dom应用场景中,vue中数据和dom渲染由于是异步的,所以,要让dom结构随数据改变这样的操作都应该放进this.$nextTick()的回调函数中。created()中使用的方法时,dom还没有渲染,如果此时在该钩子函数中进行dom赋值数据(或者其它dom操作)时无异于徒劳,所以,created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中,而与created()对应的是mounted()的钩子原创 2021-03-25 09:54:40 · 1157 阅读 · 0 评论 -
uni-app 导航栏使用iconfont 字体图标(unicode引用方式)
unicode引用方式我们主要是用到iconfont.css和后缀名为.eot、.svg、.ttf、.woff的文件 ,新建一个专门存放文件夹。复制  设置导航栏字体图标:"text": "\ue73f","fontSrc":"/static/iconfont/iconfont.ttf"效果图如下:...原创 2021-01-28 16:03:29 · 3091 阅读 · 0 评论 -
uni-app 实现navigateBack返回修改前一页面数据(H5、APP、小程序)
B页面返回修改A页面title的值//A页面<template> <text class="title">返回修改的值:{{title}}</text></template>export default { data() { return { title: 'Hello' } },}//B页面<button @click="change">修改上一页的ti转载 2020-10-22 15:13:51 · 1685 阅读 · 1 评论 -
uni-app图片压缩转base64位,多图片上传
之前写过uni-app H5方式上传图片,但是在生成apk后,上传图片失败,不支持app上传。查找资料后解决app上传多图问题。H5方式上传图片可参考:uni-appH5端canvas压缩图片图片选择,每次最多选择4张,最多上传8张 chooseImage: async function() { var that = this; uni.chooseImage({ source原创 2020-09-09 17:52:26 · 1276 阅读 · 0 评论 -
uni-app引入自定义图标库
1.进入阿里图标库下载并解压字体图标库到本地(下载Unicode格式的)方法一:2.在项目根目录下创建common目录,并把iconfont.css文件放入common目录中3.修改iconont.css里的@font-face(保留base64字体图标)删除划线部分,保留结尾分号。删除后:@font-face {font-family: "iconfont"; src:url('data:application/x-font-woff2;charset=utf-8;base64,d09原创 2020-07-21 15:39:21 · 872 阅读 · 0 评论 -
uni-appH5端canvas压缩图片
实现原理要想使用JS实现图片的压缩效果,核心API就是使用canvas的drawImage()方法。Canvas本质上就是一张位图,而drawImage()方法可以把一张大大的图片绘制在小小的Canvas画布上,不就等同于图片尺寸压缩了?对于本案例的压缩,使用的5个参数的API方法context.drawImage(img, dx, dy);context.drawImage(img, dx, dy, dWidth, dHeight);context.drawImage(img, sx, sy, s原创 2020-07-15 11:18:33 · 2787 阅读 · 2 评论 -
uni-app 删除数组中的指定元素
删除数组中的指定元素var index0 = this.imageList.findIndex(item => { if (item.imageName == e.imageName) { return true } }) this.imageList.splice(index0, 1)原创 2020-07-15 11:17:54 · 18178 阅读 · 0 评论 -
iOS手机竖着拍的照片被旋转了90°的原因以及解决方案
最近项目发现ios竖屏拍照上传图片文件时候,照片自动选中为横屏。经过测试发现,只有iOS手机竖着拍的照片才会出现这样的问题,而iOS手机横着拍的照片、Android手机拍的照片以及通过屏幕截图、网络下载等途径获得的图片都不会产生这个问题。经过查找资料发现需要引入了一个叫做 exif.js 的库来实现旋转角度的纠正,它提供了js读取图像的原始数据的功能扩展,例如:拍照方向、相机设备型号、拍摄时间、ISO 感光度、GPS 地理位置等数据。而拍照方向就是关键所在!exif.js 获取图像的拍照方向的代码如下翻译 2020-07-14 15:30:55 · 6746 阅读 · 0 评论 -
uni-app onBackPress返回事件逻辑处理
onBackPress(event) 生命周期函数。onBackPress(event) 返回 event ={from: backbutton | navigateBack}说明:当用户进行以下操作时,会触发该函数:Android 实体返回键 (from = backbutton)顶部导航栏左边的返回按钮 (from = backbutton)返回 API,即 uni.navigateBack() (from = navigateBack)注意事项:函数中返回值为true 时, 表示翻译 2020-07-14 14:06:06 · 25861 阅读 · 0 评论 -
uniapp 解决暴力点击触发事件
1.先创建一个文件交common文件在文件下面创建一个common.js文件内容如下// 处理多次点击方法function dianji(fn) { let that = this; if (that.onoff) { that.onoff = false; fn(); setTimeout(function () { that.onoff = true; }, 1500) } else {原创 2020-07-11 09:33:32 · 4624 阅读 · 1 评论 -
uni-app 全局变量的实现方式
方法1:公用模块定义一个专用的模块,用来组织和管理这些全局的变量,在需要的页面引入。注意这种方式只支持多个vue页面或多个nvue页面之间公用,vue和nvue之间不公用。示例如下:在 uni-app 项目根目录下创建 common 目录,然后在 common 目录下新建 helper.js 用于定义公用的方法。const websiteUrl = 'http://uniapp.dcloud.io'; const now = Date.now || function () { re原创 2020-07-07 15:05:44 · 627 阅读 · 0 评论 -
uniapp 返回上一页并刷新页面数据
一、page.json文件中配置返回按钮 { "path": "pages/xxx/xxx", "style": { "navigationBarTitleText": "礼品上交", "app-plus": { "titleNView": { "buttons": [{原创 2020-07-07 11:08:06 · 12672 阅读 · 1 评论 -
uni-app 滚动tab导航
view 布局:<view class="uni-tab-bar"> <scroll-view scroll-x class="uni-swiper-tab"> <block v-for="(tab,index) in tabBars" :key="tab.id"> <view class="swiper-tab-list" :class="{'active':tabIndex==index}" @tap="tabtap(ind原创 2020-06-28 09:20:16 · 1592 阅读 · 0 评论 -
uni-app 动态绑定图片
动态绑定图片::src="item.userpic"<image :src="item.userpic" mode="widthFix" lazy-load></image>原创 2020-06-28 08:58:58 · 9555 阅读 · 1 评论 -
uni-app列表渲染
循环二维数组 -页面: <view class="font" v-for="(val1,index1) in list3" :key="index1"> <view class="font">{{val1.name}}</view> <view class="font" v-for="(val2,index2) in val1.list" :key="index2"> {{i原创 2020-06-02 15:55:25 · 3139 阅读 · 0 评论 -
快速了解uni-app(html、vue、小程序的区别)
uni-app 官网传统的h5只有1端,即浏览器。而uni-app可跨7端,虽仍属前端,与传统h5有不同。网络模型的变化以前网页大多是b/s,服务端代码混合在页面里;现在是c/s,前后端分离,通过js api(类似ajax的uni.request)获取json数据,把数据绑定在界面上渲染。文件类型变化以前是.html文件,现在是.vue文件文件内代码架构的变化以前一个html大节点,里面有script和style节点;<!DOCTYPE html> <html>原创 2020-06-02 14:34:18 · 5930 阅读 · 1 评论 -
uni-app 登录功能(2)
主要介绍模块:1.账号 注册2.账号登录运行项目进入启动页main.vue.index.js文件中初始化hasLogin状态为false。main.vue页面提示登录。1.index.js文件中定义登录状态false:2.main.vue中判断是否登录。登录则显示页面,否则提示跳转至login.vue页面登录。3.login页面登录页面-》注册功能...原创 2020-06-02 11:57:22 · 7360 阅读 · 1 评论 -
uni-app 登录功能(1)
如何使用vuex管理登录状态以项目登录模板代码为例进行分析:1.新建store->index.js文件vuex分为state,getter,mutation,action四个模块。vuex是根据需求定义一些全局变量,但是我们必须通过store去访问和修改它。state:定义变量。getters:获取变量。mutations:同步执行对变量进行的操作。actions:异步执行对变量进行的操作。2.main.js中注册store3.在关联的显示页面(main.vue)引用状态变量提原创 2020-06-02 11:06:16 · 4493 阅读 · 0 评论 -
uniapp 条件渲染
条件语句:v-if v-else-if v-elsev-show示例代码<template> <view> <template v-if="isshow"> <view class="content"> <view class="box" v-if="(age>20)">{{ age>30?'中年人':'年轻人' }} {{age}}</view>原创 2020-05-30 16:56:48 · 1305 阅读 · 0 评论 -
uni-app中的css3选择器使用
css3选择器使用1.页面布局<view> <view class="box"> <text>text组件</text> <view>我是一号</view> <view>我是二号</view> <view>我是三号</view> <view>我是四号</view> <view>我是五号</view> </原创 2020-05-30 14:39:43 · 4737 阅读 · 0 评论 -
vue 判断某个时间小于当前时间
vue 判断某个时间小于当前时间<view v-if="new Date().getTime()>new Date(user.allowTime).getTime()"> 显示</view>原创 2020-05-29 14:16:31 · 6114 阅读 · 0 评论 -
vue scoped属性的作用
当style标签具有该scoped属性时,其CSS将仅应用于当前组件的元素。作用功能:实现组件的私有化,不对全局造成样式污染,表示当前style属性只属于当前模块虽然方便但是我们需要慎用,因为当我们使用公共组件时会造成很多困难,增加难度,想知道造成那些难度,需要先从scoped实现原理了解实现原理:通过观察DOM结构可以发现:vue通过在DOM结构以及css样式上加上唯一的标记,保证唯一,达到样式私有化,不污染全局的作用,如图,样式属性上也会多一个该字符,以保证唯一可以看出加上scoped后的组转载 2020-05-29 08:58:47 · 3290 阅读 · 0 评论 -
uni-app事件处理(冒泡效果问题)
uni-app事件处理在input和textarea中的change事件会被转为blur事件.踩坑注意:上述列表中没有的原生事件也可以使用,详情参考hcoder给出的文档事件修饰符注意: Vue中的事件修饰符在uni-app中有以下问题stop-----------------使用stop可以阻止冒泡,但是会把一个事件绑定成非冒泡状态,会导致该元素上的catchEventName失效.prevent-------------uni-app中基本没有什么默认事件,所以prevent阻止默认事原创 2020-05-22 18:06:01 · 2736 阅读 · 0 评论 -
uni-app集成钉钉应用配置
钉钉多端统一jsapi新特性:除了兼容现钉钉开放平台提供的jsapi的特性,还支持以下下特性1.支持返回原生Promise2.支持模块化引入api,模块化引入平台3.支持dd.checkJsApi, 用于检测当前环境是否支持此jsApi4.提供dd.on, dd.off来绑定事件,用于同一绑定事件,替代document.addEventListener,document.removeEventListener5.添加dd.env来读取当前环境变量6.支持typescript的接口定义npm原创 2020-05-18 09:23:39 · 5318 阅读 · 0 评论 -
uni-app 打包H5项目
配置uni-app 命令打包1.启动服务npm run serve2.编译项目npm run build %H5%3.启动项目查看效果npm run buildcd distcd buildcd h5live-server --port=8099http://127.0.0.1:8099/#/pages/appLogin/index效果原创 2020-05-13 09:42:06 · 7467 阅读 · 0 评论 -
学习笔记 (7)父子组件之间传值
组件的通讯父组件给子组件传值子组件通过props来接受外界传递到组件内部的值props: ['msg']<template> <view> 这是一个自定义组件 {{msg}} </view></template><script> export default { props: ['msg'] }</s...原创 2020-04-25 11:08:44 · 185 阅读 · 0 评论 -
学习笔记 (6) uni-app中组件的创建
uni-app中组件的创建在uni-app中,可以通过创建一个后缀名为vue的文件,即创建一个组件成功,其他组件可以将该组件通过impot的方式导入,在通过components进行注册即可创建login组件,在component中创建login目录,然后新建login.vue文件在其他组件中导入该组件并注册import login from "@/components/test/t...转载 2020-04-25 10:08:23 · 599 阅读 · 0 评论 -
学习笔记 (5) uni-app 中的导航跳转
uni中的导航跳转利用navigator进行跳转跳转到普通页面<navigator url="/pages/about/about" hover-class="navigator-hover"> <button type="default">跳转到关于页面</button></navigator>跳转到tabbar页面<nav...转载 2020-04-25 09:44:31 · 472 阅读 · 0 评论 -
学习笔记 (4) uni-app 下拉刷新
下拉刷新开启下拉刷新在uni-app中有两种方式开启下拉刷新需要在 pages.json 里,找到的当前页面的pages节点,并在 style 选项中开启 enablePullDownRefresh通过调用uni.startPullDownRefresh方法来开启下拉刷新通过配置文件开启创建list页面进行演示<template> <view> 杭州...原创 2020-04-25 09:37:13 · 473 阅读 · 0 评论 -
学习笔记 (3) uni 的生命周期
uni的生命周期应用的生命周期生命周期的概念:一个对象从创建、运行、销毁的整个过程被成为生命周期。生命周期函数:在生命周期中每个阶段会伴随着每一个函数的触发,这些函数被称为生命周期函数uni-app 支持如下应用生命周期函数:函数名说明onLaunch当uni-app 初始化完成时触发(全局只触发一次)onShow当 uni-app 启动,或从后台进入前台显...原创 2020-04-25 09:08:47 · 137 阅读 · 0 评论 -
学习笔记 (2) uni-app中的数据绑定 和 事件绑定
uni-app中的数据绑定在页面中需要定义数据,和我们之前的vue 一样,直接在data中定义数据即可。export default {data () { return { msg:'hello-uni' } }}差值表达式利用差值表达式渲染数据<view> {{msg}} </view>在差值表...原创 2020-04-25 09:04:35 · 1250 阅读 · 0 评论 -
学习笔记(1)uni-app 介绍项目目录和文件作用
pages.json 文件用来对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等manifest.json 文件是应用的配置文件,用于指定应用的名称、图标、权限等。App.vue是我们的根组件,所有页面都是在App.vue下进行切换的,是页面入口文件,可以调用应用的生命周期函数。main.js是我们的项目入口文件,主要作用是初始化vue实...原创 2020-04-24 16:20:40 · 4182 阅读 · 1 评论