uni-app
裴嘉靖
学而不思则罔 思而不学则殆
展开
-
uniapp中mixin的局部混入用法
新建一个bluetooth.js。原创 2023-03-09 12:07:25 · 895 阅读 · 0 评论 -
uniapp循环多选
代码运行 看效果<template> <view class="content"> <view :class="item.checked ? 'a' : ''" @tap='dianji(index)' v-for="(item,index) in arr2" style="width:100upx;height: 50uxp;border: 1px solid red;margin-top: 20upx;"> {{item.name}} </v原创 2022-04-26 15:51:19 · 512 阅读 · 3 评论 -
uniapp - 小程序版本自动更新
App.vue onShow: function () { //新版本更新 if (uni.canIUse('getUpdateManager')) { //判断当前微信版本是否支持版本更新 const updateManager = uni.getUpdateManager(); updateManager.onCheckForUpdate(function (res) {原创 2022-03-28 13:19:20 · 1438 阅读 · 0 评论 -
backdrop-filter
//backdrop-filter: blur(2px); 背景图迷糊效果//用法:<div class="box"> <div class="item"> </div></div>.box { height: 100%; width: 100%; background-image: url('http*****');}.item{ height: 100%; width: 100%; background-c原创 2022-02-25 16:49:36 · 2174 阅读 · 0 评论 -
数字变*号
console.log('手机号', res.list[i].mobile) let number = res.list[i].mobile; //获取到手机号码字段 let mphone = number.substring(0, 3) + '****' + number.substring(7); //直接写也行 res.list[i].mobile.substring(0, 3) + '****' + res.list[i].mobile.s...原创 2020-09-28 09:45:43 · 246 阅读 · 0 评论 -
小程序瀑布流组件
简单的uniapp瀑布流 拿走不谢 记得点赞组件<template> <view class="container"> <view class="waterfall_left"> <view @tap='goodInfo(item.id)' class="waterfall_item" v-for="(item,index) in listLeft" :key="index"> <view class="item_img"&原创 2022-02-22 09:43:40 · 807 阅读 · 0 评论 -
uniapp小程序更新版本提醒
在App.vue的onLaunch中写 onLaunch(options) { if (wx.canIUse('getUpdateManager')) { const updateManager = wx.getUpdateManager() updateManager.onCheckForUpdate(function (res) { // 请求完新版本信息的回调 if (res.hasUpdate) {原创 2021-10-11 17:04:12 · 565 阅读 · 0 评论 -
uniApp利用onShow获取页面传递参数方法
onShow() { const pages= getCurrentPages();//获取应用页面栈 const { id, item, vlaue....} = pages[pages.length - 1].options//获取页面传递的信息}原创 2021-10-11 16:59:31 · 2557 阅读 · 0 评论 -
小程序扫码识别
//扫码点击事件 scanCode(){ var that = this uni.scanCode({ scanType:['qrCode'], success: function (response) { console.log('条码类型:' + response.scanType); //加入response.result是:https://fish2.ygostyle.com/uploads/discount/s...原创 2021-10-11 16:54:58 · 410 阅读 · 0 评论 -
uni-app scroll-view触底刷新,实现翻页效果
//:style--方便自定义高度,scroll-Y代表纵向滚动,@scrolltolower代表触底触发的方法 <scroll-view :style="{'height':height+'rpx'}" scroll-y="true" class="scroll-Y" @scrolltolower="onReachScollBottom"> 滚动的内容 </scroll-view> onReachScollBottom() { .原创 2021-06-18 14:01:48 · 2054 阅读 · 0 评论 -
uniapp H5 端分享带参数
//[点击官网查看](https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html) <script> import wx from 'weixin-js-sdk'; // 引入微信SDK onLoad() { let local = window.location.href; this.setShare(local) }, methods:{ // 设置分享 setShare(lo.原创 2021-04-27 13:38:47 · 1456 阅读 · 0 评论 -
uniapp H5端解决ios音频自动播放
<script> import wx from 'weixin-js-sdk'; // 引入微信SDK onLoad() { let that = this; innerAudioContext = uni.createInnerAudioContext(); innerAudioContext.autoplay = true; innerAudioContext.loop = true; innerAudioContext.src ='https://vkc.原创 2021-04-27 13:28:56 · 1962 阅读 · 0 评论 -
自由飞翔的小按钮movable-area+movable-view
<movable-area> <movable-view catchtap="backTo" direction="all"> <image @tap="tabBarTap" src="../../static/index/anNiu.png" mode=""></image> </movable-view> </movable-area> movable-area{ width: 100vw;..原创 2021-01-29 17:48:03 · 158 阅读 · 0 评论 -
uniApp小程序保存图片canvas
<template> <view class="poster_box"> <!-- 显示的页面 --> <view class="myShare" > <image class="my_img" :src="app+'/yaoqing/bj.png'" mode=""></image> <view class="er_box"> <image class="er" :src="er" mo原创 2020-12-02 14:59:53 · 1051 阅读 · 0 评论 -
uniApp实现复制地址
很简单 //点击事件叫 fuZhi 直接调用现成的API fuZhi(){ uni.setClipboardData({ data:'需要的文本,一般后台给', success:res=>{ uni.showToast({ title:'复制成功', icon:'none', duration: 2000//时间 }); } }); },...原创 2020-11-27 17:05:33 · 1234 阅读 · 0 评论 -
uniapp 传对象参数
//点击的时候uni.navigateTo({ url:'../mine/index_info?item='+JSON.stringify(item)})//另一个页面接收时候onLoad(options) { this.option=JSON.parse(options.item) }原创 2020-11-24 13:55:53 · 2315 阅读 · 5 评论 -
uniApp 弹框 加载
uni.showLoading({ title: '照片上传中...' }); uni.hideToast(); //以上成对,加载之前showLoading,加载之后hideToast uni.showToast({ title: '照片上传成功,请等待后台审核', icon:'none', duration: 2000//时间 });...原创 2020-11-24 10:25:16 · 1390 阅读 · 0 评论 -
自制小箭头
好处就是省去一个小图片 不求UI 哈哈哈哈。。。<view class="jian"></view> .jian{ width:15upx; height:15upx; border-top:2px solid #fff; border-right:2px solid #fff; transform:rotate(-44deg) }原创 2020-11-23 16:54:01 · 290 阅读 · 0 评论 -
天气预报背景图渐变
background: -webkit-gradient(linear,0% 0,0% 100%,from(#50b2fb),to(#a6d4f6));原创 2020-11-20 17:46:12 · 599 阅读 · 0 评论 -
uniapp获取微信授权
<button open-type="getUserInfo" @getuserinfo="bindgetuserinfo" class="btn1">授权微信登陆</button>bindgetuserinfo(){ uni.login({ success: res => { console.log('cod') console.log(res.code); uni.g原创 2020-11-19 15:33:10 · 2471 阅读 · 1 评论 -
uniapp的富文本
<rich-text :nodes="后台给的富文本写这里就好"></rich-text>原创 2020-11-11 14:52:21 · 417 阅读 · 0 评论 -
uniApp图片加水印
这个代码直接拿走运行没啥大问题,但是,建议开发的时候,如果遇到加水印,别多选图片,没找到什么原因,就是绘制的不理想,一张一张来,可以<template> <view class="content"> <view v-for="(photo,index) in photoData" :key="index" class="photo"> <image :src="photo" @click="previewPhoto(photo,photoData)"原创 2020-11-09 10:32:28 · 3271 阅读 · 6 评论 -
uniapp小程序一个页面多个视频播放
<template> <view class=""> <!-- 热门视频 --> <view class="hot_video"> <!-- 热门视频 --> <view class="videoBox"> <view class="video_info" v-for="(item, index) in hot_video" :key="index"> <!-- 图片 -原创 2020-11-06 09:32:25 · 1661 阅读 · 0 评论 -
uniapp获取手机屏幕的高度
uni.getSystemInfo({ success: res => { this.hei = res.windowHeight; } });原创 2020-11-05 19:47:03 · 1856 阅读 · 0 评论 -
uniapp小程序页面来回点击 回到顶部
客户要求,小程序页面过长,来回点击,页面必须回到顶部。在onShow里加上这个就好了onShow() { setTimeout(() => { uni.pageScrollTo({ scrollTop: 0, duration: 0 }); }, 50); }原创 2020-11-01 19:16:17 · 1074 阅读 · 0 评论 -
瀑布流+搜索
选项卡形式的,左边是图片瀑布流,右边是视频瀑布流<template> <view> <!-- 登录授权提示 --> <loginModal @hideModal="showLogin=false" :showModal="showLogin" @success="infoSuccess"></loginModal> <view class="doorBox"> <!-- 搜索栏 --> <v原创 2020-10-30 10:12:36 · 335 阅读 · 0 评论 -
uniapp返回顶部按钮
上代码 自己试验<template> <view> <!-- 置顶按钮 --> <image src="图片" class="back_yuan" mode="" v-if="back" @tap="backtop"></image> </view></template><script>export default { data() { return { // 返回顶部按钮的隐藏原创 2020-10-30 10:08:26 · 2140 阅读 · 0 评论 -
uniapp文件上传(视频和图片)
代码看效果,接口改成自己的<template> <view class="box"> <!-- 实拍视频 --> <view> <view class="fileTitle">实拍视频</view> <view v-if="videoSrc == ''" class="file videoFile" @tap="chooseVideo"> <image style="width:112u原创 2020-10-28 09:12:27 · 6566 阅读 · 5 评论 -
uniapp图片加水印
<template> <view class="content"> <canvas style="border: 1px solid green;position: absolute;left: -5000px;" :style="{'width':w,'height': h}" canvas-id="firstCanvas" ref="mycanvas"></canvas> <button @click="getimg">获取图片<原创 2020-10-28 09:04:40 · 3717 阅读 · 6 评论 -
uniapp相册浏览
<template> <view class="pic"> <view class="waterfall"> <view v-for="(item, index) in list" :key="index" :data-id='item.id' class="waterItem" @tap="imgTap(item.image_url,list)"> <image :src="item.image_url" mode="widthFi原创 2020-10-27 09:11:49 · 1194 阅读 · 0 评论 -
uniapp先提示弹框,在跳转页面
uni.showToast({ title: "请先认证", icon: "none", duration: 2000 }); setTimeout(function() { uni.redirectTo({ url: "../company/company" }) }, 2000);原创 2020-09-01 20:14:01 · 6145 阅读 · 5 评论 -
uni-app禁止遮罩层下的页面滚动
<view @touchmove.stop.prevent>原创 2020-06-04 15:05:23 · 4440 阅读 · 6 评论 -
uni-app倒计时 请仔细阅读许可协议
setTimeout函数实机测试无效在uni-app中setTimeout的函数写法与原生JS中的写法略有不同,使用原生的写法不会报错,但该写法会不起作用官方文档<!-- 点击阅读条款 --> <view class="c9 textcertent" style="border: 1px solid red;"> <!-- 复选框 --> <checkbox @tap="checked" :data-index="index" :c原创 2020-06-04 10:51:27 · 1595 阅读 · 0 评论 -
uni-app数据驱动滑动门
//渲染页面 <view class="doorBox"> <view class="inv-h-w"> <!-- 档案池 --> <view :class="['inv-h',Inv==0?'inv-h-se':'']" @click="Inv=0">档案池</view> <!-- 中间竖线 --> <view style="height: 32upx;background-col...原创 2020-05-25 11:24:27 · 258 阅读 · 0 评论 -
角色登录如何区分
//获取后台接口 分出角色 //选定角色 存到本地存储 if(this.servicer){ /* 把区分企业和服务商的主关键字存到本地 juese:1企业 2服务商" */ uni.setStorageSync("jueseId",this.servicer.juese) let jueseId=uni.getStorageSync("jueseId") console.log(jueseId) t...原创 2020-05-22 11:11:16 · 852 阅读 · 0 评论 -
封装uni.request()
vue中的axios使用方法: this.$axios.get(url,data).then();我们封装一个模拟的vue中的axios,以方便整个项目的使用,来节省代码量 this.$H.get(url,data,options).then(); this.$H.post().then(); this.$H.delete().then();1、创建一个对象,将该对...原创 2020-05-04 16:27:49 · 2556 阅读 · 1 评论 -
uni-app的三种调取接口的方法
uni-app中调取接口的三种方式:1、uni.request({ url:'', data:'', method:'', //get、post、delete header:{}, success:res=>{}, fail:()=>{}, complete:=>{} })2、...原创 2020-05-04 10:54:48 · 28047 阅读 · 9 评论 -
uni-app 如何获取DOM 节点
【参考官网:https://uniapp.dcloud.io/api/ui/nodes-info?id=selectorqueryexec】一、如何获取SelectorQuery对象实例:let query=uni.createSelectorQuery();功能:返回一个SelectorQuery对象的实例,该实例用来查询DOM节点的信息。注意事项:(1)该方法需要在生命周期mount...原创 2020-05-02 21:57:31 · 71828 阅读 · 9 评论 -
uni-app的pages.json的各种配置
pages.json 文件用来对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。它类似微信小程序中app.json的页面管理部分。注意定位权限申请等原属于app.json的内容,在uni-app中是在manifest中配置。"pages": [ //pages数组中第一项表示应用启动页 "path" : "pages/mine/mi...原创 2020-04-30 22:36:43 · 8964 阅读 · 1 评论 -
<checkbox>单选框如何改变大小 | 事件触发
单选框如何改变大小<checkbox class="checkbox" :checked="isChecked" @tap="isChecked = !isChecked"></checkbox>//改变单选框大小.checkbox{ transform: scale(0.7);}//点击按钮判断单选框状态if(!this.isChecked){ ret...原创 2020-04-30 21:13:49 · 1534 阅读 · 0 评论