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

uniapp打包app提示通讯录权限问题，如何取消通讯录权限

2022-10-01

HBuilderX使用云打包时提示：通讯权限问题，需要重新实名认证。云端服务器返回错误:本次打包选择了通讯录权限,请登录开发者中心(https://dev.dcloud.net.cn)完成实名认证后再继续打包!如不需要使用通讯录权限,请在manifest.json页面取消通讯录权限后,重新提交打包。通讯录权限配置: 1.App模块配置: Contact(通讯录): 2. App权限配置:android.permission.READ_CONTACTS由于项目中不需要用到通讯录权限，所以需要取消通讯录权限

Uniapp如何引入自定义样式文件

2022-02-23

1699 0

首先我们在项目根目录下创建目录并创建我们的css文件common.css打开项目下的App.vue文件，添加如下代码，引入我们的自定义的样式css文件<style lang=”scss”> @important “common/common.css” </style>

uniapp下微信小程序报错TypeError: Cannot read property 'forceUpdate' of undefine

2022-02-14

4511 0

uniapp下微信小程序报错TypeError: Cannot read property 'forceUpdate' of undefine解决方法出现这个问题是因为uniapp项目里面没有配置好小程序appid，我们打开项目下的manifest.json文件，添加下小程序appid即可

uniapp小程序实现登录授权获取用户信息

2021-12-30

2471 0

登录授权获取用户信息，本文使用的新版的登录授权接口，结合后端ThinkPHP6框架实现1、放置授权登录按钮<template> <view class="userinfo" v-if="userInfo !=''"> <view class="userimg"> <image :src="userInfo.avatar" mode=""></image> </view> <view class="nickName"> {{userInfo.nickName}} </view> </view> <view class="userinfo" v-else> <view class="userimg"> <image src="../../static/tx.png" mode=""></image> &l

uniapp微信小程序更新版本提示

2021-12-30

1179 0

uniapp实现更新是用户打开显示版本更新提示打开app.vue文件夹，在onLaunch方法下加入如下代码const updateManager = uni.getUpdateManager() updateManager.onCheckForUpdate(function (res) { ;// 请求完新版本信息的回调 console.log(res.hasUpdate) }) // 下载新版本 updateManager.onUpdateReady(function () { uni.showModal({ title: '更新提示', content: '新版本已经准备好，是否重启应用？', success(res) { if (res.confirm) { // 重启应用 updateManager.applyUpdate() } } }) }) // 新版本下载

uniapp判断平台场景

2021-05-16

1635 0

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

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

2021-05-15

2941 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

4184 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

3594 0

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

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

2021-01-22

2119 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

4098 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

2231 0

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

uniapp制作自定义调试基座

2021-01-17

2798 0

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

uniapp打包app教程

2021-01-16

2189 0

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

uniapp设置app端icon图标

2021-01-15

5265 0

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

uniapp 获取系统唯一信息APP端

2021-01-14

3477 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

5795 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

3420 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

6406 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

3531 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

4268 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