
uni-app
文章平均质量分 60
uniapp踩坑学习记录
一个什么都不会的前端
一个什么都不会的前端开发工程师
展开
-
uniapp检查app更新并下载,监听下载进度
检查的方法是放在app.vue里面的 <script> import { hostCharge } from "util/httpUrl.js" import Util from "util/util.js" export default { onLaunch: function() { // console.log('App Launch') //#ifdef APP-PLUS this.checkUpdateVersion() //#原创 2021-01-07 16:16:37 · 3964 阅读 · 1 评论 -
uniapp消息推送超详细(从开通uniPush到测试成功)
前段时间开发app的时候要开始做消息推送功能了,刚开始选择的是个推,最后由于。。。。。,em还是用了uniapp自带的uniPush,其实uniapp的推送就是集成版的个推,下面讲解详细的步骤这里是官方的文档地址:uniPush推送指南:https://ask.dcloud.net.cn/article/35622首先第一步要开通推送服务1、开通推送服务开通指南:uniPush开通指南:https://ask.dcloud.net.cn/article/35716打开这个链接uniapp开原创 2021-01-06 10:38:15 · 40951 阅读 · 24 评论 -
uniapp开发app原生子窗体subNvue的使用
用uniapp开发app的时候经常会有以下问题:1、覆盖原生导航栏、tabbar 的弹出层组件。比如侧滑菜单盖不住地图、视频、原生导航栏,比如 popup盖不住tabbar。2、弹出层内部元素可滚动,3、在map、video等组件上的添加复杂覆盖组件:比如直播视频上覆盖滚动的聊天记录虽然有cover-view来覆盖原生组件,但是在app-vue中不支持嵌套,且只能在map、video组件使用这个时候用原生子窗体是比较适合的1、使用前配置page.json在 pages.json 中,新增原创 2021-01-05 14:53:25 · 9213 阅读 · 2 评论 -
uniapp开发app以及使用nvue的注意事项
在nvue中,只能使用默认的flex布局方式,默认是竖排(column)排列原创 2021-01-04 14:32:58 · 5134 阅读 · 1 评论 -
uniapp子页面被tabbar盖住
首先出现的问题是这个样子的刚开始的时候在json文件中配置了底部tabbar的颜色"tabBar": { "color": "#fff", "selectedColor": "#7BB4FF", "borderStyle": "black", "backgroundColor": "#7BB4FF", "list": [ { "pagePath": "pages/index/index", "iconPath": "static/tab原创 2020-12-30 11:11:02 · 2421 阅读 · 3 评论 -
普通倒计时功能(秒杀、活动倒计时)
上效果图其实很简单,只需要知道结束时间,并获取当前时间,然后计算时间差和相差秒数,设置定时器,最后在离开页面清除定时器即可html<view class="daojishi-container"> <view>距离2021年春节还有</view> <view class="time-content"> <view class="item"><view>{{day}}</view>天<原创 2020-11-09 17:06:37 · 468 阅读 · 0 评论 -
小程序拖拽内容
先看效果html //将拖拽的高度赋值给style里面绑定的高度 <scroll-view scroll-y="true" id="scrolls" :style="{height:moveY + 'px'}"> <view id="desc"> {{subject.describe}} </view> <view id="tuozhuai" @touchstart="starDrag" @t原创 2020-06-19 18:08:11 · 422 阅读 · 0 评论 -
uni-app请求封装
1,在根目录先新建一个js文件2,js文件代码const commonUrl = 'https://xxxxxxxx.com' //请求接口地址let isJson = trueconst httpRequest = (url, method, data, isJson) => { let method = method.toUpperCase();//小写改为大写 //需要传的数据 if (!data) { data = {} } if(getApp().globalDat原创 2020-06-15 10:41:22 · 596 阅读 · 0 评论 -
uni-app小程序答题功能开发(左右滑动,判断,填空,问答,答题卡,纠错,做题倒计时等)
1,最近再搞一个关于答题的小程序,刚开始是点击切换题目,后来改成左右切换的,搞得脑袋有点大,用swiper搞了半天还是有bug,无奈之下只能去百度了,找到了一个模板,稍微改变了一点,记录下来里面引用了colorUI一些内容,需要的去下载一些就可以了效果模板链接:答题模板html部分这里没啥好说的,就是根据不同的状态显示不同的内容<template> <view> <view id="top-box" class="cu-bar bg-white botto原创 2020-06-12 15:51:33 · 5106 阅读 · 4 评论 -
短信验证码倒计时
<template> <view class="content"> <view>输入验证码</view> <view>短信验证码已发送至<text>110110110</text></view> <view v-show="verification" @tap="getCode">获取验证码</view> <view v-show="!verification"&.原创 2020-06-08 15:47:12 · 177 阅读 · 0 评论 -
小程序购物车商品结算数据处理,并将多个对象里面的某个值整合
1、html部分用到了小程序的checkbox-group标签 <view class="cart-item" v-for="(item,index) in shopcartList" :key="index"> <checkbox-group @change="selectSingle(item,index)" class="wrapper"> <checkbox :value="item.price" :checked="item.checked"原创 2020-06-07 00:18:38 · 574 阅读 · 0 评论 -
uni小程序实现购物车功能,包括全选,反选,单选和计算总价格,快递费和总件数
效果图1、html <view class="content"> <checkbox-group @change="checkboxChange" class="wrapper"> <view class="cart-item" v-for="(item,index) in shopcartList" :key="index"> <label class="label"> <checkbox :value="item.原创 2020-05-26 19:00:47 · 2251 阅读 · 0 评论 -
小程序点击到页面指定位置
点击推荐到商品推荐这里,这里不用scroll-view在mounted中获取节点信息 mounted() { // 选择并获取节点信息,官网建议在mounted中调用 var query = uni.createSelectorQuery().in(this) // 用boundingClientRect获取节点的布局位置\尺寸和滚动位置信息 query.select('#recommend').boundingClientRect(res => { conso原创 2020-05-29 10:01:58 · 1489 阅读 · 0 评论 -
uni-app微信公众号支付
微信公众号支付开发文档:支付文档支付就是调用微信的一个方法,在里面传入对应的参数appid、随机串、和prepay_id是后台返回给我的,其他的都是自己处理生成的封装的支付方法(也可以封装在main.js中) wxPay(prepay_id) { var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K',原创 2020-05-14 16:48:58 · 2996 阅读 · 2 评论 -
uni-app微信公众号授权登录
授权登录的官方文档:官方文档前提:在微信公众号请求用户网页授权之前,开发者需要先到公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中,修改授权回调域名。请注意,这里填写的是域名(是一个字符串),而不是URL,因此请勿加 http:// 等协议头下面是详细步骤:1、点击授权访问以下链接获取code<view class="btn"><button type="primary" @tap="getUserInfo">一键原创 2020-05-14 16:32:52 · 12375 阅读 · 8 评论 -
小程序腾讯地图逆地址解析
1、如果没有key值的话去腾讯位置服务申请一个key值,并勾选webserviceAPI2、下载微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.23、安全域名设置,去微信公众平台,在“设置” -> “开发设置”中设置request合法域名,添加https://apis.map.qq.com4、接下来在代码中引入你下载的核心文件引入:import Q...原创 2020-05-08 15:59:39 · 1551 阅读 · 1 评论 -
模糊搜索功能
先看效果图(稍微丑点…,功能可以就行)当搜索框没有内容的时候下方是不显示的1、html部分 <view style="margin-top: 50rpx;"> <input type="text" v-model="searchText" style="border: 1rpx solid red;width: 90%;margin: 30rpx auto;"/...原创 2020-05-08 15:44:48 · 659 阅读 · 0 评论 -
uni上拉加载更多,下拉刷新
我用的是uni插件库的一个插件:下载地址1、下载完成后需要改一点东西,他的文档中是这样写的,试了一下不行,自己又改的上代码: <s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData"> <view class="right" v-for="(item,index) in good...原创 2020-04-11 16:30:05 · 322 阅读 · 0 评论 -
uni点击导航栏滚动到本页面对应位置
html部分<view class="nav-list" v-show="isList"> <view class="list-text" v-for="(item,index) in navList" :key="index" @tap="clickNav(index)">{{item.text}}</view></view>js部分(...原创 2020-04-08 13:47:13 · 2486 阅读 · 1 评论 -
uni小程序计算两地经纬度距离
1、首先要去腾讯位置服务申请一个key2、开通webserviceAPI服务:控制台 -> key管理 -> 设置(使用该功能的key)-> 勾选webserviceAPI -> 保存(小程序SDK需要用到webserviceAPI的部分服务,所以使用该功能的KEY需要具备相应的权限)3、下载微信小程序JavaScriptSDK,微信小程序JavaScriptSDK ...原创 2020-04-02 11:22:13 · 3816 阅读 · 0 评论 -
uni-app小程序地图打点
1、html部分 <view class="content"> <map class="maps" :markers="covers" scale="5"></map> </view>2、js部分 data() { return { latitude: '', longitude: '', covers:[...原创 2020-03-31 14:32:37 · 1744 阅读 · 0 评论 -
uni小程序自定义导航栏组件
html部分<!-- 动态绑定行内样式,根据不同手机 的通知栏高度显示不同的高度 --> <view class="nav" :style="{paddingTop:phoneHeight + 'px'}"> <image src="../../static/image/left.png" mode="" @click="returnBefore">&l...原创 2020-03-31 14:21:42 · 508 阅读 · 0 评论 -
uni小程序搜索历史
直接上代码html部分:搜索框部分<view class="u1"> <view class="sousuo"> <input type="text" value="" placeholder="请输入关键字搜索" focus="true" v-model="text" @confirm="searchText($event)" /> ...原创 2020-03-31 14:10:21 · 594 阅读 · 0 评论 -
小程序对订单进行分类
1、请求接口拿到全部的订单数据后,要把它分类到对应的状态中,如下图2、根据后台返回数据的状态进行分类在循环数据之前要对每一个进行重新赋值避免出现重复 //重新初始化赋值 this.arr1 = [] this.arr2 = [] this.arr3 = [] this.arr4 = [] this.arr5 = [] ...原创 2020-03-31 13:30:51 · 591 阅读 · 0 评论 -
小程序微信支付
框架:uni1、在main.js中封装好方法:在下面写上:Vue.prototype.$wxPay = wxPay2、在点击去充值的时候请求接口,在成功的回调中调用main.js定义的方法this.$wxPay(res.data.data,this.succCall,this.failCall)succCall是支付成功的回调failCall是支付失败的回调...原创 2020-01-30 13:58:59 · 211 阅读 · 0 评论 -
小程序处理时间格式(兼容iOS和安卓)
1、定义一个变量获取当前时间、时间的格式let date = new Date()let seperator = "-" // 如果想要其他格式 只需 修改这里 2、获取当前的周几和时分秒并进行处理let hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours() let minute = da...原创 2020-03-31 10:23:04 · 928 阅读 · 0 评论 -
uni-app小程序处理后台返回的form表单数据并展示
先来看一下设计图1、先请求接口看一下后台返回的数据2、我们需要处理的数据只是data中的report_from,所以把report_from赋值给一个空数组:this.reportList = res.data.data3、在点击提交请求提交接口之前对数据进行处理因为每一条数据都是一个对象,所以循环之前定义一个空对象,然后对数据进行循环,把值塞进这个空对象,在下面要把这个对象传给后台...原创 2020-03-31 10:15:06 · 6917 阅读 · 1 评论 -
微信小程序登录(uni-app)
(实习生一枚,初次写博客有问题请及时联系,进入正题)这个项目是一个理发的预约项目先来看一下登录成功后的设计图吧话不多说,直接上代码吧这里直接用小程序提供的登录api—》@getuserinfo,点击登录后触发事件,在这里传入了一个e对象,输出一下e对象中的数据,里面的userInfo中的数据就是我们要用到的一些数据下面是登录的第一部分代码我用的是uni-app,利用uni.lo...原创 2020-01-26 19:18:03 · 766 阅读 · 1 评论