![](https://img-blog.csdnimg.cn/20210115135542208.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Uniapp
以实战为索,逐步深入Uniapp各个环节,掌握Uniapp项目所遇到的问题
阳光的男夹克
心软的人没遇到 小火慢炖的粥掺了水
展开
-
uni-app中的页面通讯
A 页面 uni.$on// 监听事件 uni.$on('leaveList', (data) => { this.data = data ;})B 页面 uni.$emituni.$emit("leaveList", this.data)原创 2021-03-30 15:50:42 · 160 阅读 · 0 评论 -
uni-app 边框线 app 上更粗的解决办法
uniapp h5调试边框为1rpx,可在安卓手机显示大概为2px,解决这个问题可以使用伪类来添加边框.infon-con:after { content: ''; width: 100%; position: absolute; left: 130rpx; border-top: 1rpx solid #e1e1e1;}这里的 content 必填...原创 2021-03-30 15:16:07 · 3775 阅读 · 0 评论 -
uniapp 返回上一页携带参数
返回的页面添加以下方法 (onBackPress 是返回的生命周期)onBackPress(options) { if (options.from === 'navigateBack') { return false; } let pages = getCurrentPages(); //获取所有页面栈实例列表 let nowPage = pages[pages.length - 1]; //当前页页面实例 let prevPage = pages[pages.length - 2]; //原创 2021-03-25 16:20:38 · 992 阅读 · 0 评论 -
uni-app 动态设置导航栏
动态设置当前页面的标题uni.setNavigationBarTitle({ title: '新的标题'});设置页面导航条颜色。如果需要进入页面就设置颜色,请延迟执行,防止被框架内设置颜色逻辑覆盖uni.setNavigationBarColor({ frontColor: '#ffffff', backgroundColor: '#ff0000', animation: { duration: 400, timingFunc: '原创 2021-03-12 11:06:54 · 917 阅读 · 0 评论 -
元素 border 边框重合解决办法
基础布局<view class="su-icon-li" v-for="(item, index) in 6" :key="index"> 测试</view>只需要设置 margin-top:-1rpx; 已经 margin-right: -1rpx;.su-icon-li { border: 1rpx solid #EDEDED; //border-left: none; margin-top:-1rpx; margin-right: -1rpx;}.原创 2021-03-12 10:53:28 · 2107 阅读 · 0 评论 -
uni-app 配置导航栏按钮
效果如下在 pages.json 文件内找到对应路径,设置 titleNView 下 的 buttons{ "path": "pages/index/appcenter", "style": { "titleNView": { "buttons": [{ "text": "\ue679", "fontSrc": "/static/font/yzfont.ttf", "float": "left", "fontSize": "40rpx", "wid原创 2021-03-12 10:34:33 · 1725 阅读 · 0 评论 -
uni-app 动画
基础布局 添加 :animation=“animationData”<view class="login-title" :animation="animationData"> <view class="title-text">测试</view></view>使用 uni.createAnimation ,调用动画操作方法后要调用 step() 来表示一组动画完成,export 方法每次调用后会清掉之前的动画操作,更多参数请查看官网data() {原创 2021-03-08 09:48:28 · 1260 阅读 · 0 评论 -
uni-app 获取循环元素的总高度
uni-app 获取循环元素的总高度<view ref="element" class="height-element" v-for="(itme,index) in 2" :key="index"> 循环元素</view>onShow() { this.$nextTick(()=> { var elHeight = document.querySelector('.height-element').offsetHeight; console.log(elH原创 2021-03-03 11:55:31 · 764 阅读 · 0 评论 -
uniapp checkbox 怎么判断是否选中
checkbox 判断选中其实只需要 给 checkbox 的 checked 属性动态绑定一个状态,在change事件触发的时候给 data 中的 state 取反,那么 console.log(this.state) 打印的就是 checked 属性值// checkbox 基础布局<checkbox-group @change="checkboxChange"> <label> <checkbox style="transform:scale(0.7)" va原创 2021-03-01 11:43:39 · 11017 阅读 · 4 评论 -
uni-app 从本地相册选择图片或使用相机拍照上传服务器
使用 uni.chooseImage() API从本地相册选择图片或使用相机拍照上传服务器<view @click=uploadImg></view>uploadImg() { uni.chooseImage({ count: 1, //默认9 sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有 sourceType: ['album'], //从相册选择 succ原创 2021-02-14 17:44:57 · 1810 阅读 · 0 评论 -
uni-app 图文分享
基础布局<view class="sharelist"> <view class="shareitem" @click="share('weixin','WXSceneSession')"> <text>微信好友</text> </view> <view class="shareitem" @click="share('weixin','WXSenceTimeline')"> <text>微信朋友圈</原创 2021-02-04 13:02:40 · 391 阅读 · 0 评论 -
手机APP打开QQ并跳转到指定用户
基础布局<view class="menuItem" @click="kefu"> <image src="../../static/image/member-menu2.png" mode=""></image> <text>在线客服</text></view>mqq://im/chat?chat_type=wpa&uin=88888888&version=1&src_type=web【qq提供的,原创 2021-02-04 12:45:58 · 742 阅读 · 1 评论 -
uni-app H5实现lazyload图片懒加载
安装 vue-lazyload 组件使用npm安装 npm -i vue-lazyload -S使用方法 在 components 文件夹下创建一个组件 myImage.vue<template> <!-- #ifdef APP-PLUS||MP-WEIXIN --> <image :lazy-load="true" :src="imgpath" :style='{width:imgwidth,height:imgheight}' >原创 2021-01-21 16:16:37 · 9141 阅读 · 13 评论 -
uni-app 下拉刷新
使用页面生命周期 onPullDownRefresh,当处理完数据刷新后,uni.stopPullDownRefresh 可以停止当前页面的下拉刷新onPullDownRefresh() { console.log('refresh'); setTimeout(function () { uni.stopPullDownRefresh(); }, 1000);}使用页面生命周期 onPullDownRefresh 需要在 pages.json 里,找到的当前页面的pages节点,并在 st原创 2021-01-21 15:51:01 · 403 阅读 · 0 评论 -
uni-app scroll-view 实现上拉加载更多数据
使用scroll-view 组件包裹元素,为页面底部添加正在加载动画,可以使用组件 uLi-load-more,直接点击 使用HBuilder 导入插件,可以不用引入和注册该组件,但 HBuilderX版本应高于2.5.5// lower-threshold 距离底部 30 触发事件<scroll-view class="orderlist" scroll-y="true" lower-threshold="30" @scrolltolower="scrollLower"> <vie原创 2021-01-21 15:37:30 · 6393 阅读 · 0 评论 -
uni-app 滚动到底部加载更多数据
为页面底部添加正在加载动画,可以使用组件 uLi-load-more,直接点击 使用HBuilder 导入插件,可以不用引入和注册该组件,但 HBuilderX版本应高于2.5.5// 添加在页面底部即可<uLi-load-more status="loading"></uLi-load-more>data(){ return{ page:1, // 第一页 allpage:0, // 总页数 status:"loading" // 加载状态 }}使用原创 2021-01-21 15:24:26 · 3622 阅读 · 2 评论 -
uni-app 支付宝和微信支付(APP)
基础布局<view class="payButton" @click="payButton">确定支付</view>使用 uni-app 封装的 api uni.requestPayment 发起支付,如果是微信支付alipay 改为 wxpayasync payButton(){ var orderInfo = await this.getOrderInfo(); //微信、支付宝订单数据 // 支付宝支付 uni.requestPayment({ provi原创 2021-01-21 12:57:54 · 1021 阅读 · 1 评论 -
uni-app App打包
一、真机运行安卓:开发-usb1)标准基座打包:利用 HBuilder 打包运行到手机或模拟器,此操作打包的app使用的 HBuilder 的证书,有功能限制如:不能修改logo、启动图、第三方支付的账号(使用的是 HBuilder 的账号)等2)自定义基座:如果需要在编写代码时测试支付等功能可以打包一个自定义基座来测试项目1、HBuilder 运行→运行到手机或模拟器→制作自定义调试基座快速生成证书方法:点击生成证书,填写基本信息,会下载证书文件,方可使用2、等待打包结束,会在控制台提示打包原创 2021-01-20 19:27:20 · 2836 阅读 · 5 评论 -
uni.showModal 点击确认提示 Cannot read property ‘ ‘ of undefined
该错误是是因为 success 后面是 function,里面的 this 指向错误,如下uni.showModal({ title: '提示', content: '确认删除', success: function (res) { if (res.confirm) { this.$requst.login(this.apiUrl+'api/member/delcart',{ id:id原创 2021-01-16 12:47:59 · 1413 阅读 · 2 评论 -
uni-app 设置定位 样式 bottom:0 后被标签栏遮挡
uni-app 设置固定定位,样式为 bottom:0 后被标签栏遮挡解决办法 bottom: var(–window-bottom);.cartBottom { position: fixed; bottom: var(--window-bottom); width: 100%; height: 106rpx; background: red; }原创 2021-01-15 13:21:19 · 1666 阅读 · 0 评论 -
uni-app switchTab 和 navigateTo的用法
switchTab 和 navigateTo 都是页面跳转,不同点在于switchTab 跳转的路径必须为Tab,(也就是标签栏所能跳转的页面)uni.switchTab({ url:'../member/member'})而navigateTo 跳转的页面不能为Tabuni.navigateTo({ url: this.backurl})...原创 2021-01-14 18:57:48 · 4406 阅读 · 0 评论 -
uni-app pickerAddress 城市选择器的使用(省市区三级联动)
在 uni-app 插件市场可直接点击 使用 HBuilder X 导入插件HBuilderX 2.5.5起支持 easycom 组件模式。在使用 uni-ui 的时候,只要uni-ui 组件 安装在项目的 components 目录下,并符合 components/组件名称/组件名称.vue 目录结构。就可以不用引用、注册,直接在页面中使用 uni-ui 组件所有不需要使用 import 导入插件可以直接使用 ,但需要注意组件名称应和目录的vue文件一样,如图所示,该组件的组件名必须为 wangdi原创 2021-01-14 12:11:23 · 7248 阅读 · 2 评论 -
uni-app JS跳转
<view class="addBtn" @click="addUrl"> button</view>addUrl() { uni.navigateTo({ url:"./add" })}原创 2021-01-14 11:49:39 · 1591 阅读 · 0 评论 -
uni-app SwipeAction 滑动操作 使用方法
在 uni-app 插件市场 可直接点击 使用 HBuilder X 导入插件HBuilderX 2.5.5起支持 easycom 组件模式。在使用 uni-ui 的时候,只要uni-ui 组件 安装在项目的 components 目录下,并符合 components/组件名称/组件名称.vue 目录结构。就可以不用引用、注册,直接在页面中使用 uni-ui 组件所有不需要使用 import 导入插件可以直接使用 基础用法如下所示<!-- 基础用法 --><uni-swipe-a原创 2021-01-13 18:49:02 · 6482 阅读 · 6 评论 -
uni-app 封装请求函数
首先:创建目录request,并在该目录下创建 index.js 文件const request = { login(url) { var that = this; return new Promise(function(reslove,reject) { uni.request({ url:url, method:'POST', header: { 'token': uni.getStorageSync('token') //自定义请求原创 2021-01-12 16:17:01 · 276 阅读 · 0 评论 -
uni-app 获取验证码倒计时
基础布局<view class="getCode" :class="{activeCode:codeFlag}" @click="getCode">data() { return { codeTxt:'获取验证码', codeFlag:true, // 控制按钮是否可点击 } },方法如下methods: { getCode() { if(this.codeFlag == false) { return } this.codeFla原创 2021-01-12 12:48:10 · 413 阅读 · 0 评论 -
uni-app 手机号码及密码长度验证
首先:新建目录 check,并在该目录下创建 index.js 文件const check = { telphone(data) { if(!(/^1[3456789]\d{9}$/.test(data))){ uni.showToast({ title: "手机号码不正确", icon:'none' }); return false; } return true }, password(data) { if(data.lengt原创 2021-01-11 19:50:43 · 3676 阅读 · 1 评论 -
uni-app 保存和获取 token
使用 uni-app 提供的数据缓存 api uni.setStorageSync(‘token’, ‘res.data.data’); 保存tokenlogin() { uni.request({ url:this.apiUrl+"api/index/login", method:'POST', // 传参 data:{ telphone:this.telphone, password:this.password }, success:(res)=> {原创 2021-01-11 19:43:26 · 16720 阅读 · 2 评论 -
uni-app 解析后台返回的html代码
首先到官网插件市场下载uParse修复版-html富文本加载 uParse解压下载的文件:放入项目中修改该插件 libs 目录下的 wxDiscode.js 文件的第199 和201 行,把 https 改为htpp在页面中引入该插件的 parse.vue 文件 并注册import parse from "../../gaoyia-parse_1.2.0/components/gaoyia-parse/parse.vue"components:{parse},使用: content是渲染原创 2021-01-11 17:20:05 · 3066 阅读 · 0 评论 -
uni-app 页面跳转(携带参数)
使用标签包裹跳转对象,拼接字符串, ${child.id} 为跳转携带参数<navigator hover-class="none" :url="`../detail/detail?id=${child.id}`"> <image :src="imgUrl+child.mainimage" mode=""></image> <text>{{child.smalltitle}}</text></navigator>取值 给 u原创 2021-01-11 13:09:37 · 3360 阅读 · 0 评论 -
vue 如何使用字体图标
首先:访问图标库 iconfont , 将喜欢的图标添加至购物车点击购物车,将购物车内的图标添加至项目将图标下载至本地解压文件,并在项目中创建test文件夹,并将解压的文件复制到该目录下 ,demo_index.html文件可以查看图标名称在app.vue中添加以下样式<style> /*每个页面公共css */ @font-face { font-family: 'iconfont'; // 文件路径 src: url('~@/st原创 2021-01-10 14:51:23 · 802 阅读 · 1 评论 -
uni-app 实现商城分类页
<template> <view> <view class="search"> <view class="searchBox"> <navigator url="#"> <image src="../../static/search.png" mode=""></image> 搜索全部 </navigator> </view> </vie原创 2021-01-10 12:39:01 · 1976 阅读 · 0 评论 -
uni-app 商城分类功能左侧点击实现联动
实现逻辑:结合uni-app 中的 scroll-view 组件 和 scroll-view 提供的两个参数(scroll-into-view、scroll-with-animation)// 左侧 定义了点击事件 @click="menuTab(index),控制了点击样式 :class="{cateActive:index == current}"<scroll-view class="cartNameLeft" scroll-y="true"> <view class="ca原创 2021-01-09 21:54:28 · 1350 阅读 · 0 评论 -
uni-app 使用HTML绑定接口数据报undefined
语法:<view class="indexADleft"> <image :src="imgUrl+content[0].image" mode=""></image></view><script> export default { props:['content'] }</script>错误如下:错误原因:此处 content 默认为 undefined,页面开始渲染时 content 为空解决办法:使原创 2021-01-09 17:16:43 · 1018 阅读 · 0 评论 -
uni-app 修改指定页面背景
列:下面页码背景为红色,需要修改为蓝色只需要在点前页码的style标签内添加样式<style> page { background: blue; }</style>原创 2021-01-09 13:18:25 · 1112 阅读 · 0 评论 -
uni-app 状态栏没有显示 滚动页面超出导航栏
出现以下问题是因为:状态栏存在于页面以内解决办法,给状态栏设置定位// 基础部件<view class="status_bar"></view>// 样式<style> /* 自动计算状态栏高度 */ .status_bar { height: var(--status-bar-height); width: 100%; position: fixed; top: 0; background: red;原创 2020-10-31 16:34:54 · 1904 阅读 · 0 评论 -
uni-app 设置原生导航栏不显示
有两种方法:设置navigationStyle设为custom或titleNView设为false"pages" : [ { "path" : "pages/index/index", "style": { "navigationBarTitleText": "英特网络", // "navigationStyle":"custom" "app-plus":{ "titleNView":false } } },]非H5端,手原创 2020-10-16 12:38:57 · 7307 阅读 · 0 评论 -
uni-app 软件安装及使用
创建项目uni-app支持通过 可视化界面、vue-cli`命令行两种方式快速创建项目。推荐使用可视化界面。使用软件:官方提供的HbuilderX,可视化的方式比较简单,HBuilderX内置相关环境,开箱即用,无需配置nodejs。 下载地址选择uni-app,输入工程名,点击创建,即可成功创建 uni-app。点击模板里的 Hello uni-app 即可体验官方示例。[注意:创建的项目需要放在左侧资源栏的根目录]运行uni-app注意:运行时可能会报某些插件未安装,需要在软件插件栏中找原创 2020-10-15 13:46:29 · 1832 阅读 · 1 评论 -
uni-app 和 Vue 的区别
组件/标签的变化以前是html标签,现在是小程序标签。div 改成 viewspan、font 改成 texta 改成 navigator router-linkimg 改成 imageinput 还在,但type属性改成了confirmtypeform、button、checkbox、radio、label、textarea、canvas、video这些还在。select 改成 pickeriframe 改成 web-viewul、li没有了,都用view替代audio 不再推原创 2020-10-15 09:47:22 · 10900 阅读 · 12 评论