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

uniapp判断平台场景

2021-05-16

开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。在开发项目过程中，有时想判断平台如何判断呢？平台判断有2种场景，一种是在编译期判断，一种是在运行期判断。编译期判断;编译期判断，即条件编译，不同平台在编译出包后已经是不同的代码。//;#ifdef;H5; alert("只有h5平台才有alert方法") //;#endif如上代码只会编译到H5的发行包里，其他平台的包不会包含如上代码。运行期判断;运行期判断是指代码已经打入包中，仍然需要在运行期判断平

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

2021-05-15

548 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、切换到安装新的插件，前往插件市

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

2021-05-05

614 0

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

uniapp全局背景颜色设置方法

2021-05-05

747 0

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

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

2021-01-22

737 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:;'te

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

2021-01-21

1001 0

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

uniapp复制至剪贴板的使用

2021-01-19

763 0

uniapp小程序中，有时需要复制内容到剪贴板，可以使用以下方法实现点击按钮复制至手机剪贴板。<template> ;;;;;;;;;<view> ;;;;;;;;;;;;;;;;;;;<button;type="default";@click="copy">复制</button> ;;;;;;;;;<view> </template>复制方法代码：<script> ;;;;;;;;;export;default;{ ;;;;;;;;;;;;;;;;;;;methods:;{;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;copy(){ ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wx.setClipboardData({ ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

uniapp制作自定义调试基座

2021-01-17

836 0

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

uniapp打包app教程

2021-01-16

773 0

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

uniapp设置app端icon图标

2021-01-15

938 0

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

uniapp 获取系统唯一信息APP端

2021-01-14

1141 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){ ;;;;;;;;;;;;;;;;;;;

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

2021-01-13

1368 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(r

uniapp几个弹窗的使用方法

2021-01-12

900 0

1、showToast：显示模态弹窗，类似于标准 html 的消息框：alert、confirm。主要用于消息提示框使用方法：uni.showToast({ ;;title:;'联系方式格式错误', ;;duration:;2000, ;;image:;'/static/cry.png' });参数类型必填说明平台差异说明titleString否提示的标题contentString否提示的内容showCancelBoolean否是否显示取消按钮，默认为 truecancelTextString否取消按钮的文字，默认为"取消"，最多 4 个字符cancelColorHexColor否取消按钮的文字颜色，默认为"#000000"H5、微信小程序、百度小程序co

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

2021-01-11

1580 0

uniapp组件radio按钮官方的样式不好看，我们可以自己定义自己的样式，根据我们的主题样式来。1、页面代码：<view> ;;;;;;;;;<view> ;;;;;;;;;;;;;;;;;;;课程 ;;;;;;;;;</view> ;;;;;;;;;<radio-group;:name="raido";> ;;;;;;;;;;;;;;;;;;;<label> ;;;;;;;;;;;;;;;;;;;;;;;;;;;;<radio;value="语文"/><text>语文</text> ;;;;;;;;;;;;;;;;;;;</label> ;;;;;;;;;;;;;;;;;;;<label> ;;;;;;;;;;;;;;;;;;;;;;;;;;;;<radio;value="数学"

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

2021-01-10

913 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";:chec

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

2021-01-09

944 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";/&g

uniapp重置页面滚动条方法

2021-01-08

797 1

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

uniapp如何锁定屏幕方向

2021-01-07

1139 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": 竖屏正方向或反

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

2021-01-06

860 0

最新在做下载点击下载类型小程序，主要用到小程序progress滚动条，用于显示下载进度<progress;:percent="percent";show-info;:active='isDown';stroke-width="10";v-if="down==1";activeColor="#31a3fb"/>但是，博主在做小程序的时候发现滚动条一开始一直从0开始赋值，然后滚动条就一直抖动闪动。看看下载进度数据打印，也没看出什么问题。解决方法如下：进度条值默认为0，博主通过判断当前最新下载进度大于90的时候，再赋值给进度条。等于100的时候延时隐藏loading加载，再延时4s

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

2021-01-05

725 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 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;} ;;;;;;;;;;;;;;;;;;;}, ;;;;;;;;;;

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

2021-01-04

751 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> ;;;;;;;;;;;;;;;;;;;;;;;;;;;;<imag