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

uniapp判断平台场景

2021-05-16

开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。在开发项目过程中，有时想判断平台如何判断呢？平台判断有2种场景，一种是在编译期判断，一种是在运行期判断。编译期判断;编译期判断，即条件编译，不同平台在编译出包后已经是不同的代码。//;#ifdef;H5; alert("只有h5平台才有alert方法") //;#endif如上代码只会编译到H5的发行包里，其他平台的包不会包含如上代码。运行期判断;运行期判断是指代码已经打入包中，仍然需要在运行期判断平台，此时可使用 uni.getSystemInfoSync().platform 判断客户端环境是 Android、iOS 还是小程序开发工具（在百度小程序开发工具、微信小程序开发工具、支付宝小程序开发工具中使用 uni.getSystemInfoSync().platform 返回值均为 devtools）。switch(uni.getSystemInfoSync().platform){ ;;;;case;'android': ;;;;;;;console.log('运行Android上') ;;;;;;;break; ;;;;case;'ios': ;;;;;;;console.log('运行iOS上') ;;;;;;;break; ;;;;default: ;;;;;;;console.log('运行在开发者工具上') ;;;;;;;break; }

uniapp预编译器错误：代码使用了scss/sass语言，但未安装相应的编译器插件，请前往插件市场安装该插件:

2021-05-15

305 0

20:49:47.904 开始差量编译...20:49:48.601 预编译器错误：代码使用了scss/sass语言，但未安装相应的编译器插件，请前往插件市场安装该插件:20:49:48.611 https://ext.dcloud.net.cn/plugin?name=compile-node-sass at components\yy-video-player\yy-video-player.nvue:120:49:48.613 文件查找失败：'@./util/yy-video-player.nvue' at main.js:5引入一个视频播放插件，报上面的错误。导致出现上述现象的原因是未安装相关编译器。解决方法：1、打开HBuilderX，点击工具选项，然后点击插件安装2、切换到安装新的插件，前往插件市场安装3、找到“scss/sass编译”插件，进入下载界面，有“使用HBuilderX导入插件”和“下载插件zip”两种方式，请注意后面的注意事项。这里以下载压缩包为例子，安装步骤如下按照上面下载步骤及安装步骤，把文件解压并放到HBuilderX\plugins目录下，重启之后，即可看到已安装好该插件。

uniapp通过设置navigationStyle隐藏头部导航

2021-05-05

327 0

navigationStyle导航栏样式，仅支持 default/custom。custom即取消默认的原生导航栏{ "pages":;[;//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path":;"pages/index/index", "style":;{ "navigationBarTitleText":;"", "backgroundColor":"#4CD964" } } ], "globalStyle":;{ "navigationBarTextStyle":;"black", "navigationBarTitleText":;"uni-app", "navigationBarBackgroundColor":;"#F8F8F8", "backgroundColor":;"#F8F8F8", "navigationStyle":;"custom" } }

uniapp全局背景颜色设置方法

2021-05-05

374 0

uni-app 有一个全局背景色设置方法在根目录的 App.vue 文件里的 style 块中添加代码即可<style> /*每个页面公共css;*/ page{ background-image:;linear-gradient(to;bottom;right,;#0d2227;,;#2d5063);; } </style>

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

2021-01-22

533 0

以下收藏了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

534 0

小程序跳转到其他小程序主要用到uni.navigateToMiniProgram（{}）方法，模板页面里面放置点击方法。<template> ;;;;;;;;;<view> ;;;;;;;;;;;;;;;;;;;<view;@click="getUrl('wx8235re9af079b91','pages/index/index')">简忆知音</view> ;;;;;;;;;</view> </template>这里写了一个方法，通过传递小程序appid和首页地址，来实现跳转<script> export;default;{ ;;;;;;;;;methods:;{ ;;//;小程序跳转 ;;;;;;;;;;;getUrl(appId,path){ ;;;;;;;;;;;;;;;;;;;;;uni.navigateToMiniProgram({ ;;;;;;;;;;;;;;;;;;;;;;;;;;;;appId:;appId, ;;;;;;;;;;;;;;;;;;;;;;;;;;;;path:;path, ;;;;;;;;;;;;;;;;;;;;;;;;;;;;success(res);{ ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;//;打开成功 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;} ;;;;;;;;;;;;;;;;;;;;;}) ;;;;;;;;;;;} ;;} } </script>

uniapp复制至剪贴板的使用

2021-01-19

555 0

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

uniapp制作自定义调试基座

2021-01-17

533 0

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

uniapp打包app教程

2021-01-16

463 0

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

uniapp设置app端icon图标

2021-01-15

590 0

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

uniapp 获取系统唯一信息APP端

2021-01-14

748 0

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

858 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

600 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('用户点击确定'); ;;;;;;;;};else;if;(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

913 0

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

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

2021-01-10

597 0

获取点击后置可以使用@change：<radio-group> 中的选中项发生变化时触发 change 事件，event.detail = {value: 选中项radio的value}<template> <view> ;;;;;;;;<view> ;;;;;;;;;;;;<radio-group;@change="radioChange"> ;;;;;;;;;;;;;;;;<label;class="uni-list-cell;uni-list-cell-pd";v-for="(item,;index);in;items";:key="item.value"> ;;;;;;;;;;;;;;;;;;;;<view> ;;;;;;;;;;;;;;;;;;;;;;;;<radio;:value="item.value";:checked="index;===;current";/> ;;;;;;;;;;;;;;;;;;;;</view> ;;;;;;;;;;;;;;;;;;;;<view>{{item.name}}</view> ;;;;;;;;;;;;;;;;</label> ;;;;;;;;;;;;</radio-group> ;;;;;;;;</view> ;;;;</view> </template> export;default;{ ;;;;data();{ ;;;;;;;;return;{ ;;;;;;;;;;;;items:;[{ ;;;;;;;;;;;;;;;;;;;;value:;PHP, ;;;;;;;;;;;;;;;;;;;;name:;'PHP' ;;;;;;;;;;;;;;;;}, ;;;;;;;;;;;;;;;;{ ;;;;;;;;;;;;;;;;;;;;value:;前端, ;;;;;;;;;;;;;;;;;;;;name:;'前端', ;;;;;;;;;;;;;;;;;;;;checked:;'true' ;;;;;;;;;;;;;;;;};;;;;;;;;;;;], ;;;;;;;;;;;;current:;0 ;;;;;;;;} ;;;;}, ;;;;methods:;{ ;;;;;;;;radioChange:;function(evt);{ ;;;;;;;;;;;;for;(let;i;=;0;;i;<;this.items.length;;i++);{ ;;;;;;;;;;;;;;;;if;(this.items[i].value;===;evt.target.value);{ ;;;;;;;;;;;;;;;;;;;;this.current;=;i; ;;;;;;;;;;;;;;;;;;;;break; ;;;;;;;;;;;;;;;;} ;;;;;;;;;;;;} ;;;;;;;;} ;;;;} }注：多个按钮组的话可以定义一个数组，使用push（）往数组追加元素，结合数组去重方法，来判断是否为空。//去重函数 unique4(arr){ ;;var;hash=[]; ;;for;(var;i;=;0;;i;<;arr.length;;i++);{ ;;;;;;;;;for;(var;j;=;i+1;;j;<;arr.length;;j++);{ ;;;;;;;;;;;if(arr[i]===arr[j]){ ;;;;;;;;;;;;;;;;;;;++i; ;;;;;;;;;;;} ;;;;;;;;;} ;;;;;;;;;;;hash.push(arr[i]); ;;} ;;return;hash; },

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

2021-01-09

724 0

可以使用form将组件内的用户输入的<switch> <input> <checkbox> <slider> <radio> <picker> 提交。例子：<template> ;;;;<view> ;;;;;;;;<view> ;;;;;;;;;;;;<form;@submit="formSubmit";@reset="formReset"> ;;;;;;;;;;;;;;;;<view;class="uni-form-item;uni-column"> ;;;;;;;;;;;;;;;;;;;;<view>switch</view> ;;;;;;;;;;;;;;;;;;;;<view> ;;;;;;;;;;;;;;;;;;;;;;;;<switch;name="switch";/> ;;;;;;;;;;;;;;;;;;;;</view> ;;;;;;;;;;;;;;;;</view> ;;;;;;;;;;;;;;;;<view;class="uni-form-item;uni-column"> ;;;;;;;;;;;;;;;;;;;;<view>radio</view> ;;;;;;;;;;;;;;;;;;;;<radio-group;name="radio"> ;;;;;;;;;;;;;;;;;;;;;;;;<label> ;;;;;;;;;;;;;;;;;;;;;;;;;;;;<radio;value="radio1";/><text>选项一</text> ;;;;;;;;;;;;;;;;;;;;;;;;</label> ;;;;;;;;;;;;;;;;;;;;;;;;<label> ;;;;;;;;;;;;;;;;;;;;;;;;;;;;<radio;value="radio2";/><text>选项二</text> ;;;;;;;;;;;;;;;;;;;;;;;;</label> ;;;;;;;;;;;;;;;;;;;;</radio-group> ;;;;;;;;;;;;;;;;</view> ;;;;;;;;;;;;;;;;<view;class="uni-form-item;uni-column"> ;;;;;;;;;;;;;;;;;;;;<view>checkbox</view> ;;;;;;;;;;;;;;;;;;;;<checkbox-group;name="checkbox"> ;;;;;;;;;;;;;;;;;;;;;;;;<label> ;;;;;;;;;;;;;;;;;;;;;;;;;;;;<checkbox;value="checkbox1";/><text>选项一</text> ;;;;;;;;;;;;;;;;;;;;;;;;</label> ;;;;;;;;;;;;;;;;;;;;;;;;<label> ;;;;;;;;;;;;;;;;;;;;;;;;;;;;<checkbox;value="checkbox2";/><text>选项二</text> ;;;;;;;;;;;;;;;;;;;;;;;;</label> ;;;;;;;;;;;;;;;;;;;;</checkbox-group> ;;;;;;;;;;;;;;;;</view> ;;;;;;;;;;;;;;;;<view;class="uni-form-item;uni-column"> ;;;;;;;;;;;;;;;;;;;;<view>slider</view> ;;;;;;;;;;;;;;;;;;;;<slider;value="50";name="slider";show-value></slider> ;;;;;;;;;;;;;;;;</view> ;;;;;;;;;;;;;;;;<view;class="uni-form-item;uni-column"> ;;;;;;;;;;;;;;;;;;;;<view>input</view> ;;;;;;;;;;;;;;;;;;;;<input;name="input";placeholder="这是一个输入框";/> ;;;;;;;;;;;;;;;;</view> ;;;;;;;;;;;;;;;;<view> ;;;;;;;;;;;;;;;;;;;;<button;form-type="submit">Submit</button> ;;;;;;;;;;;;;;;;;;;;<button;type="default";form-type="reset">Reset</button> ;;;;;;;;;;;;;;;;</view> ;;;;;;;;;;;;</form> ;;;;;;;;</view> ;;;;</view> </template><script> ;;;;export;default;{ ;;;;;;;;data();{ ;;;;;;;;;;;;return;{ ;;;;;;;;;;;;} ;;;;;;;;}, ;;;;;;;;methods:;{ ;;;;;;;;;;;;formSubmit:;function(e);{ ;;;;;;;;;;;;;;;;console.log('form发生了submit事件，携带数据为：';+;JSON.stringify(e.detail.value)) ;;;;;;;;;;;;;;;;var;formdata;=;e.detail.value ;;;;;;;;;;;;;;;;uni.showModal({ ;;;;;;;;;;;;;;;;;;;;content:;'表单数据内容：';+;JSON.stringify(formdata), ;;;;;;;;;;;;;;;;;;;;showCancel:;false ;;;;;;;;;;;;;;;;}); ;;;;;;;;;;;;}, ;;;;;;;;;;;;formReset:;function(e);{ ;;;;;;;;;;;;;;;;console.log('清空数据') ;;;;;;;;;;;;} ;;;;;;;;} ;;;;} </script> ; <style> ;;;;.uni-form-item;.title;{ ;;;;;;;;padding:;20rpx;0; ;;;;} </style>

uniapp重置页面滚动条方法

2021-01-08

556 1

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

uniapp如何锁定屏幕方向

2021-01-07

706 0

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

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

2021-01-06

596 0

最新在做下载点击下载类型小程序，主要用到小程序progress滚动条，用于显示下载进度<progress;:percent="percent";show-info;:active='isDown';stroke-width="10";v-if="down==1";activeColor="#31a3fb"/>但是，博主在做小程序的时候发现滚动条一开始一直从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

476 0

在做uni-app项目的时候，我们有时需要判断是否相等，相等给它加上不同的class以下是个简单的例子<view;;v-for="(item);in;detail.num";@click="btnDetail(item)";;:class="[item==p?;'num_item;on':'','num_item']">{{item+1}}</view><script> ;;;;;;;;;export;default;{ ;;;;;;;;;;;;;;;;;;;data();{ ;;;;;;;;;;;;;;;;;;;;;;;;;;;;return;{ ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;p:;0 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;} ;;;;;;;;;;;;;;;;;;;}, ;;;;;;;;;;;;;;;;;;;onLoad(option);{ ; ;;;;;;;;;;;;;;;;;;;}, ;;;;;;;;;;;;;;;;;;;methods:;{ ;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;} ;;;;;;;;;} </script>通过上面的例子。我们主要用到[item==p? 'num_item on':'','num_item']判断是否相等

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

2021-01-04

582 0

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

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

2021-01-03

593 0

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