分类：uniapp

2022
05-12

uniapp动态修改元素节点样式详解

目录一，通过style属性绑定来修改html:对应的js:实现的效果：二，利用ref来获取dom元素节点代码：实现的效果：总结一，通过style属性绑定来修改第一步：肯定是需要获取元素节点在uniApp项目中没有windouw对象，所以通过document不能直接获取dom节点，vue的refs只对自定义组件有效，对uniapp中的标签不生效。查看uniapp官网有一个uni.createSelectorQuery()API；可以通过这个属性获取标签的样式，在通过动态绑定样式来修改；html:... 继续阅读 >

2022
04-30

uniapp项目优化方式及建议

目录1.复杂页面数据区域封装成组件2.避免使用大图3.小程序、APP分包处理pages过多4.图片懒加载5.禁止滥用本地存储6.可在外部定义变量7.分批加载数据优化页面渲染8.避免视图层和逻辑层频繁进行通讯9.CSS优化10.善用节流和防抖11.优化页面切换动画12.优化背景色闪白13.优化启动速度14.优化包体积15.禁止滥用外部js插件1.复杂页面数据区域封装成组件场景：例如项目里包含类似论坛页面：点击一个点赞图标，赞数要立即+1，会引发页面级... 继续阅读 >

2021
08-11

分析uniapp如何动态获取接口域名

背景接口域名没有写死，而是动态获取。具体实现就是通过读取一个静态json文件，来设置真实的接口域名。好处是原域名有可能被封，这样可以直接后台操作修改该配置文件即可；不然的话，h5项目可能还好说，app的话必须重新发版。代码//httpService.js对uni.request的封装。在数据请求入口处，统一先进行域名获取，即执行config.requestRemoteIp方法importconfigfrom'@/config'importVuefrom'vue'importcacheDatafr... 继续阅读 >

2021
08-08

分析uniapp入门之nvue爬坑记

目录前言HelloWorldimage设置border-radius设置真实像素引入外部的css使用ttf字体文件vue打开nvue时传递参数仿微信朋友圈效果前言uni-app是DCloud出品的新一代跨端框架，可以说是目前跨端数最多的框架之一了，目前支持发布到：App（Android/iOS）、H5、小程序（微信小程序/支付宝小程序/百度小程序/字节跳动小程序），目前市面上类似的框架还有：Taro（京东出品）、Megalo（网易出品）。weex支持的东西，在nvue里大... 继续阅读 >

2021
08-08

详解uniapp无痛刷新token方法

前端在请求接口时,和后端定义好了,如果状态码为401,则表明token过期,需要前端请求新的token大概流程如下:1.用户登录之后,后端会返回两个token,分别为accessToken和refreshToken存储到Storage平时请求数据时,请求头使用accessToken来发送接口2.当返回401token过期后,我们通过接口向后端获取新的token,请求参数为refreshToken3.我们拿到新的accessToken和refreshToken之后,替换掉之前的Storage中存储的token4.同... 继续阅读 >

2021
08-08

如何用uni-app实现顶部导航栏显示按钮和搜索框

最近公司准备做app，最终决定使用uni-app框架开发，但是当把设计图给我的时候我心里有点没底，因为他的设计图顶部长成这个样子：因为这个功能在小程序是根本无法实现的，可能受这个影响，我感觉好像实现不了，但是我还是回头看了看文档，才发现，这个功能是可以实现的，只需要在pages.json中做一些配置即可这个在官方称作app-plus,可以自定义导航区域，具体配置如下："pages":[{"path":"pages/index/index",... 继续阅读 >

2021
01-17

关于uniApp editor微信滑动问题

uniapp小程序在微信下会出现类似下拉问题解决方法是在app.vue的页面onLaunch方法内添加禁止下滑方法this.$nextTick(()=>{document.body.addEventListener("touchmove",this.addBodyTouchEvent,{passive:false});});问题解决后在uniApp的editor组件内无法滑动解决方法data内添加这两个值添加touchstart和touchend方法手动写滑动效果touchstart(e){this.previewScrollTop=e.touches[0].pageY;},touchend(e){letdistance... 继续阅读 >

2021
01-14

uniapp H5 https跨域请求实现

什么是跨域跨域是浏览器的专用概念，指js代码访问自己来源站点之外的站点。比如A站点网页中的js代码，请求了B站点的数据，就是跨域。A和B要想被认为是同域，则必须有相同的协议（比如http和https就不行）、相同域名、和相同端口号（port）。如果你是做App、小程序等非H5平台，是不涉及跨域问题的。由于uni-app是标准的前后端分离模式，开发h5应用时如果前端代码和后端接口没有部署在同域服务器，就会被浏览器报跨域。本文主要介绍u... 继续阅读 >

2021
01-12

详解uniapp的全局变量实现方式

前言本文整理了一些uniapp全局变量的实现方式，细节知识来自于uView官网中对uniapp中的全局变量实现，感兴趣的同学可以前往uView官网搜索vuex进行查看全局变量的实现方式一般来说在uniapp中有以下几种方式本地存储配置文件挂载到Vue.prototypeglobalDatavuex下面对这5种方式的实现进行介绍本地存储永久存储，以app为例即使该应用被关闭，该数据依然会被存储这是一种永久的存储方式，类似于web的LocalStorage(有关于Coo... 继续阅读 >

2020
10-23

uniapp实现可滑动选项卡

本文实例为大家分享了uniapp实现可滑动选项卡的具体代码，供大家参考，具体内容如下tabControl-tag.vue<templatename="tabControl"><scroll-viewscroll-x="true":style="'background-color:'+bgc+';top:'+top+'px;'":class="fixed?'fxied':''":scroll-left='scrollLeft'scroll-with-animationid="tabcard"><viewclass="tabList":style="isEqually?'display:flex;justify-content:space-between;padding-left:... 继续阅读 >

2020
10-08

uniapp 仿微信的右边下拉选择弹出框的实现代码

在百度找了很多没有找到满意的这里根据自己的需求抽取一个组件这个组件主要是包括搜索框和右边菜单点击弹出一个下拉筛选菜单这里首先用一个单独的页面存放这个组件<template>//这里是搜索框的输入框不需要的可以删掉<view><viewclass="arrivalSearch"><viewclass="arrivalSmallsearch"><viewclass="arrivalSearchInput"><inputtype="text":placeholder="dateinit"></view>//这里是输入框旁边的图标（这里... 继续阅读 >

2020
10-08

uniapp与webview之间的相互传值的实现

1.uni-app如何发送数据到H5？其实很接单、在web-view中只需要通过URL就可以向H5进行传参例如在uni-app中：<template><viewclass="advertisement"style="width:100%;"><web-view:src="url"@message="message"></web-view></view></template><script>exportdefault{data(){return{url:'/hybrid/html/local.html?data='};},onLoad(data){<br>//这里对要... 继续阅读 >

2020
10-07

使用 UniApp 实现小程序的微信登录功能

1.微信登录思路：在main.js中封装公共函数，用于判断用户是否登录在main.js中分定义全局变量，用于存储接口地址如果没有登录、则跳转至登录页面进入登录页面通过wx.login获取用户的code通过code获取用户的SessionKey、OpenId等信息【本应后台接口、但是此处使用js发送请求】通过openId调用后台Api获取用户的信息获取成功，则说明已经授权过了,直接登录成功获取失败，则说明没有授权过，需要授权之... 继续阅读 >