
uniapp
yunchong_zhao
这人比较懒,不喜欢写简介
展开
-
uniapp h5端上传附件信息(非图片类) 到七牛
我们应该用的是 uni.chooseFile 这个api 这个api 就支持h5端。因为我们从后段接口中 拿到 七牛的上传地址和token 然后就可以使用 uni.uploadFile 这个api进行上传即可。其实这个 本来不应该在移动端上传,比如上传什么视频啊,.doc,.zip等文件的时候,应该是在pc端上传,uni.chooseImage 这个api 但是上传附件呢 这个api明显不行的呢。我们选择上传的附件的时候 可以进行选择要支持的上传类型哈。但是吧奈何还是会有在移动端上传 这些文件的可能哈。原创 2022-09-16 09:12:30 · 877 阅读 · 2 评论 -
uniapp h5使用原生的input标签
其实在uniapp中我们编译h5平台的时候,会发生我们使用input标签都会被二次封装,我们想给这个input原生标签加的类名和id都会加到最外层的包括的uni-input自定义标签上。我看有人问过 为啥不加个什么属性,放置进行编译,好像人家说那样做的话 表现的和文档就有所不同了 所以才不那样做。有没有什么方法 能防止它被转义呢,目前好像没有有点难受,呢。总体上来说 uniapp 还是很不错的。但是我们可以通过其他的方式。关注我 持续更新前端知识。原创 2022-08-24 16:56:34 · 2268 阅读 · 1 评论 -
ios safari处理偶尔点击事件没有触发的情况(有用),附上禁止放大
苹果用户经常反馈 我经常要点击好几次才进去不管是使用 @tap @click都不行什么样式上 加 cursor pointer 什么委托都试了试都不行最后试了试 touch事件 才发现可以解决我的问题。难受最好在移动端还是使用touch事件比较好@touchend 我就是用的这个事件处理好了最后附上一个 也是经常碰见的坑就是 ios10以上双手和双击还是可以放大的问题万能的网友<script> window.onload = function () { // 阻止双击原创 2022-03-23 20:40:40 · 1416 阅读 · 0 评论 -
uniapp 实现无感刷新token, 适应大多数项目
不管你是用taro uni 还是vue-cli 或者 react-cli 刷新token这块一通百通 本质上 都一样我之前讲了一个是 在响应拦截哪里做token刷新 其实这样做还是不好的,因为这样我们发起了请求, 相对来说 还是在请求之前做比较好 那样可以避免 几次请求吧因为在 axis 中有帮我们处理的拦截器 在uniapp 中也需要我们做一个拦截器这里直接使用uniapp插件市场找到的一个。 但是其中很多我们可能用不到 我就给删减了很多。在common下创建一个 http.js我这里的是最简原创 2022-03-10 16:33:46 · 7944 阅读 · 2 评论 -
vue-cli创建的unapp 项目 引入和使用uview框架 支持sass
使用hbuilderX创建的项目 确实比较方便 但是确实限制了很多东西。我想自定义一些打包或者环境 对我来说有点不舒服所以我还是采用了 cli的方式创建了 uni项目因为项目中引入了 uview 这个是需要 sass的支持呢 ,但是吧 cli创建的 需要你手动安装下 sass支持环境安装npm i sass-loader node-sass --save**注意如果你使用的是 vue2的话 那么最新的webpack版本是4.*, 但是我们npm默认不指认版本的话 安装的就是最新的webpac原创 2022-02-22 09:16:22 · 1289 阅读 · 3 评论 -
vue项目,uniapp中实现 金额输入框,只能输入小数点两位数字,亲测有效
看了各种文档没有实现我的要求的,只能自己手写一个了<u-field v-model="cash" @input="inputChange" type="number" label="提现金额" placeholder="最多可提现一亿元">inputChange(value) { if(value) { var price = value.toString().replace(/(?<=\.[0-9]{2})\d+/, '') this.$nextTick(() =>原创 2021-11-19 21:49:55 · 5282 阅读 · 7 评论 -
uniapp中使用拷贝,复制粘贴功能,uniapp,隐藏软键盘
本来是想做分享的呢,后来想着直接让用户点击复制然后吧当前地址搞到系统的粘贴板上,让用户自己去粘贴分享就用到了uniapp的自带apiuni.setClipboardData(OBJECT)uni.setClipboardData({ data: 'hello', success: function () { console.log('success'); }}但有个小问题就是 他复制完成之后 好像会自动弹出一个内容已经复制。还会吧软键盘弹起来 这个就很难原创 2021-11-11 18:18:31 · 2299 阅读 · 0 评论 -
uniapp中使用 base64, uniapp使用第三方插件
因为项目中要用到 base64加密和解密。 就想着之前用到的一个js-base64的插件库因为 uniapp 项目是直接通过hbuilderx创建的 默认是没有package.json文件的npm init -y先初始化一下。然后就是安装了 js-base64好像最新版本的js-base64 会抱错。require is not defined不要安装最新版本的。 而且要支持小程序版本的npm i js-base64@2.2.5 --save...原创 2021-11-11 18:13:17 · 3955 阅读 · 0 评论 -
uniapp 中自定义其他的环境变量
之前搞vue的时候 可以通过 .env的方式配置开发测试和线上需要的环境变量。这个到了uniapp中 看到 只有 development 和 production 这两个条件了process.env.NODE_ENV但是我如果需要其他的变量怎么办呢: 比如 测试 test等我看了一些网友的方式首先通过cli方式的 pass 因为我的就不是通过cli创建的再其次就是通过手动方式更改的 也不行,如果手动更改判断环境的话 还不如不要要的就是通过 npm run build:test 或者 npm r原创 2021-11-08 19:12:42 · 4056 阅读 · 9 评论 -
uview 扩展iconfont 图标库,中间碰见的一个小坑
中间怎么下载怎么使用 我就不说了 官网说的很清楚了https://www.uviewui.com/guide/customIcon.html其实官网的文档中描述的是 通过使用base64的形式引入的,你也可以把下载下来的图标转换成base64的格式 然后引入进去有个在线转换的网站https://transfonter.org/。 https://transfonter.org/主要是 引入字体的那里有个小问题 就是 他那个字体必须的是相对项目的根路径 否则就会抱找不到我的项目目录是/s原创 2021-11-04 17:02:57 · 1891 阅读 · 1 评论 -
uniapp 获取元素距离顶部的距离,实现页面滚动元素消失后悬浮在底部的效果
还是比较常见的这种效果,就是用户在页面中一直往下滚动,上面的有些操作按钮 要在滚动消失后 ,悬浮在底部 ,回去的时候重新隐藏掉这个就涉及到两个知识点了,一个就是 元素距离顶部的距离 另一个就是监听页面的滚动监听页面滚动的好说onPageScroll(e) { // e.scrollTop 获取页面的滚动高度 this.show = e.scrollTop >= this.scrollTop;},主要还是获取元素距离顶部的距离这个首先我们可以给元素设置一个标识<view id=原创 2021-11-03 17:57:24 · 5569 阅读 · 1 评论 -
uniapp h5去掉默认的顶部导航
这个uniapp运行出来的h5项目上面有一个默认导航很难受这个看起来就很奇怪了“titleNView”: false // 去掉APP、H5的顶部导航。在pages.json 配置页面中加入 这个就可以"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages { "path": "pages/index/index", "style": { "navigationBarTitleT原创 2021-10-29 20:41:22 · 5095 阅读 · 3 评论 -
uniapp 中 对nvue文件的 元素css样式的 设置问题
要在地图上搞一个输入框,我们肯定呀稍微修改下 输入框的样式这个时候 由于我们的地图是 原生组件 层级最高 所以就用subNvue 来实现 在地图上覆盖组件的功能这个时候设置样式上出了点问题<template> <div> <input class="input" type="text" value="hello world" /> </div></template><script> export def..原创 2021-02-03 15:18:38 · 6285 阅读 · 1 评论 -
uniapp 中安装使用 uView ui 框架 (适合新创建的项目,老项目的使用npm的方式更稳妥点)
哎 本来 博主 不是从事uniapp 的开发人员 但是对 uniapp的关注 还是挺上心的当年 这个ui框架出来的 那一刻 我还去 看了看 赞助了点钱呢 这框架 还是挺厉害 其实 我还是很像从事 uniapp 开发呢 奈何 所在的几家公司 都不用 尴尬了 希望下家公司会用到 吧 哈哈好了 我们 步入正题了1. 首先 就是 先去 下载 插件包https://ext.dcloud.net.cn/plugin?id=1593 2. 用 hbuil...原创 2020-12-03 21:46:10 · 1809 阅读 · 0 评论 -
uni-app设置scroll-view 横向滚动
在uni的入坑第一天就碰见一个小问题。scroll-view 可视区域滚动组件 竖向滚动好说// 给scroll-view设置一个高度就可以<scroll-view scroll-y="true"> <view class="item1"> </view> <view class="item2"> </view>...原创 2020-05-08 13:58:31 · 12847 阅读 · 0 评论 -
uni-app中cover-view覆盖原生组件
在uni-app中经常要做到覆盖原生组件cover-view可以做到覆盖原生组件举个例子我们在video标签中 在页面上添加一个控制播放的按钮<video id="myVideo" class="video" objectFit="cover" :src="imgSrc'" :controls="false"> <cover-vi...原创 2020-02-18 15:45:38 · 17761 阅读 · 4 评论 -
uni-app中视频标签铺满父元素
如果使用视频直接引入标签之后会发现视频播放的时候两侧有黑色的背影并不是铺满的<view class="player"> <video id="myVideo" objectFit="cover" ></video> </view>视频组件有一个 objectFit属性设置成cover就铺满了 默认是...原创 2020-02-15 18:55:42 · 3188 阅读 · 0 评论 -
uni-app中scroll-view标签 跳转到指定的位置
这是一个城市选择的界面 下面是以字母开头的城市列表 我要实现的功能 就是 点击右侧的字母跳转到指定的点击字母开头的城市首先看到的这个显示的城市是封装在一个组件 我封装到了一个 暂且 A 组件里面<view class="changeList">// scroll-into-view 跳转到指定 id的 view元素的位置 <scro...原创 2020-02-13 16:53:29 · 11627 阅读 · 0 评论 -
uniapp中使用iconfont 图标库
我们要是想使用 图标的话,快速的应用到我们的项目中1.阿里矢量图标库 作为一个前端开发人员还是要了解的今天就说一下 怎么快速应用到我的uni-app项目中第一步 选择图标点击 我的项目 没有账号的创建一个账号 登陆下搜索一个图标 添加到购物车里面添加到项目中下载至本地下载到本地 解压打开 把 iconfont.css里面的代码...原创 2020-02-10 19:12:31 · 2734 阅读 · 0 评论 -
uni-app中隐藏底部导航栏
有时候我们不需要底部导航栏,或者我们需要自己重新书写底部导航栏 可以把原生的底部导航栏隐藏掉在App.vue文件中 在声明周期函数 onLaunchonLaunch: function() { console.log('App Launch') uni.hideTabBar({}) }上述方法在 微信小程序上确实可...原创 2020-02-10 18:51:30 · 20802 阅读 · 2 评论 -
uniapp中subNvue的使用,真机环境下,在小程序模拟器中是报错的
subNvue,是 vue 页面的原生子窗体,把weex渲染的原生界面当做 vue 页面的子窗体覆盖在页面上。它不是全屏页面,它给App平台vue页面中的层级覆盖和原生界面自定义提供了更强大和灵活的解决方案。它也不是组件,就是一个原生子窗体。 大概就是实现一个这样的功能 再一个视频组件上面显示一段文字这个再微信小程序上可以使用 css样式中的 定位加堆叠实现 z-...原创 2020-02-09 12:32:04 · 10432 阅读 · 7 评论 -
uniapp 上传图片到本地node.js服务器
今天头脑一热就想做一个 图片上传的功能 刚好也学到了 uniapp的图片上传也可以把之前的node.js 知识复习下 虽然中间碰见了点问题 但还是很流畅解决 用了五六分钟好了 和往常一样 废话不多BB直接上代码1.搭建 uniapp 客户端上传代码 (注意 我这个是运行的本地 h5端的 谷歌手机模拟器)<button @click="img">上传图片<...原创 2020-01-17 13:31:28 · 3464 阅读 · 14 评论 -
uniapp 多列选择器 城市选择小demo, 2021-6-15更新
<template> <view> <pickermode="multiSelector" :range="cityList" :value="cityIndex" @change="bindCityChange"> <view> ...原创 2020-01-03 11:16:58 · 6345 阅读 · 3 评论