uni-app,uni-app开发教程,uni-app知识系列问题

uniapp小程序路由与跳转页面的几种方法收藏

2021-01-22

以下收藏了uniapp小程序的5种路由与页面跳转方法，供大家参考。1、uni.navigateTo(OBJECT)：保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。示例：//在起始页面跳转到test.vue页面并传递参数 uni.navigateTo({ url:'test?id=1&name=uniapp' });2、uni.redirectTo(OBJECT)：关闭当前页面，跳转到应用内的某个页面。示例：uni.redirectTo({ url:'test?id=1' });3、uni.reLaunch(OBJECT)：关闭所有页面，打开到应用内的某个页面。示例：uni.reLaunch({ url:'test?id=1' });4、uni.switchTab(OBJECT)：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。uni.switchTab({ url:'/pages/index/index' });5、uni.navigateBack(OBJECT)：关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。示例：//注意：调用navigateTo跳转时，调用该方法的页面会被加入堆栈，而redirectTo方法则不会。见下方示例代码 //此处是A页面 uni.navigateTo({ url:'B?id=1' });//此处是B页面 uni.navigateTo({ url:'C?id=1' });//在C页面内navigateBack，将返回A页面 uni.navigateBack({ delta:2 });

uniapp实现跳转到其他微信小程序方法

2021-01-21

216 0

小程序跳转到其他小程序主要用到uni.navigateToMiniProgram（{}）方法，模板页面里面放置点击方法。简忆知音这里写了一个方法，通过传递小程序appid和首页地址，来实现跳转 exportdefault{ methods:{ //小程序跳转 getUrl(appId,path){ uni.navigateToMiniProgram({ appId:appId, path:path, success(res){ //打开成功 } }) } } }

uniapp复制至剪贴板的使用

2021-01-19

236 0

uniapp小程序中，有时需要复制内容到剪贴板，可以使用以下方法实现点击按钮复制至手机剪贴板。复制复制方法代码： exportdefault{ methods:{ copy(){ wx.setClipboardData({ data:'我是文字', success:function(res){ wx.getClipboardData({ success:function(res){ wx.showToast({ title:'复制成功' }); } }); } }); } } }

uniapp制作自定义调试基座

2021-01-17

211 0

什么是自定义调试基座？开发者真实打包后的手机应用又无法通过运行方式来调试，这导致涉及manifest配置的内容调测变的很困难。为了解决manifest配置相关调试的便利性问题，DCloud提供了制作自定义运行基座的功能，也就是开发者可类似DCloud一样，自己做一个运行基座，里面使用的是自定义的manifest配置。开发者打包了自定义运行基座，就可以把这个基座运行到手机/Android模拟器上，进行日志查看。制作步骤：1、打开IDE编辑器顶部菜单，运行-》运行到手机或模拟器-》制作自定义调试基座。2、勾选使用公共测试证书和选择打自定义基座，可以发现制作自定义基座和发布app界面是一样的。最后点击打包就可以了，等级几分钟时间，即可完成。如何使用自定义调试基座？上面弄好自定义基座之后，我们就可点击头部菜单，运行-》运行到手机或模拟机-》运行基座选择。来运行我们的项目。

uniapp打包app教程

2021-01-16

200 0

1、在mainfest.json文件下配置好相关的引用图标之后，我们可以点击顶部菜单栏，找到发行-》元素App-云打包2、这里只勾选安卓app打包3、选择公共证书，最后点击打包即可4、正在打包5、打包校验6、出现上面这个错误是因为我们的社区账号还没绑定手机，绑定下即可。至此出现下面结果，极为打包成功

uniapp设置app端icon图标

2021-01-15

276 0

uniapp自带的图标不好看，我们想弄属于自己的app图标怎么弄呢?以下方法教大家更换图标icon。1、点击项目想的mainfest.json文件2、选择app图标配置，这里需要准备一张1024*1024的图片选择图片即可更换。

uniapp 获取系统唯一信息APP端

2021-01-14

351 0

uniapp获取手机设备相关信息,唯一标识,型号厂商等方法Device模块管理设备信息，用于获取手机设备的相关信息，如IMEI、IMSI、型号、厂商等。通过plus.device获取设备信息管理对象。imei：设备的国际移动设备身份码imsi: 设备的国际移动用户识别码model:设备的型号vendor:设备的生产厂商uuid:设备的唯一标识//获取设备信息 plus.device.getInfo({ success:function(e){ console.log('getDeviceInfosuccess:'+JSON.stringify(e)); }, fail:function(e){ console.log('getDeviceInfofailed:'+JSON.stringify(e)); } }); //获取设备的国际移动设备身份码 console.log("IMEI:"+plus.device.imei); //获取设备的国际移动用户识别码 console.log("IMSI:"+plus.device.imsi); //获取设备的型号 console.log("Model:"+plus.device.model); //获取设备的生产厂商 console.log("Vendor:"+plus.device.vendor);

uniapp获取系统信息（屏幕宽度、高度、手机型号、设备像素比）

2021-01-13

380 0

屏幕高度 = 原生NavigationBar高度（含状态栏高度）+ 可使用窗口高度 + 原生TabBar高度windowHeight不包含NavigationBar和TabBar的高度H5端，windowTop等于NavigationBar高度，windowBottom等于TabBar高度App端，windowTop等于透明状态NavigationBar高度，windowBottom等于透明状态TabBar高度示例：uni.getSystemInfo({ success:function(res){ console.log(res.model); console.log(res.pixelRatio); console.log(res.windowWidth); console.log(res.windowHeight); console.log(res.language); console.log(res.version); console.log(res.platform); } });其他参数说明参数说明平台差异说明brand手机品牌App、微信小程序、百度小程序、字节跳动小程序、QQ小程序model手机型号pixelRatio设备像素比screenWidth屏幕宽度screenHeight屏幕高度windowWidth可使用窗口宽度windowHeight可使用窗口高度windowTop可使用窗口的顶部位置App、H5windowBottom可使用窗口的底部位置App、H5statusBarHeight状态栏的高度字节跳动小程序不支持navigationBarHeight导航栏的高度百度小程序titleBarHeight标题栏高度支付宝小程序language应用设置的语言字节跳动小程序不支持version引擎版本号H5不支持storage设备磁盘容量支付宝小程序currentBattery当前电量百分比支付宝小程序appName宿主APP名称字节跳动小程序AppPlatformApp平台QQ小程序host宿主平台百度小程序app当前运行的客户端支付宝小程序cacheLocation上一次缓存的位置信息百度小程序system操作系统版本platform客户端平台，值域为：ios、androidfontSizeSetting用户字体大小设置。以“我-设置-通用-字体大小”中的设置为准，单位：px微信小程序、支付宝小程序、百度小程序、QQ小程序SDKVersion客户端基础库版本支付宝小程序和H5不支持swanNativeVersion宿主平台版本号百度小程序albumAuthorized允许微信使用相册的开关（仅 iOS 有效）微信小程序cameraAuthorized允许微信使用摄像头的开关微信小程序locationAuthorized允许微信使用定位的开关微信小程序microphoneAuthorized允许微信使用麦克风的开关微信小程序notificationAuthorized允许微信通知的开关微信小程序notificationAlertAuthorized允许微信通知带有提醒的开关（仅 iOS 有效）微信小程序notificationBadgeAuthorized允许微信通知带有标记的开关（仅 iOS 有效）微信小程序notificationSoundAuthorized允许微信通知带有声音的开关（仅 iOS 有效）微信小程序bluetoothEnabled蓝牙的系统开关微信小程序locationEnabled地理位置的系统开关微信小程序wifiEnabledWi-Fi 的系统开关微信小程序safeArea在竖屏正方向下的安全区域App、H5、微信小程序safeAreaInsets在竖屏正方向下的安全区域插入位置（2.5.3+）App、H5、微信小程序

uniapp几个弹窗的使用方法

2021-01-12

261 0

1、showToast：显示模态弹窗，类似于标准 html 的消息框：alert、confirm。主要用于消息提示框使用方法：uni.showToast({ title:'联系方式格式错误', duration:2000, image:'/static/cry.png' });参数类型必填说明平台差异说明titleString否提示的标题contentString否提示的内容showCancelBoolean否是否显示取消按钮，默认为 truecancelTextString否取消按钮的文字，默认为"取消"，最多 4 个字符cancelColorHexColor否取消按钮的文字颜色，默认为"#000000"H5、微信小程序、百度小程序confirmTextString否确定按钮的文字，默认为"确定"，最多 4 个字符confirmColorHexColor否确定按钮的文字颜色，H5平台默认为"#007aff"，微信小程序平台默认为"#3CC51F"，百度小程序平台默认为"#3c76ff"H5、微信小程序、百度小程序successFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）2、uni.hideToast()：主要用于隐藏消息提示框。使用方法：uni.hideToast();3、uni.showLoading(OBJECT)：显示 loading 提示框, 需主动调用 uni.hideLoading 才能关闭提示框。使用方法：uni.showLoading({ title:'加载中' });参数类型必填说明平台差异说明titleString是提示的内容maskBoolean否是否显示透明蒙层，防止触摸穿透，默认：falseApp、微信小程序、百度小程序successFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）4、uni.hideLoading()：隐藏 loading 提示框。使用方法：uni.showLoading({ title:'加载中' }); setTimeout(function(){ uni.hideLoading(); },2000);5、uni.showModal(OBJECT)：显示模态弹窗，类似于标准 html 的消息框：alert、confirm。使用方法：uni.showModal({ title:'提示', content:'这是一个模态弹窗', success:function(res){ if(res.confirm){ console.log('用户点击确定'); }elseif(res.cancel){ console.log('用户点击取消'); } } });参数类型必填说明平台差异说明titleString否提示的标题contentString否提示的内容showCancelBoolean否是否显示取消按钮，默认为 truecancelTextString否取消按钮的文字，默认为"取消"，最多 4 个字符cancelColorHexColor否取消按钮的文字颜色，默认为"#000000"H5、微信小程序、百度小程序confirmTextString否确定按钮的文字，默认为"确定"，最多 4 个字符confirmColorHexColor否确定按钮的文字颜色，H5平台默认为"#007aff"，微信小程序平台默认为"#3CC51F"，百度小程序平台默认为"#3c76ff"H5、微信小程序、百度小程序successFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）success返回参数说明参数类型说明confirmBoolean为 true 时，表示用户点击了确定按钮cancelBoolean为 true 时，表示用户点击了取消（用于 Android 系统区分点击蒙层关闭还是点击取消按钮关闭）

uniapp radio按钮组修改样式，自定义radio样式

2021-01-11

437 0

uniapp组件radio按钮官方的样式不好看，我们可以自己定义自己的样式，根据我们的主题样式来。1、页面代码：课程语文数学英语 2、自定义样式，以下根据需求修改 /*选中后的背景样式（红色背景无边框可根据UI需求自己修改）*/ .radioboxradio.wx-radio-input.wx-radio-input-checked{ background:#3c77ed; border:1pxsolid#3c77ed; } /*选中后的对勾样式（白色对勾可根据UI需求自己修改）*/ .radioboxradio.wx-radio-input.wx-radio-input-checked::before{

uniapp radio-group点击获取值，判断非空方法实现

2021-01-10

302 0

获取点击后置可以使用@change：中的选中项发生变化时触发 change 事件，event.detail = {value: 选中项radio的value} {{item.name}} exportdefault{ data(){ return{ items:[{ value:PHP, name:'PHP' }, { value:前端, name:'前端', checked:'true' }], current:0 } }, methods:{ radioChange:function(evt){ for(leti=0;i

uniapp表单数据提交及获取方法

2021-01-09

373 0

可以使用form将组件内的用户输入的提交。例子： switch radio 选项一选项二 checkbox 选项一选项二 slider input Submit Reset exportdefault{ data(){ return{ } }, methods:{ formSubmit:function(e){ console.log('form发生了submit事件，携带数据为：'+JSON.stringify(e.detail.value)) varformdata=e.detail.value uni.showModal({ content:'表单数据内容：'+JSON.stringify(formdata), showCancel:false }); }, formReset:function(e){ console.log('清空数据') } } } .uni-form-item.title{ padding:20rpx0; }

uniapp重置页面滚动条方法

2021-01-08

270 1

Uniapp重置滚动条可以使用以下方法对页面距离进行重置距离uni.pageScrollTo({ scrollTop:0,//距离页面顶部的距离 duration:300 });

uniapp如何锁定屏幕方向

2021-01-07

321 0

有时我们app需要禁止旋转，可以使用以下方法。打开项目根目录下的App.vue，添加如下代码即可//#ifdefAPP-PLUS //锁定屏幕方向 plus.screen.lockOrientation('portrait-primary'); //#endif参数简介"portrait-primary": 竖屏正方向；"portrait-secondary": 竖屏反方向，屏幕正方向按顺时针旋转180°；"landscape-primary": 横屏正方向，屏幕正方向按顺时针旋转90°；"landscape-secondary": 横屏方向，屏幕正方向按顺时针旋转270°；"portrait": 竖屏正方向或反方向，根据设备重力感应器自动调整；"landscape": 横屏正方向或反方向，根据设备重力感应器自动调整；

如何解决uniapp小程序下载进度条问题

2021-01-06

319 0

最新在做下载点击下载类型小程序，主要用到小程序progress滚动条，用于显示下载进度但是，博主在做小程序的时候发现滚动条一开始一直从0开始赋值，然后滚动条就一直抖动闪动。看看下载进度数据打印，也没看出什么问题。解决方法如下：进度条值默认为0，博主通过判断当前最新下载进度大于90的时候，再赋值给进度条。等于100的时候延时隐藏loading加载，再延时4s显示成功弹窗。downloadTask.onProgressUpdate((res)=>{ if(res.progress>90){ this.percent=res.progress } if(res.progress==100){ setTimeout(function(){ uni.hideLoading(); uni.showToast({ title:"保存成功", icon:"success" }); },4000); } console.log('下载进度'+res.progress); console.log('已经下载的数据长度'+res.totalBytesWritten); console.log('预期需要下载的数据总长度'+res.totalBytesExpectedToWrite); });最后再来看看效果：可以明显的看到进度条没有再之前那样抖动了。以上是博主的一种解决思路，如有其它更好的方法，欢迎下方留言或者加入技术交流群，共同探讨。

uni-app判断是否相等。相等的话追加不同class

2021-01-05

208 0

在做uni-app项目的时候，我们有时需要判断是否相等，相等给它加上不同的class以下是个简单的例子{{item+1}} exportdefault{ data(){ return{ p:0 } }, onLoad(option){ }, methods:{ } } 通过上面的例子。我们主要用到[item==p? 'num_item on':'','num_item']判断是否相等

uni-app跳转到详情页方法及详情页数据接收

2021-01-04

271 0

思路：给列表项加上点击方法，并且传递id参数使用路由API由uni.navigateTo,保留当前页面，跳转到应用内的某个页面文章详情页接收id，并且传递给后端去查询改id详情数据1、保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。给列表加上点击方法，并且传递id参数 @click="play(item.id)" {{item.vod_continu}} {{item.vod_name}} {{item.vod_content}} 2、跳转到文章详情页点击跳转到play /play.vue详情页，使用跳转uni.navigateTo(OBJECT) 接口uni.navigateTo({ url:'../play/play?id='+id }) exportdefault{ data(){ return{ homeData:[] } }, onLoad(){ this.getVod() }, methods:{ //详情页 play(id){ uni.navigateTo({ url:'../play/play?id='+id }) } } } 3、文章详情页接收id，并且传递给后端去查询改id详情数据 exportdefault{ data(){ return{ id:''//定义id参数，默认为空 } }, onLoad(option){ this.id=option.id }, methods:{ asyncgetDetail(id){ varthat=this constres=awaitthis.$myRequest({ url:'/api/Uniapp/getdetail?id='+id+'&p='+that.p }) that.detail=res.data.data uni.setNavigationBarTitle({ title:res.data.data.vod_name }); } } }

解决苹果ios或安卓手机整机调试报本应用无法运行,需与Hbuilderx搭配使用问题

2021-01-03

314 0

1．在 HBuilderx 中选择可运行到手机的项目2 ．将手机连接到电脑， HBuilderx 会自动检测手机3 ．点击 HBuilderx 的菜单运行一运行到手机，会将项目部署到手机上如无法同步应用，请参考故障排查指南问题分析首先分析下问题，博主一开始是可以调试的，后面才出现问题的，所以可以pass掉HBuilderx版本问题，其次驱动是正常连接的，所以驱动问题也可以排除。按照官方参考故障排除指南走一遍，没问题。解决方法所以解决方法很简单，就是重启手机，在停止HBuilderx调试，在点击运行到手机，完美解决。

uniapp小程序端如何实现下载视频到相册和下载图片到相册

2021-01-02

228 0

1、uniapp小程序端下载视频可以使用 uni.saveVideoToPhotosAlbum(OBJECT)，保存视频到系统相册。参数名类型必填说明filePathString是视频文件路径，可以是临时文件路径也可以是永久文件路径successFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）实例：保存到相册 js代码 exportdefault{ data(){ return{ textValue:'',//文本内容 videoUrl:'' } }, onLoad(){ }, methods:{ uploadVideo(){ constdownloadTask=uni.downloadFile({ url:'https://www.exame.com/121.mp4', success:(res)=>{ if(res.statusCode===200){ uni.showToast({ title:"视频连接正确", icon:"none" }); console.log(res) uni.saveVideoToPhotosAlbum({ filePath:res.tempFilePath, success:function(){ uni.showToast({ title:"保存成功", icon:"none" }); }, fail:function(e){ console.log(e) uni.showToast({ title:"保存失败，请稍后重试", icon:"none" }); } }); } } }); downloadTask.onProgressUpdate((res)=>{ console.log('下载进度'+res.progress); console.log('已经下载的数据长度'+res.totalBytesWritten); console.log('预期需要下载的数据总长度'+res.totalBytesExpectedToWrite); }); } } } 2、uniapp小程序端下载图片可以使用uni.saveImageToPhotosAlbum(OBJECT)，保存图片到系统相册。只需把上面的uni.saveVideoToPhotosAlbum替换为uni.saveImageToPhotosAlbum即可

uniapp小程序端获取用户头像，账号信息

2021-01-01

378 0

放置按钮，如果用于没有授权就显示授权按钮，否则就显示用户微信信息。 {{userInfo.nickName}} 授权 js代码实现：获取用户信息操作，并赋值给数组。 exportdefault{ data(){ return{ userInfo:[] } }, onLoad(){ this.changeLogin(); }, methods:{ changeLogin(){ //授权 //获取用户详细信息,可以获取到说明已经授权过,直接拿到用户信息 uni.getUserInfo({ provider:'weixin', //授权成功的回调 success(res){ //console.log(res) }, //第一次进入小程序 fail(){ uni.showToast({ title:'请点击授权进行登录', icon:'none' }); } }); }, /** *用户同意授权个人微信信息 *@param{Object}e用户的信息 */ onGotUserInfo(e){ varthat=this that.userInfo=e.detail.userInfo console.info(e.detail.userInfo) } } } page{background-color:#f4f3f3;} .content{display:flex;flex-direction:column;} .userinfo{width:100%;align-items:center;text-align:center;background-color:#31A3FB;padding-top:80rpx;padding-bottom:80rpx;} .userimg{width:150rpx;height:150rpx;border-radius:50%;overflow:hidden;margin:0auto;} .userimgimage{width:150rpx;height:150rpx;display:inline-block;} .nickName{font-size:35rpx;color:#FFFFFF;margin-top:20rpx;} .userinfobutton{width:200rpx;height:80rpx;margin:0auto;font-size:35rpx;}

uni-app如何封装请求接口数据并挂载到全局

2020-12-31

245 0

在做项目的时候，小项目可以不考虑封装，项目大的话就得考虑请求接口封装了，我们在改动的时候也方便，而且节省了很多代码。以下是一个简单的封装例子，供大家参考和使用1、首先在更目录下新建util文件夹，在里面新建个api.js1、在api.js添加如下请求代码constBASE_URL="http://www.example.com" letajaxTimes=0; exportconstmyRequest=(option)=>{ ajaxTimes++; uni.showLoading({ title:"加载中", mask:true, }); returnnewPromise((resolve,reject)=>{ uni.request({ url:BASE_URL+option.url, method:option.method||'GET', data:option.data||{}, success:(res)=>{ if(res.data.code!=200){ //uni.showToast({ //title:'获取数据失败' //}) } resolve(res) }, fail:(err)=>{ uni.showToast({ title:'请求接口失败' }) reject(err) }, //完成之后关闭加载效果 complete:()=>{ ajaxTimes--; if(ajaxTimes===0){ //关闭正在等待的图标 uni.hideLoading(); } } }) }) }2、挂载到全局main.jsimport{myRequest}from'./util/api.js' Vue.prototype.$myRequest=myRequest3、使用方法 exportdefault{ data(){ return{} }, onLoad(){ this.getVod() }, methods:{ asyncgetVod(){ constres=awaitthis.$myRequest({ url:'/api/Uniapp/home' }) console.log(res) } } } 4、接口访问结果

uni-app使用tabBar实现底部导航

2020-12-30

274 0

1、tabBar简介如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定一级导航栏，以及 tab 切换时显示的对应页。在 pages.json 中提供 tabBar 配置，不仅仅是为了方便快速开发导航，更重要的是在App和小程序端提升性能。在这两个平台，底层原生引擎在启动时无需等待js引擎初始化，即可直接读取 pages.json 中配置的 tabBar 信息，渲染原生tab。2、注意事项当设置 position 为 top 时，将不会显示 icontabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。tabbar 切换第一次加载时可能渲染不及时，可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花（hello uni-app使用了此方式）tabbar 的页面展现过一次后就保留在内存中，再次切换 tabbar 页面，只会触发每个页面的onShow，不会再触发onLoad。顶部的 tabbar 目前仅微信小程序上支持。需要用到顶部选项卡的话，建议不使用 tabbar 的顶部设置，而是自己做顶部选项卡，可参考 hello uni-app->模板->顶部选项卡。3、实现方法打开pages.json文件，添加如下代码{ "pages":[//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path":"pages/index/index" }, { "path":"pages/all/all" }, { "path":"pages/search/search" }, { "path":"pages/user/user" } ], "tabBar":{ "color":"#7A7E83", "selectedColor":"#febf0f", "borderStyle":"black", "backgroundColor":"#292b40", "list":[{ "pagePath":"pages/index/index", "iconPath":"static/home.png", "selectedIconPath":"static/home_m.png", "text":"首页" }, { "pagePath":"pages/all/all", "iconPath":"static/all.png", "selectedIconPath":"static/all_m.png", "text":"全部" }, { "pagePath":"pages/search/search", "iconPath":"static/sear.png", "selectedIconPath":"static/sear_m.png", "text":"搜索" }, { "pagePath":"pages/user/user", "iconPath":"static/user.png", "selectedIconPath":"static/user_m.png", "text":"我的" } ] } }