![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
uni-app
击败不可能
先理解、再写
展开
-
uniapp 监听路由跳转
需要实现一个每次页面跳转的时候都能触发的事件,使用 uni.addInterceptor uni拦截器实现,拦截路由跳转方法 //在app.vue的onload生命周期,打开页面就开始监听 onLoad() { let that=this; uni.addInterceptor('navigateTo', {//监听跳转 success(e) { that.watchRouter(); } }) uni.addInterceptor('redirectT原创 2022-02-08 17:39:20 · 14185 阅读 · 5 评论 -
uniapp app端根据支付宝qr链接 直接打开支付宝app支付页面
问题说明:因为客户所开通的支付授权是H5端的通过链接跳转到支付宝的页面后再打开支付宝app进行支付,这样会进行两次跳转体验不好解决:可以直接拿到支付宝支付的url拼接到支付宝链接上,直接用H5+打开app方法填入url就可以了//拼接支付宝内部功能,直接打开支付页面let url =`alipays://platformapi/startapp?saId=10000007&qrcode=${encodeURI('支付宝链接')}?_s=web-other`;let platform = un原创 2022-04-12 11:48:05 · 3844 阅读 · 7 评论 -
uni-app 多语言,国际化
问题描述:因为做到项目有海外用户所以需要配置多语言满足客户需求。解决方法:在uni-app里有内置i18n多语言的配置,并且uni-app里的组件可是可以支持跟随设置语言进行变换的,i18n的主要功能是可以做到实时切换语言。1.配置语言包先每种语言新建一个js文件用于,配置语言包再引入,注意语言包里的变量命名需一致//中文简体zh-CN.jsexport default { login: { title: '登录', page_1: '密码登录', page_2: '短信登录',原创 2021-10-04 15:00:53 · 3052 阅读 · 1 评论 -
app跳转至H5,H5向app传递参数调用app接口
1.需先在项目引入uni的 SDK <!-- uni 的 SDK --> <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>2.向app发送消息:调用uni-app接口 uni.postMessage发送消息,app接收消息,触发接收消息事件,获取消息内容调用功能接口uni原创 2021-09-18 16:32:00 · 1132 阅读 · 0 评论 -
uni-app/微信小程序 请求方法封装使用async await
问题描述:网络请求每个页面基本都会用到,如不封装代码会十分难以维护,此方法需要npm下载await-to-js 包,用于接收参数,话不多说直接上代码导入await-to-js包后,在mian.js 将 await 引入全局使用import to from 'await-to-js'; Vue.prototype.$to = to;请求方法import config from '@/config.js';//配置文件/*url:请求地址param:请求参数isShowLoading :是否原创 2021-09-17 00:12:22 · 1192 阅读 · 0 评论 -
uni-app 获取小程序当前页面路径
问题描述:使用转发功能时需要提供当前页面路径getPageUrl() { const pages = getCurrentPages(); const currentPage = pages[pages.length - 1]; let pageUrl = `/${currentPage.route}`; pageUrl = this.pageUrl + '?id=' + this.detailID; console.log('当前页面url:', pageUrl); return pageU原创 2021-07-14 14:39:04 · 2393 阅读 · 0 评论 -
uni-app 获取屏幕亮度与设置屏幕亮度
问题描述:每次写到显示二维码的时候,可能会因为用户屏幕亮度过暗导致扫码困难,所以需要打开二维码的时候显示为最高亮度,关闭时恢复原来亮度。实现逻辑:使用uni官方提供的接口 uni.getScreenBrightness获取屏幕亮度,再使用uni.setScreenBrightness接口设置屏幕亮度。 //获取屏幕亮度 getScreenBrightness(){ //注意uni.getScreenBrightness为异步接口,所以需要使用Promise封装为异步执行 return new原创 2021-06-09 15:51:58 · 1765 阅读 · 0 评论 -
uni-app获取当前位置并计算出某个地点距离
实现思路:先通过 uni.getLocation 接口获取当前位置获取当前位置,再与点击经纬度进行计算得出相差距离。1.获取当前位置需要先在manifest.json配置文件开启获取位置权限//获取当前位置 getLocation() { let location = { lat: 0, lng: 0, } return new Promise((reserve, reject) => {//因为获取位置是异步接口所以需要使用promise uni.getLoc原创 2021-06-01 23:01:44 · 6093 阅读 · 14 评论 -
uni-app 获取标签元素信息(高度、宽度等等)
<script> export default { data() { return { }; }, onLoad() { //使用延时执行待页面完全渲染再执行 setTimeout(()=>{ uni.getSystemInfo({ success: function (res) { // res - 各种参数 let obj = uni.createSelectorQuery().select('.原创 2021-05-05 21:31:09 · 3630 阅读 · 0 评论 -
uni-app使用rem单位布局
问题描述:一般使用uni-app是开发移动端,但是根据需求需要开发pc端又想用uni-app的技术,pc端使用rpx会出现不兼容,所有使用rem布局;解决思路:uni-app提供了可以设置html标签字体的组件 page-meta 可以动态渲染html字体大小从而实现响应式布局,组件详情请看官方文档:https://uniapp.dcloud.io/component/page-meta<template> <view class="indexBody"> <page原创 2021-04-22 16:08:35 · 12243 阅读 · 9 评论 -
uni-app 去掉H5顶部标题栏
问题描述:解决:在pages.json文件的globalStyle对象里加上 "navigationStyle":"custom",原创 2021-04-21 10:16:14 · 3006 阅读 · 0 评论 -
uni-app 生成数字字母验证码
问题描述:在登录页经常有要求填写登录验证码,加强登录真实性。![效果图](https://img-使用canvas组件写出验证码 <view class="canvas-img-code" @click="clickCode"> <canvas :style="{width:width+'px',height:height+'px'}" canvas-id="imgcanvas"></canvas> </view> export default原创 2021-04-14 16:23:00 · 996 阅读 · 0 评论 -
uni-app view元素无法覆盖image组件问题
问题描述:view元素使用margin-top负数值,被image组件覆盖设置z-index值无效。问题效果图:解决后:解决方法:image组件经过uni-app框架封装存在position:relative;属性相对定位,保留位置并脱离标准流,只需要给view元素添加position:relative;z-index:2就可以了 position:relative; z-index: 2;...原创 2021-03-10 00:01:12 · 2056 阅读 · 3 评论 -
uni-app image组件将图像url里的反斜杠处理成乱码
问题描述: 因后端返回数据问题url连接存在\反斜杠,然后图像没有渲染出来。返回的url:经过image组件渲染后的url:反斜杠部分经过渲染后已成乱码。解决方法:修改返回的url把反斜杠修改为正斜杠 imageUrl.replace(/\\/g,"/"); //通过replace更换字符...原创 2021-02-26 10:19:41 · 526 阅读 · 0 评论 -
js节流
问题描述:当我们使用移动或者拖动触发事件的时候这些事件会十分灵敏,不进行处理一秒内会触发几十上百次事件里的程序,会影响程序性能;使用节流可指定最快在多少时间内执行,找了下其他博客的写得又比较复杂。 data: { jieliu: true, //在data中定义一个布尔值用于节流判断 }, //需要节流的事件(这边我是随便写的事件)loadjieliu(){ if(this.jieliu){ this.jieliu=false; settimeout(()=>{原创 2021-02-02 11:24:43 · 240 阅读 · 0 评论 -
uni-app小程序跳转至网页并互相带参
问题描述:因为uni-app小程序的组件使用出了问题并无法解决,所以另外是用了webview独立开发了一个页面,需要来回跳转并携带参数;官网文档很多写的不详细,写的时候遇到很多坑。uni-app小程序跳转到webview,小程序提供了web-view标签用于跳转至网页<web-view src="https://xxx.com?token=123456" @message="messageValue"></web-view><!--@message是接收参数的回调--&g原创 2021-02-02 10:48:59 · 2143 阅读 · 0 评论 -
uni-app获取微信版本号,并进行版本校验
问题描述:当用户微信版本过低,可能会导致某一些功能无法正常使用,与基础库版本不兼容。//获取用户版本信息getUserSystem() { let res = uni.getSystemInfoSync(); //获取系统信息 console.log('手机信息:', res); let system = res.system.split(' '); console.log('手机系统:', system); let version; if (system[0] == "iOS") {原创 2021-01-25 16:40:46 · 2241 阅读 · 0 评论 -
uni-app阻止事件浸泡
问题描述:当我们写弹窗页面的时候,一般都需要点击透明背景的空白处就关闭弹窗,但是透明背景为弹窗内容的父级元素,所以导致点击弹窗内容的时候也会关闭弹出。解决:给子级元素添加@click.stop事件<view class="follow" @click="clickclose"> //父级元素 <view class="back" @click.stop="fangzhi"> //子级元素 <image src="../../static/follow.jp原创 2021-01-21 16:23:51 · 1141 阅读 · 0 评论