前端 - 简忆博客

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

2021-01-06 前端

最新在做下载点击下载类型小程序，主要用到小程序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 前端

4312 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 前端

5061 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

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

2021-01-03 前端

3655 0

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

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

2021-01-02 前端

4151 0

1、uniapp小程序端下载视频可以使用 uni.saveVideoToPhotosAlbum(OBJECT)，保存视频到系统相册。参数名类型必填说明filePathString是视频文件路径，可以是临时文件路径也可以是永久文件路径successFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）实例：<view;class="button"> <button;type="default";@click="uploadVideo">保存到相册</button> </view>js代码<script> expo

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

2021-01-01 前端

3532 0

放置按钮，如果用于没有授权就显示授权按钮，否则就显示用户微信信息。<template> ;;;;;;;;<view> ;;;;;;;;<view;v-if="userInfo;!=''"> ;;;;;;;;;;;;<view> ;;;;;;;;;;;;;;;;<image;:src="userInfo.avatarUrl";mode=""></image> ;;;;;;;;;;;;</view> ;;;;;;;;;;;;<view> ;;;;;;;;;;;;;;;;{{userInfo.nickName}} ;;;;;;;;;;;;</view> ;;;;;;;;;;;;</view> ;;;;;;;;;;;;<view;v-else> ;;;;;;;;;;;;;;;;<button;op

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

2020-12-31 前端

3379 0

在做项目的时候，小项目可以不考虑封装，项目大的话就得考虑请求接口封装了，我们在改动的时候也方便，而且节省了很多代码。以下是一个简单的封装例子，供大家参考和使用1、;首先在更目录下新建util文件夹，在里面新建个api.js1、在api.js添加如下请求代码const;BASE_URL;=;"http://www.example.com" let;ajaxTimes=0; export;const;myRequest;=;(option)=>{ ;;;;;;;; ;;;;;;;;;ajaxTimes++; ;;;;;;;;;uni.showLoading({ ;;;;;;;;;;;;;;;;;;;;;;;;;;;;title:;"加载中", ;;;;;;;;;;;;;;;;;;;;;;;mask:;true,

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

2020-12-30 前端

2638 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 切换第一次加载时可能渲染不及时，可以在

uniapp实现轮播图功能，实现轮播图案例

2020-12-29 前端

6101 0

uni-app轮播图主要用到swiper滑块视图容器。一般用于左右滑动或上下滑动，比如banner轮播图。实现案例：页面代码<template>  ;;;;;;;;;;;;;;;;;;;<view> ;;;;;;;;;;;;;;;;;;;;;;;;;;;;<view;class="page-section;swiper"> ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;<view> ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;<swiper;:indicator-dots="indicatorDots";:indicator-color="indicatorColor";:indicator-active-color="indicatorActiveC

uniapp列表数据遍历方法，实现上拉加载，下拉刷新

2020-12-28 前端

3846 0

数据列表在很多时候，经常会用到，这里介绍uniapp数据遍历方法。步骤一：首先开启上拉加载，下拉刷新打开pages.json,添加如下代码，开启enablePullDownRefresh{ "path":;"pages/index/index", style":{ "enablePullDownRefresh":;true ;;;;;;;;;} }步骤二、代码实现1、页面模板代码：遍历数据，没有数据是显示的提示内容<template>  <view> ;;;;;;;;;<view;v-for="(item);in;List";;@click="play(item.id)"> ;;;;;;;;;;;;;;;;;;;&

uniapp自定义头部任务栏，任务栏高度自适应问题

2020-12-27 前端

3359 0

非H5端，手机顶部状态栏区域会被页面内容覆盖。这是因为窗体是沉浸式的原因，即全屏可写内容。uni-app提供了状态栏高度的css变量--status-bar-height，如果需要把状态栏的位置从前景部分让出来，可写一个占位div，高度设为css变量。<template> ;;<view> ;;;;;;<view> ;;;;;;;;;; ;;;;;;</view> ;;;;;;<view>;状态栏下的文字;</view> ;;</view> </template>;;; <style> ;;.status_bar;{ ;;;;;;height:;var(--status-bar-height); ;;;;;;widt

2020-12-26 前端

3737 0

Pages 存放uniapp所有页面Static 存放静态资源，比如字体图标，图片等Unpackage 存放打包输出的文件App.vue; 项目的根组件Main.js 项目的入口文件，项目在加载首先会加载main.jsMainifest.json ;用来配置我们应用打包的东西，配置打包后配置文件Pages.json 用来设置我们整个项目的文件存放路径、外观等Uni.scss 一些常用的样式变量

解决window下HBuilderX无法运行iphone真机问题

2020-12-25 前端

2952 0

本想着用iphone真机来调试项目，结果HBuilderX一直不显示iphone，博主使用的是iTunes链接iphone的。后面网上找了很多方法，后面发现是iTunes版本问题，请下载12.9.4.102之前的版本。这里提供版本下载：iTunes64_v12.9.2.6附件下载流程：扫码关注“简忆工作室”，回复关键词“itunes”，获取下载链接成功运行。

window下uniapp如何运行iphone整机调试

2020-12-24 前端

3092 0

1、首先下载itune,进入苹果官网下载https://www.apple.com.cn/itunes/鼠标滚动到底部然后点击立即下载适用于 Windows 的最新版本。这里提供itunes百度云下载：下载方法：微信扫一扫下方二维码，关注“简忆工作室”公众号，回复itunes2、下载好之后双击文件安装。点击下一步正在安装安装结束打开软件1、用数据线把手机连接电脑，点击信任电脑，输入密码2、;;连接成功状态连接后手机端提示证书设置->通用->设备管理进入设置运行成功界面

layui如何自定义layedit富文本编辑器工具栏

2020-12-23 前端

2789 0

layui自带了layedit富文本编辑器，我们在使用过程中有时候不需要全部工具，或者想自定义工具栏，该如何弄呢？以下方法教大家自定义自己的layedit编辑器。步骤1：定义存放编辑器的盒子<div;class="layui-form-item;layui-form-text"> ;;;;;;;;;<label>小程序内容</label> ;;;;;;;;;<div> ;;;;;;;;;;;;;;;;;;;<textarea;name="min_content";class="layui-textarea;content";id="content";;style="display:none";placeholder="请输入META描述";&

解决uniapp运行到微信开发者工具报 [微信小程序开发者工具] [error] IDE service port disabled. To use CLI Call错误问题

2020-12-22 前端

5736 0

对于新手刚接触uni-app开发的小伙伴来说，这个错误问题在第一次开发uniapp的时候，会遇到如下问题[微信小程序开发者工具] [error] IDE service port disabled. To use CLI Call, please enter y to confirm enabling CLI capability, or manually open IDE -> Settings -> Security Settings, and set Service Port On.解决方法步骤1、打开微信开发者工具，点击左边小程序，点击以下设置按下2、进入设置界面，切换到安全选项，勾选服务端口再次运行，ok了，成功运行，不再报错了

如何创建uniapp，并运行项目

2020-12-20 前端

2242 0

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。1、打开HBuilderX，点击文件新建1、;运行到浏览器3、编译中4、运行到小程序，设置微信开发者工具安装目录

花一个多月时间学习写的一个laravel8+vue后台

2020-12-17 前端

2663 0

系统说明本系统基于laravel8+vue+elementUI开发，实现前后端分离。环境说明php7.4+mysql5.6+nginx+redis接口文档登录界面功能模块历时一个月写的一个基于vue+elementUI后台，包含角色权限、系统设置、文章管理、echarts数据报表、登录等功能。编写后端接口，实现前后端分的一个项目，经过一个多月业余时间的学习和编写，算是基本完成了项目的打包和上线，算是入了门吧。

Vue实现路由懒加载，路由优化策略

2020-12-16 前端

2146 0

当打包构建项目时，JavaScript包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同代码块，然后当路由被访问的时候在加载对应组件，这样就更加高效了。如何实现路由懒加载呢？1、安装@babel/plugin-syntax-dynamic-import或命令安装npm;install;--save-dev;@babel/plugin-syntax-dynamic-import2、在label.config.js配置中声明该插件"@babel/plugin-syntax-dynamic-import"3、将路由改为按需加载形式，示例代码如下const;Login;=;();=>;import(‘/components/Login.vue’) const;Home;=;();=>;import

vue如何打包项目，vue打包项目上线教程

2020-12-13 前端

2771 0

当我们做好项目，最后一步就是打包项目，部署到线上了。部署方法都两种，一个是通过vue的UI面板，一种是通过命令。1、Vue UI面板-简单方便我们点击UI面板左边的任务-bulid，然后再点击运行。2、进入项目根目录。通过命令打包npm;run;build以上两者都会在项目根目录创建dist文件，也就是我们打包好的项目可以看到目录下除了index.Html文件外，还有就是样式文件了，我们将其部署到服务器上即可访问。以上好就是vue打包项目的方法。

vue实现监听回车键，点击回车键出发登录按钮

2020-12-11 前端

2530 0

用户在输入账号密码以及验证码，结束后，习惯性按下回车触发按钮登录，符合用户习惯，增加用户体验度。;;created(){ ;;;;var;_this;=;this; ;;;;document.onkeydown;=;function(e);{;;;//按下回车提交 ;;;;;;;;let;key;=;window.event.keyCode;; ;;;;;;;;//事件中keycode=13为回车事件 ;;;;;;;;if;(key;==;13);{ ;;;;;;;;;;;_this.login() ;;;;;;;;} ;;;;}; ;;},登录方法methods:;{ login;();{ ;;;;console.log('触发登录按钮') } }

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

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

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

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

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

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

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

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

uniapp实现轮播图功能，实现轮播图案例

uniapp列表数据遍历方法，实现上拉加载，下拉刷新

uniapp自定义头部任务栏，任务栏高度自适应问题

uniapp目录介绍，目录文件详解

解决window下HBuilderX无法运行iphone真机问题

window下uniapp如何运行iphone整机调试

layui如何自定义layedit富文本编辑器工具栏

解决uniapp运行到微信开发者工具报 [微信小程序开发者工具] [error] IDE service port disabled. To use CLI Call错误问题

如何创建uniapp，并运行项目

花一个多月时间学习写的一个laravel8+vue后台

Vue实现路由懒加载，路由优化策略

vue如何打包项目，vue打包项目上线教程

vue实现监听回车键，点击回车键出发登录按钮

置顶推荐

代码版本管理工具Git常用命令操作

html前端按钮效果

swiper插件的使用

管理服务器常见的几个命令

标签云

浏览排行

最近热文

打赏本站

如果你觉得本站很棒，可以通过扫码支付打赏哦！

微信扫码：你说多少就多少~

支付宝扫码：你说多少就多少~

友情链接

关于简忆

官方公众号

官方小程序

技术闲聊

架构统计

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

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

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

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

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

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

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

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

uniapp实现轮播图功能，实现轮播图案例

uniapp列表数据遍历方法，实现上拉加载，下拉刷新

uniapp自定义头部任务栏，任务栏高度自适应问题

uniapp目录介绍，目录文件详解

解决window下HBuilderX无法运行iphone真机问题

window下uniapp如何运行iphone整机调试

layui如何自定义layedit富文本编辑器工具栏

解决uniapp运行到微信开发者工具报 [微信小程序开发者工具] [error] IDE service port disabled. To use CLI Call错误问题

如何创建uniapp，并运行项目

花一个多月时间学习写的一个laravel8+vue后台

Vue实现路由懒加载，路由优化策略

vue如何打包项目，vue打包项目上线教程

vue实现监听回车键，点击回车键出发登录按钮

置顶推荐

代码版本管理工具Git常用命令操作

html前端按钮效果

swiper插件的使用

管理服务器常见的几个命令

标签云

浏览排行

最近热文

打赏本站

如果你觉得本站很棒，可以通过扫码支付打赏哦！

微信扫码：你说多少就多少~

支付宝扫码：你说多少就多少~

友情链接

关于简忆

官方公众号

官方小程序

技术闲聊

架构统计

使用以下账号登录