![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
uni-app学习
shika233
这个作者很懒,什么都没留下…
展开
-
关于uniapp小程序在苹果手机会出现的问题
笔记1、uni-app 底部安全距离问题参考uni-app底部安全距离遮挡以及底部tabbar距离// ios底部安全距离-padding.savepadding{ padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); box-sizing: content-box;}// ios底部安全距离-bottom.savebottom原创 2022-02-25 13:11:07 · 3334 阅读 · 0 评论 -
关于uniapp微信小程序上使用uCharts图表不随着页面滚动的问题
我的一个页面有多个图表,还有v-if控制显示的两个地图,一开始页面滚动时,部分图表会固定住不随着页面滚动。自己查了一些资料,也问了一些人,折腾了几天都没有检查出问题,突然想到canvas2d这个属性,在属性描述中是为了解决层级才要加上的,自己的页面并没有层级问题,于是就把所有的canvas2d属性删掉了(默认就是false了),奇迹般的问题就解决了。应该是canvas2d开启后导致图表层级变高了,页面会出问题,所以这个属性要慎用啊。...原创 2021-11-02 11:02:05 · 3148 阅读 · 8 评论 -
uni-app微信小程序上使用ucharts地图时踩过的一些坑
地图注意事项1、使用的地图json文件从http://datav.aliyun.com/tools/atlas/下载后不要随意修改,改下城市名称(不想显示全称的可以改一下)就差不多了,不然会引发后续一系列问题(我就是嫌地图文件太大,怕加载慢所以在网上找了一份简洁的,但是被教做人最后还是乖乖用回最初的)2、不要在scrollView里使用地图!不要在scrollView里使用地图!不要在scrollView里使用地图,当然如果你用了没问题就当我没说,如果获取不到正确的currentIndex,那就是scr原创 2021-10-29 17:35:25 · 3713 阅读 · 15 评论 -
git下载uniapp+vk-unicloud前端项目后如何下载vk-unicloud插件
安装步骤1、首先进入uniapp插件市场下载插件,注意这里一定要选择client端的,不确定的自己往下找找是不是2、使用HBuilderX导入插件,然后在导入后新建的项目里找到以下文件夹,复制到你自己的项目对应位置:...原创 2021-10-15 11:09:19 · 432 阅读 · 0 评论 -
uniapp+echarts微信小程序实现中国地图
uniapp+echarts微信小程序实现中国地图前言需求问题1、按原文章步骤下载文件,没有map文件2、地图没有颜色3、tooltip文本渲染无法解析html标签前言该功能实现主要借鉴文章链接:https://www.freesion.com/article/19181219532/这里只做补充一些本人遇到的问题,可以先去看原文章需求这是我要实现的功能,因为原文章不能完全满足,所以自己再这里再做一下补充1、中国地图的展示2、颜色的深浅随着数据的大小形成一个梯度3、点击时出现提示框4、显示原创 2021-10-12 13:55:40 · 1879 阅读 · 4 评论 -
uni-app修改头像并上传头像资源到服务器
前端小白的uni-app艰难学习之路功能要实现从本地相册或拍照获取图片,然后传给后台,后台返回保存后的图片地址实现这里首先我们要了解,通过uni-app提供的chooseImage接口返回的是图片的临时路径,除了你自己的项目里,其他任何地方都没办法查看图片的,这显然是不行的,我的解决办法是通过chooseImage接口获取临时路径,然后用了插件把图片转成base64格式,然后传给后台,后台...原创 2019-05-31 18:48:40 · 11596 阅读 · 3 评论 -
uni-app 关于微信小程序分享,app微信聊天界面和朋友圈分享
前端小白的uni-app艰难学习之路微信小程序分享实现微信小程序分享和app内微信分享小程序分享很简单,我们通过button的open-type属性<!-- #ifdef MP-WEIXIN --> <button class="share-btn" open-type="share">立即分享</button> <!-- ...原创 2019-05-31 19:02:04 · 25463 阅读 · 5 评论 -
uni-app 用scroll-view实现横向滚动
前端小白的uni-app艰难学习之路实现首先是效果图下面是布局代码:<view class="bookshelf"> <view class="title"> <text>在读</text> <text class="icon icon-next fr"></text> ...原创 2019-06-06 14:44:56 · 26685 阅读 · 3 评论 -
uni-app 关于自定义标题栏时状态栏高度在不同手机的适配问题
前端小白的uni-app艰难学习之路解决在自定义标题栏时,虽然可以自由定义标题栏内容了,但我们通常又会面临着状态栏也一起塌陷的情况,在普通的手机上我们通过官方提供的css变量–status-bar-height来设置,下面是官方给出的解决办法在注意里也提到了微信小程序环境下iPhoneX是需要判断机型来设置高度的/* iPhone X in portrait & landscap...原创 2019-06-04 17:46:18 · 22510 阅读 · 0 评论 -
关于uni-app真机运行时遇到的坑
前端小白的uni-app艰难学习之路问题因为开发的项目要求是要在小程序,Android都要能够运行,平时写页面时在小程序上检查够用了,但是一旦和后台数据对接时,就会发现一个微信开发者工具已经不能满足我们了,就好比登录的时候,想要第三方登录,但是微信开发者工具只支持微信登录,浏览器根本不支持该接口,那么我们就必须要有一个Android平台了,看了模拟器的安装流程后,当然是果断的选择真机调试啦。当...原创 2019-05-18 11:19:09 · 29740 阅读 · 2 评论 -
如何在uni-app中引入iconfont图标
如何在uni-app中引入iconfont图标step1在iconfont中找到你要的图标,这里和vue其他地方引用的步骤一致,如果是第一次使用iconfont请自行百度使用方法,因为我一直使用的在线链接方式引入,所以这里也只介绍这种方式引入uni-appstep2把下面的代码放在app.vue里面 /* icon图标 */ @font-face { font-family...原创 2019-03-19 09:55:57 · 12825 阅读 · 8 评论 -
在uni-app中使用vuex
新建文件在项目的根目录下新建一个store文件夹,然后在文件夹下新建一个index.js文件引入vue,vuex在新建的index.js下引入vue和vuex,具体如下:然后在main.js中注册:做完这些操作你就可以在uni-app中愉快地使用vuex使用定义常量,然后导出,具体使用方式可以去看vuex使用方法,这里就简单说一下然后就是在其他文件中使用了我一般是在页面...原创 2019-03-26 11:19:12 · 14151 阅读 · 2 评论 -
uni-app打包成微信小程序后再开发运行时微信开发者工具没反应
前端小白的uni-app框架的艰难学习之路问题打包过的uni-app项目,想要继续开发,却发现一直都提示编译完成,而微信开发者工具也没有反应,不像未打包之前保存即刷新,这个问题我困扰了许久,后来终于发现了问题所在解决我们在打包成功以后,项目下的unpackage文件夹下的dist文件夹下会多出一个build文件夹,不知道大家刚开始接触uni-app的时候有没有发现,这个文件夹在打包之前是没...原创 2019-03-30 12:28:21 · 20048 阅读 · 4 评论 -
uni-app如何解决微信小程序给图片设置固定宽高但发生变形的问题
前端小白的uni-app艰难学习之路问题在开发过程中我发现,有时会遇到明明图片宽高设置的是相同的值,但在运行后图片却并没有显示出相对应的效果,反而看起来宽高非常不成比例,如以下示例:最终效果:可以看到,这并不是我们想要的结果,经过我反复调试,最后发现想要达到我们预期的效果(宽高相等即为正圆或正方形)也是非常简单的!解决第一步: 我们需要给图片加一个父view组件(一开始我也是没有...原创 2019-04-04 13:05:13 · 10801 阅读 · 5 评论 -
uni-app如何在写微信小程序时调用getLocation接口获取用户位置信息
前端小白uni-app的艰难学习之路授权配置开发过程中,需要在unpackage>>dist>>dev>>mp-weixin>>app.json中加入如下配置:这是因为微信小程序从2019年1月14日起新提交发布的版本若未填写地理位置用途说明,则将无法正常调用地理位置相关接口注意!上面的配置是非常关键的一步!调用授权接口首先需要调用un...原创 2019-03-30 19:01:02 · 17283 阅读 · 0 评论 -
uni-app如何动态绑定背景图片资源
前端小白的uni-app艰难学习之路问题有时候我们需要一个功能就是背景颜色需要随着传入的图片改变而改变,这时我们肯定是不能把背景图片的引入放在css里面了,那么就只有想着怎么去动态引入它解决其实想通了也是非常简单的,首先我们想到的应该是给需要添加背景图的元素绑定style属性,然后给background-image绑定值,然后就要注意了,我们在style表里写的时候都是用url(‘图片路径...原创 2019-04-30 10:39:57 · 14217 阅读 · 5 评论 -
在uni-app写获取验证码倒计时
前端小白的uni-app艰难学习之路方法其实要实现这个功能原理非常简单,就是setInterval+setTimeout+clearInterval结合使用,首先在data里定义一个变量second,初始值为60,然后在setInterval里执行每秒减1的操作,setTimeout在60秒后执行clearInterval清除定时器的操作,话不多说,先上代码:getCode: functio...原创 2019-05-08 18:23:38 · 7063 阅读 · 2 评论 -
使用uni-app的checkbox-group自定义不超过5个的多选
前端小白的uni-app艰难学习之路问题在开发过程中,我遇到了这样一个功能,用户只能选择不超过5个的选项,看似简单的功能,但却花了我大量的逻辑关系才勉强做出来,功能是实现了,但是代码看着比较繁琐,不过我实在找不到更好的办法了,如果有路过的大神有更好的办法希望可以不吝赐教解决1、先写布局<checkbox-group class="content-class" @change="ch...原创 2019-05-08 19:03:56 · 7438 阅读 · 9 评论 -
uni-app 超简单原理实现小说阅读分页功能
前端小白的uni-app艰难学习智力原理用到的主要原理有:分页原理利用高度截取后台传过来的数据内容利用高度实现完美分割在uni-app中,有这样一个接口通过它我们可以获取一些元素信息,比如宽高,下面是我需要获取的东西:<view class="content-text" id="box" :style="{height: boxHei...原创 2019-05-25 18:46:41 · 8904 阅读 · 2 评论 -
uni-app底部导航tabBar的使用
uni-app的艰难学习之路step1—学习官网说明:官网>配置>page.json>tabBarstep2—使用1、在pages中新建文件2、在pages.json文件里写配置代码{"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages { "pa...原创 2019-03-19 14:01:15 · 97539 阅读 · 13 评论