![](https://img-blog.csdnimg.cn/20210906153958594.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
uni-app
uniapp相关使用
向前有光
没有什么是不需要努力就能获得的!
展开
-
uniapp中分包及分包优化
在pages同级目录中新建两个分包pagesOne和pagesTwo文件夹在pages.json中配置分包manifest.json中配置分包优化原创 2021-03-20 11:49:20 · 1135 阅读 · 1 评论 -
uni-app中的页面间使用$on与$emit
转载:https://blog.csdn.net/weixin_42292991/article/details/105506501在页面与页面之间通讯时,很多人会直接选择使用在navigato的时候直接拼接字符串来传递。可是当需要传依个比较多数据的的对象的时候这个方式就不是很管用了,为此uniapp给我们提供了页面与页面之间通讯的极为简便的方法。比如我在下订单页面的时候需要用户选择一个地址去配送,因此我们需要点击之后跳转到选择收货地址页面。而在选择完了收货地址以后需要关闭那个页面返回该订单页面。因此在转载 2020-10-21 09:08:23 · 4583 阅读 · 0 评论 -
自定义顶部菜单navigationBar方式
前言:开发中,设计师也是奇思妙想,把小程序顶部的默认菜单改成了自己觉得好看的样式,改了返回icon的样式,加了各种返回首页、收藏、什么鬼的按钮,甚至把胶囊按钮都给改了~~~,好吧,遵从设计师的审美,盘他(除了胶囊按钮)(本文字数较多,因为我把每一步都分的很细,都写出来了,望客官细品,仔细品)要点概述:(助于童鞋们更好的理解)1.小程序默认的navigationBar是占据手机顶部区域的,小程序的页面内容page的显示区域是从navigationBar之下开始,如下图,红框圈出来的就是小程序默认的nav转载 2020-06-12 17:07:13 · 2117 阅读 · 0 评论 -
uniapp动态设置style和class样式
注意:以下两种样式设置,涉及到单位的只能用px,而不能使用rpxstyle样式设置样式名称统一使用驼峰命名方式:例如:fontSize对象方式:style="{backgroundImage:`url(${itemB.images})`}"数组加三元运算方式:class="[items.isShow?'':'noneActive',subIndex[index] == indexs?'value-item-active':'value-item']"对象数组方式:style="[{pad原创 2020-08-20 14:44:29 · 30005 阅读 · 3 评论 -
微信小程序/uni-app 封装请求
//现在我们在config.js 文件下面(这个文件名字是自己命名的哈)//分别针对 get 和 post 进行一个公共 uni.request 请求的封装,每个方法传了2个参数,url 和 data ;(一个是接口地址,一个是参数)const commonUrl = ‘xxxxx‘;//公共路径//post 封装function postRequest(url,data){ var promise = new Promise((resolve,reject)=>{ v原创 2020-06-13 11:12:00 · 1930 阅读 · 1 评论 -
uniapp - easycom模式(自动引入组件)
版本号为:2.6.0.20200223详情请看这里uniapp - easycom:https://uniapp.dcloud.io/collocation/pages?id=easycom在pages.json配置以下参数组件引入符合命名规则3.在页面会自动引入转载 2020-06-12 17:54:12 · 2705 阅读 · 0 评论 -
uniapp启动页,底部虚拟按钮向上闪一下的问题
manifest.json “app-plus” -> “distribute” -> "splashscreen节点新增 “androidTranslucent”: true 可以解决此问题转载:https://ask.dcloud.net.cn/question/121410转载 2022-01-23 15:47:05 · 655 阅读 · 0 评论 -
uniapp中vuex状态管理
应用中,保持登录状态是常见需求,本文讲解使用uni-app框架时如何保持用户登录状态。即:初次进入应用为未登录状态------->登录---------->关闭应用,再次打开--------->为已登录状态传统应用保持登录状态的方式是通过读取 cookie 来判断是否是登录状态,但是uni-app不支持对cookie的读写。因为uni-app框架的主体是 VUE,所以可以使用 vuex 进行登录态管理。关于vuex中定义的全局变量和方法需要定义在指定目录的文件内。即在项目目录下转载 2021-01-18 17:12:08 · 2262 阅读 · 0 评论 -
uniapp禁止遮罩层下的页面滚动
<view @touchmove.stop.prevent="moveHandle"></view>methods: { moveHandle() {}}原创 2021-09-06 22:56:10 · 1288 阅读 · 0 评论 -
uniapp实现图片预览功能
点击图片实现预览功能如下:<!-- 轮播 --><view class="ms_shops"> <swiper class="ms_swiper" indicator-color="#FFF" indicator-active-color="#FF0423" :indicator-dots="dotsType" :autoplay="true"> <swiper-item v-for="(item,index) in dataList.imageist"原创 2021-09-06 22:46:53 · 7887 阅读 · 0 评论 -
uniapp处理IOS底部横条安全区域
同步uni.getSystemInfo(OBJECT)异步uni.getSystemInfoSync()使用方式一<template> <view class="content"> <view style="background-color: red;" :style="{height:heightOne+'px'}">1</view> <view style="background-color: yellow;" :style原创 2021-09-06 22:29:20 · 3225 阅读 · 0 评论 -
uniapp自定义导航栏
APP中与微信小程序中使用的API不一样,下面就分别介绍一下使用方法微信小程序getMenuButtonBoundingClientRect()官方解说:在小程序平台,如果原生导航栏被隐藏,仍然在右上角会有一个悬浮按钮,微信下也被称为胶囊按钮。本API用于获取小程序下该菜单按钮的布局位置信息,方便开发者布局顶部内容时避开该按钮。APPuni.getSystemInfo(OBJECT)获取系统消息可以使用下面这个变量来获取状态栏高度使用方法<template> <vi原创 2021-09-06 21:38:06 · 1052 阅读 · 0 评论 -
微信小程序与uniapp中 px与rpx 相互转换
转载:https://blog.csdn.net/u013350495/article/details/1084524941、rpx 转 pxuniapp 内置了 rpx 转 px 的方法,源码见下方:// 100 为 100rpx的值var px = uni.upx2px(100);2、px 转 rpx由于 uniapp 已经有 upx2px 的方法,可以简单的得出反向取值的公式,源码见下方:// 200 为 px 的值,后面的两个 100 为计算比例使用var rpx = 200/(u转载 2021-05-27 16:26:50 · 2750 阅读 · 0 评论 -
uniapp原生子窗体(弹出层为例子)
在当前目录下新建一个目录和一个nvue页面{ "path": "msVideo/msVideo", "style": { "navigationBarTitleText": "子窗体", "navigationStyle": "custom", "app-plus": { "animationType": "slide-out-right", "animationDuration": 300, "subNVues":[{原创 2021-03-29 16:02:32 · 3009 阅读 · 0 评论 -
uniapp 界面拖动,去掉半圆形阴影
bounce属性改成none就可以了单页面配置在pages.json中配置如下{ "path": "pages/wareHouseOrder/wareHouseOrder", "style": { "navigationBarTitleText": "认种认养订单", "navigationBarBackgroundColor": "#fff" "app-plus": { "bounce": "none" //关闭窗口回弹效果 } .原创 2021-03-03 17:50:36 · 1966 阅读 · 3 评论 -
uniapp中动态添加及修改导航栏
在pages.json{ "path": "pages/cart/cart", "style": { "navigationBarTitleText": "购物车", "navigationBarBackgroundColor":"#FFFFFF", "app-plus": { "titleNView": { "titleAlign":"left", "titleSize":"40rpx", //原创 2021-02-26 15:03:29 · 1559 阅读 · 0 评论 -
uniapp中动态修改导航栏标题
在我们日常开发过程中,往往会用到根据各种条件去动态改变顶部标题,在不自定义顶部标题的情况下,可以使用下面这种方法来实现动态修改uni.setNavigationBarTitle({ title: '修改的标题'});案例如下:onLoad(options) { if (options.index == 0) { uni.setNavigationBarTitle({ title: '修改标题1' }); } else if (options.index == 1) { un原创 2021-02-03 09:47:17 · 1463 阅读 · 0 评论 -
uni-app引用第三方插件(根据银行卡卡号查询银行类型和卡类型)
1.npm下载(我们以银行卡卡号查询银行类型和卡类型插件:bankcardinfo为例):npm install bankcardinfo --save-dev2.下载后,你可以在package.json文件里面来查看是否下载成功(如果有就成功了)注意:你如果在文件中找不到package.json文件:请在项目根目录执行命令初始化npm工程:npm init -yuniapp中 根据银行卡卡号查询银行类型和卡类型(javascript也可以用)import BIN from 'bankcard原创 2021-01-20 14:04:31 · 2390 阅读 · 2 评论 -
uniapp在ios端每个页面都可以上下拉,阻止方法
{ "path": "pages/helpCenter/Index", "style": { "app-plus": { "bounce": "none" } } }“bounce”: “none” 配上这个原创 2020-12-24 11:37:59 · 4753 阅读 · 0 评论 -
uniapp中搜索输入与频繁点击(防抖节流)
防抖就是(当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时,销毁上一次的定时器) // 防抖操作 const self = this; //频繁点击的时候销毁上一个定时器 clearInterval(self.tiems); //当没有频繁点击后,最后执行的定时器 self.tiems = setTimeout(() => { //里面写执行代码 }, 1000)...原创 2020-12-10 14:05:10 · 2038 阅读 · 0 评论 -
uniapp 安卓和IOS退出App的方法
switch (uni.getSystemInfoSync().platform) { case 'android': plus.runtime.quit(); break; case 'ios': plus.ios.import('UIApplication').sharedApplication().performSelector('exit'); break;转载 2020-12-03 17:10:08 · 3278 阅读 · 9 评论 -
uniapp中遮罩穿透问题
当换出遮罩时,上下滑动依然可以滑动遮罩底部内容此时给遮罩的view标签增加catchtouchmove=“return”,就可以防止穿透遮罩问题。<view class="my_share" catchtouchmove='return'> </view>原创 2020-12-02 17:51:34 · 3779 阅读 · 1 评论 -
时间戳转换时间
dateFormat(originVal) { const dt = new Date(originVal); // 年份 const y = dt.getFullYear(); // 月份是从0开始的所以这儿加1,后面不足两位就补0,所以把前面加上引号变成字符串才可以补足 // padStart(2,'0'),第一位总长度多少位,第二个不足多少位用这个字符来填充 const m = (dt.getMonth() + 1 + '').padStart(2...原创 2020-11-29 18:18:18 · 192 阅读 · 0 评论 -
uniapp在安卓和IOS端 APP固定竖屏及获取设备信息
在项目文件App.vue 的 onLaunch 生命周期函数里添加调取hbuilder 5+APPJS 的方法 plus.screen 函数plus.screen.lockOrientation('portrait-primary'); //ios中锁定竖屏const equipment = plus.deviceuni.setStorageSync('equipment', equipment) // 存储设备信息...原创 2020-11-28 10:01:47 · 856 阅读 · 1 评论 -
uniapp中自定义返回和物理返回
在pages.json中可以使用自己去找的图标样式{ "path": "pages/myOrder/myOrder", "style": { "navigationBarTitleText": "我的订单", "navigationBarBackgroundColor":"#fff", "app-plus": { "titleNView": { "autoBackButton":"false", "buttons"原创 2020-11-27 14:16:51 · 2497 阅读 · 0 评论 -
过滤输入内容中是否含有特殊字符与表情
reg = /[~#^$@%&!?%*]/gi;if (reg.test(postdata.Name.trim())) {alert("姓名不能含有特殊字符");} else {if (isEmojiCharacter(postdata.Name.trim())) {alert("姓名不能含有表情");} else {//自己的代码}}function isEmojiCharacter(substring) {for (var i = 0; i < substring转载 2020-11-23 16:37:05 · 677 阅读 · 0 评论 -
uni-app如何取消pages页面的默认返回按钮【autoBackButton属性】
"pages": [{ "path" : "pages/search/search", "style": { "navigationBarTitleText": "搜索页", "app-plus":{ "titleNView":{ "autoBackButton":"false", "buttons":[{ ...转载 2020-11-15 19:38:04 · 2127 阅读 · 0 评论 -
uniapp定义全局变量方法
当我们开发uniapp的时候,会想到全局变量,全端存储到全局中,调用起来非常方便main.js代码import Vue from 'vue'import App from './App'Vue.config.productionTip = falseVue.prototype.globalData = { addressId:'',//默认地址}Vue.prototype.baseUrl= "http://XXX.XXX.XXX/"; // 测试环境// Vue.prototype.原创 2020-10-22 11:05:54 · 4973 阅读 · 2 评论 -
uni-app 使用 web-view 页面之间互相跳转、通信
最近开发小程序的时候、需要嵌入一个第三方网站、并且和第三方网站有些交互。这个第三方页面本身就是一个 HTML 页面、想着把它给嵌入到 uni-app 中,结果没实现…(很多的 js 代码在小程序中不识别)。最后采用 web-view 方式来跳转到第三方页面、这就触发了页面之间互相通信的问题官方中有一篇文章 https://ask.dcloud.net.cn/article/35083 详细介绍了 在 web-view 加载的本地及远程 HTML 中调用 uni 的API及网页和 vue 页面是如何通讯转载 2020-10-13 15:55:21 · 4391 阅读 · 0 评论 -
uniapp中radio颜色渐变
在css中添加如下代码,即可实现选中状态渐变.uni-radio-input-checked{ background: linear-gradient(142deg,#FF9200 0%,#FF2B2B 100%);}原创 2020-10-19 17:20:57 · 1759 阅读 · 0 评论 -
uniapp添加顶部导航栏并且更换图标
uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架。开发者通过编写 Vue.js 代码,uni-app 将其编译到iOS、Android、微信小程序等多个平台,保证其正确运行并达到优秀体验。记录一下更换顶部导航栏的流程在page.json里的配置项{ "path": "pages/my/index", "style": { "app-plus": { "title转载 2020-08-11 14:30:32 · 4520 阅读 · 0 评论 -
scroll-view实现自定义下拉刷新
使用scroll-view标签refresher-enabled=“true” 开启下拉刷新refresher-triggered 设置当前下拉刷新状态,true 表示下拉刷新已经被触发,false 表示下拉刷新未被触发bindrefresherrefresh 自定义下拉刷新被触发事件bindscrolltolower 滚动到底部触发事件页面定义<scroll-view class="content" style="width:100%;height:100vh;"原创 2020-08-28 18:17:17 · 3320 阅读 · 4 评论 -
uniapp添加顶部导航栏颜色渐变
在uniapp文件夹的pages.json文件中添加如下代码即可实现"backgroundImage":"linear-gradient(to right, #FFDE28,#FF3228)"{ "path": "pages/mySuccessOrder/mySuccessOrder", "style": { "navigationBarTitleText": "支付", "app-plus": { "titleNView": {原创 2020-08-20 11:14:07 · 15790 阅读 · 17 评论 -
uniapp自定义顶部导航组件
第一步 新建 components/uni-title/uni-title.vue组件<!-- 自定义标题组件 --><template> <view class="container"> <!-- 自定义顶部标题 --> <view class="head" :style="{ paddingTop: paddingTopNum + 'px' }"> <!-- 标题插槽 --> <slot name="原创 2020-06-24 15:28:29 · 2130 阅读 · 0 评论 -
uniapp中slot插槽用法
什么是插槽?插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的,而插槽在哪里显示就由子组件来进行控制使用easycom 组件化配置方法1、默认插槽的使用:slot-one组件:<template> <view> <view>我是子组件</view> <slot></sl转载 2020-06-22 13:39:27 · 36794 阅读 · 6 评论 -
uniapp中easycom组件的封装
pages.json中配置easycom在pages.json对象默认加入这段代码进行easycom配置"easycom": { //组件化配置 "autoscan": true, //是否开启自动扫描,开启后将会自动扫描符合components/组件名称/组件名称.vue目录结构的组件 "custom": { // "uni-(.*)": "@/components/uni-$1.vue", // 匹配components目录内的vue文件 "uni-(.*)": "@/compo原创 2020-06-22 10:59:43 · 3005 阅读 · 0 评论