
uni-app
圣剑Jay
这个作者很懒,什么都没留下…
展开
-
uni-app实现再次返回退出应用时不退出应用而是在后台运行
如果APP需要后台驻留,用户返回到首页时会提示退出操作,我们可以不退出而是隐藏至后台,这样的话APP就会在后台运行,以下代码须写在main.js里面,弹出的内容可自定义设置。let main = plus.android.runtimeMainActivity();//为了防止快速点按返回键导致程序退出重写quit方法改为隐藏至后台 plus.runtime.quit = function() { main.moveTaskToBack(false);};//重写toast方法如果内容为转载 2021-03-23 22:15:46 · 2214 阅读 · 0 评论 -
uni app 视频播放功能
视频播放功能,需求:编译成纯h5网页,运行在任意容器里,如浏览器、安卓原生和iOS等媒体组件video首先使用video组件,然后高度需要自己设置uni.createVideoContext官方新建的uni app 的demo工程,this.context.requestFullScreen 全屏是通过按钮点击的执行的,我需要一进入应用就全屏,实际执行代码无效果,最后改成动态绑定屏幕高度值,也能实现。onReady() { this.context = uni.createVideoCo原创 2020-12-05 20:40:12 · 26898 阅读 · 2 评论 -
uni app 多tab子页面v-show缓存
顶部tabbar点击,下面item内容切换,最好效果肯定是,点击一个加载一个,加载过的无需重新再次重新加载用v-if ,没有缓存效果用v-show ,则页面加载的时候,所有的item页面生命周期的初始创建方法全部都执行,违背了点击一个加载一个的初衷(v-show不可见,但是依然会加载执行 )那就用一个数组tabArr存储点击加载过的页面index,v-if=“tabArr.indexOf(index) > -1” ,这样就能实现点击一个加载缓存一个效果。但是这样也会发生点击过的页面都重叠在一原创 2020-12-05 17:49:16 · 1971 阅读 · 0 评论 -
uni app 文本文字分两行显示,超出用省略号表示
通过css设置文字强制不换行超出用省略号表示很简单:{ white-space: nowrap; 文本强制不换行; text-overflow:ellipsis; 文本溢出显示省略号; overflow:hidden; 溢出的部分隐藏;}如果要想显示两行,超出用省略号表示{ overflow: hidden; -webkit-line-clamp: 2; text-overflow: ellipsis; display: -webkit-b转载 2020-11-13 23:52:44 · 16457 阅读 · 0 评论 -
uni app 根据绑定数据显示文本
uni app 根据绑定数据显示文本服务器返回异常数据时,自动过滤判断显示另: 如何在文本为空情况下,可以占位,让页面显示正常用& nbsp;替换文本显示,能占位且不显示。<template> <view> <view>{{!isEmpty(show)?show:''}}</view> <view>{{!isEmpty(show2)?show2:' '}}</view> <view&原创 2020-11-08 01:27:45 · 1557 阅读 · 0 评论 -
uni app数据绑定
uni app数据绑定例子中,对v-if进行了绑定,显示和隐藏变量是 v-if=“haha”计算属性是 v-if="!specialJud"方法是 v-if=“specialJudge()”注意:变量和计算属性,不带(),函数方法必须带()另外导入外部的jsvar isEmpty = require(’./util.js’).isEmpty;无法 v-if="isEmpty()"使用必须methods定义方法才能绑定然后调用 v-if="misEmpty()"使用method原创 2020-11-08 00:59:49 · 435 阅读 · 0 评论 -
uni app @click 传递参数及获取到事件对象
v-on:click 等价于 @click$event 等于自己1、点击事件方法不带参数,此时默认就带 $event参数(事件对象)@click=“goToPage” 等价于 @click=“goToPage($event)”methods{ goToPage(e){ console.log(e)//此时e打印出来是事件对象 }}2、带参数,事件对象就没了 @click=“goToPage(12)”methods{ goToPage(e){ conso..原创 2020-11-07 14:44:50 · 17180 阅读 · 4 评论 -
uni app预览static目录下图片
uni app预览图片,,可以选择static目录下图片var index = 0;uni.previewImage({ urls: ['../../../../static/img1.jpg', '../../../../static/img2.jpg'], current: index, longPressActions: { itemList: ['发送给朋友', '保存图片', '收藏'], success: function(data) { console.log('选中原创 2020-10-21 00:15:48 · 5016 阅读 · 0 评论 -
uni app vue 设置页面背景色
vue页面设置页面背景色,总是无法充满页面高度最关键代码一句,min-height: 100%;page { width: 100%; background-color: #f6f6f6; min-height: 100%; }原创 2020-10-21 00:06:08 · 1697 阅读 · 0 评论 -
uni app页面传参decodeURIComponent
1、项目中如果我们传的参数出现#,/,&这些字符,这些特殊字符会导致我们接收参数的错误2、必须要用 encodeURIComponent 编码,目标页面进行 decodeURIComponent 解码3、如果是对象,对象先转json字符串var object_string = encodeURIComponent(JSON.stringify(object)目标页面,转回对象var object = JSON.parse(decodeURIComponent(object_stri转载 2020-10-20 23:56:43 · 4701 阅读 · 0 评论 -
uni-app中如何重新渲染子组件
uni-app中如何重新渲染子组件 this.hackReset = false; this.$nextTick(() => { this.hackReset = true; }) 再给子组件绑定v-if="hackReset"原理是什么?再要操作子组件时进行销毁重建,这样子组件生命周期会全部更新一遍啦~~~...转载 2020-09-25 11:00:59 · 4354 阅读 · 3 评论 -
uni app v-show 隐藏组件无效
uni app v-show 隐藏组件无效nvue 暂不支持 v-show 隐藏组件,仅 v-if参考:https://ask.dcloud.net.cn/question/75598原创 2020-08-05 16:42:36 · 1562 阅读 · 0 评论 -
uni app自定义组件image图片不显示
页面目录结构pages/页面.nvuepages/custom-details/custom-details.nvue页面.vue<template> <view> <custom-details v-if="careDetailFlag"> </custom-details> </view></template><script> import customDetails from './cu原创 2020-08-04 13:12:44 · 3796 阅读 · 1 评论 -
uni app混合开发,使用5+ video标签,云端打包可以正常播放,本地打包无法正常播放
uni app混合开发,使用5+ video标签,云端打包可以正常播放,本地打包无法正常播放media-release.aar 按照官方要求已经添加,依然无效weex_videoplayer-release.aar 这个库也需要加视频立刻可以正常播放了...原创 2020-07-25 17:15:47 · 1888 阅读 · 3 评论 -
使用 Weex/nvue 注意事项
使用 Weex/nvue 注意事项nvue开发与vue开发的常见区别基于原生引擎的渲染,虽然还是前端技术栈,但和web开发肯定是有区别的。nvue 页面控制显隐只可以使用v-if不可以使用v-shownvue 页面只能使用 flex 布局,不支持其他布局方式。页面开发前,首先想清楚这个页面的纵向内容有什么,哪些是要滚动的,然后每个纵向内容的横轴排布有什么,按 flex 布局设计好界面。原生开发没有页面滚动的概念,页面内容高过屏幕高度并不会自动滚动,只有部分组件可滚动(list、waterfal转载 2020-07-17 23:41:21 · 1315 阅读 · 0 评论 -
hbuilder调试打印接口数据
请求服务器返回数据async uploadSaveImg(){ await uploadFile({ }).then(res=>{ console.log(res); }).catch(()=>{ })}此时如何判断 **res** 是对象还是字符串类型呢字符串类型返回如下:对象类型返回如下:有个[Obejct] 标识,,并且标识右边的内容是 可以鼠标点击的鼠标点击后查看的内容如下:...原创 2020-07-13 23:19:54 · 2297 阅读 · 0 评论 -
uni-app 实现置顶悬浮框功能
试了下,,,mu模拟器、安卓手机、iOS手机,基本兼容,,滑动也不卡顿。第三方插件地址详述App端的2种方案使用nvue页面app-nvue页面渲染在原生引擎下,支持sticky,不存在浏览器兼容问题,可直接使用。本示例就是基于nvue的示例,全端可实现粘性布局。对一个列表头设置position: sticky,并且设置距离顶部多少开始吸顶,即同时设置top值,即可实现滚动到距离...原创 2020-04-21 19:07:58 · 6636 阅读 · 0 评论 -
关于uniapp css背景图不能用本地文件的解决办法
1.小于40kb的直接这样设置,2.图片大于40k可以自己转化转化base64生成图片base64字符串,拷贝到项目中,代码如下<template> <view class="container" :style="{backgroundSize: 'cover'}"> </view></template><script&g...原创 2020-04-11 00:15:29 · 1486 阅读 · 0 评论 -
uni app 自动化索引列表
uni app 自动化索引列表,官方推荐的第三方插件https://ext.dcloud.net.cn/plugin?id=375[{ "letter": "A", "data": [ "阿克苏机场", "阿拉山口机场", "阿勒泰机场", "阿里昆莎机场", "安庆天柱山机场", ...原创 2020-03-21 16:24:30 · 36264 阅读 · 0 评论 -
main.js 中挂载属性/方法,nvue 中无法使用
import {myRequest} from './util/api.js'Vue.prototype.$myRequest = myRequest挂载 Vue.prototype将一些使用频率较高的常量或者方法,直接扩展到 Vue.prototype 上,每个 Vue 对象都会“继承”下来。注意这种方式只支持vue页面.vue 和 .nvue 并不是一个规范,因此一些在 .vue ...原创 2020-03-21 15:32:46 · 4486 阅读 · 1 评论 -
uni app性能优化建议
运行原理逻辑层和视图层分离,且非H5端通信有折损uni-app 在非H5端运行时,从架构上分为逻辑层和视图层两个部分。逻辑层负责执行业务逻辑,也就是运行js代码,视图层负责页面渲染。虽然开发者在一个vue页面里写js和css,但其实,编译时就已经将它们拆分了。逻辑层详解逻辑层是运行在一个独立的jscore里的,它不依赖于本机的webview,所以一方面它没有浏览器兼容问题,可以在Andr...转载 2020-03-21 09:22:42 · 11078 阅读 · 1 评论 -
uni-app实现文件上传功能
uni-app实现文件上传功能目前找到的比较好用的一款第三方插件文件上传插件地址 https://ext.dcloud.net.cn/plugin?id=1015插件下载选择下载示例项目zip ,可以直接运行项目查看效果目录结构如下index.vue,是使用文件上传功能的当前页面@up-success=“onSuccess” 是文件上传成功以后回传的数据<template...原创 2020-03-17 23:53:40 · 44728 阅读 · 8 评论 -
nvue不同编译模式介绍
HBuilderX 自 2.0.3+ Alpha 版本开始,nvue文件同时支持两种编译模式:weex 模式:老模式,使用 weex组件,写法同weex标准写法。只能在 App 端中运行,部分 uni-app Api不能使用。如果没有配置,默认是weex模式。uni-app 模式:新模式,改用 uni-app 基础组件,写法同uni-app。目前已支持大部分组件;支持app.vue里...转载 2020-03-17 21:32:44 · 2632 阅读 · 0 评论 -
uni-app export与export default用法
文件:api.js定义公共方法main.js引入api,定义全局变量和方法login.vue 为某个具体页面export例子api.jsexport const BASE_URL = 'http://112.1.1.1';mian.jsimport {BASE_URL} from './util/api.js'Vue.prototype.$BASE_URL = BASE_...原创 2020-03-16 23:39:46 · 10665 阅读 · 0 评论 -
flutter、rn、uni-app比较
前言每当我们评估新技术时要问的第一个问题就是“它会给我们的业务和客户带来哪些价值?”,工程师们很容易对闪闪发光的新事物着迷,却经常会忽略这些新事物其实可能对我们的客户没有任何好处,反而只会让现有的工作流程更加复杂。flutter最近比较热闹,毕竟是Google出品。但我们不是炒作热点的媒体,也不是忽悠你交学费的培训机构,我们作为实际的跨平台开发者,冷静的分析下这个东东。flutter是...转载 2020-03-02 21:49:02 · 2160 阅读 · 2 评论 -
使用 Weex/nvue 注意事项
uni-app App端内置 weex 渲染引擎,提供了原生渲染能力。uni-app 里根据编译配置不同,可以使用 weex 的组件,也可以使用小程序组件(即uni-app组件)nvue 相当于给 weex 补充了大量 uni-app 的组件和api,以及丰富的 Plus API、Native.js、原生插件。以往的 weex ,有个很大的问题是它只是一个高性能的渲染器,没有足够的API能力...原创 2020-03-01 23:55:08 · 779 阅读 · 0 评论 -
uni-app 全局变量的几种实现方式
uni-app 全局变量的几种实现方式公用模块定义一个专用的模块,用来组织和管理这些全局的变量,在需要的页面引入。注意这种方式只支持多个vue页面或多个nvue页面之间公用,vue和nvue之间不公用。示例如下:在 uni-app 项目根目录下创建 common 目录,然后在 common 目录下新建 helper.js 用于定义公用的方法。const websiteUrl = 'ht...转载 2020-02-24 23:48:29 · 390 阅读 · 0 评论