uni
【uni-app】【01】底部导航栏与页面切换
1.（配置文件在哪）uni-app 路由控制是在 pages.json文件中的。 2.（基本配置项有哪些）初学的时候主要有三个配置项，①pages ② globalStyle ③ tabbar [!TOC] 接下来主要是对这三个配置项做一个简单介绍。 pages 负责页面管理。不需要自己写的，你在项 ......
uni-app 页面传值 tabbar切换
场景：tabbar页面是展示一个列表，页面中有一个搜索按钮，点击按钮进入搜索页面，输入字段以后返回tabbar页面展示相应的搜索结果，切换tabbar页面后搜索条件置空 方案1：使用navigateTo 跳转传值 坑1：因为搜索页要跳转的是tabbar页面，不能直接使用navigateTo 跳转，只 ......
uni-app列表页的实现，下拉翻页，思路也适用其他手机端，h5和小程序等
pc端的列表页面，通常有个页码，一页页的加载数据。 手机端的页面就不能这么做了，通常是需要用户滚动页面，到最底部时，加载下一页的数据。 页面上元素有：搜索框、for列表、无数据。 定义变量：搜索输入值searchValue、列表数组list、页码page、是否无更多notMore、是否显示无数据sh ......
顶象uni-app版设备指纹上线，满足企业多平台服务需求
某旅游公司，在短视频平台上发布了自己的小程序服务。用户观看精彩旅游直播或视频时，可以转到视频平台的小程序上查阅详细路线套餐。该旅游公司想详细了解来访者的更多情况，以便于进行深度营销，为用户提供个性化服务。经过多番比较，他们选用了顶象uni-app版设备指纹。 顶象uni-app版设备指纹，通过用户上 ......
uni-app 踩坑之旅3
接下来记录下相关使用细节： 1、为了方便直接选用 uview ui框架使用，为了配合 vue3，项目引入 uview-plus ~ 2、顶部导航条，使用 u-tabs: 3、图片轮播，u-swiper 4、可滑动屏幕，scroll-view 计算滚动区域高度： return { navHeight: ......
uniapp系列-超详细教你在uni-app+vue3里通过web-view组件传递信息打开H5页面写入localstorage并解决兼容性
web-view是什么 web-view 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面（nvue 使用需要手动指定宽高）。 点击这里直达官网文档 点击这里下载我的代码demo 本文最下面还有一些==常见或者奇怪问题解决方案==哦~ 为什么使用这种方式搞页面？有什么好处呢？ ......
uni中使用轮播图
最近在写一个类似于滚动弹幕，使用纯css，效果有点假，不太真实 因此想起来uni中有轮播图，可以直接使用 <swiper class="swiper" style="height:90rpx;" circular vertical="true" :autoplay="true" :interval= ......
Flutter 集成 uni小程序（UniMPSDK）
原文地址 amoshk.top 又是一段成为鸽子的日子，今天我们直接来上手一把，简单聊聊如何在 Flutter 中集成并使用小程序。 在国内环境下，小程序盛行，随着功能的庞大，许多业务上也需要进行支持，帮助开发进行抽离（减少宿主 APP 频繁发版、方便形成生态、便于独立进行测试与漏洞修复等），使用者 ......
uni-app实现类似confirm提示框的效果
uni.showModal({ title: '提示', content: '这是一个模态弹窗', success: function (res) { if (res.confirm) { console.log('用户点击确定'); } else if (res.cancel) { console ......
uni-app接口请求封装
首先根目录下新建文件夹取名随意，这里我取名common（意为：常见的、共有的） 然后新建request.js文件，贴入以下代码 let server_url = ''; //请求根路径（服务器地址）let token = '';//token令牌// process.env.NODE_ENV 'de ......
uni-app 介绍及使用
一、什么是uni-app uni-app由dcloud公司开发的多端融合框架，是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。最大的优势 ......
uni-app:input的样式调整(hbuilderx 3.7.3)
一，js代码： <template> <view> <input class="inputText" style="width:700rpx;height:76rpx;" v-model="mobile" placeholder="请输入手机号" ></input> <view style="dis ......
UNI APP消息推送
1、在应用信息，各平台应用中设置包名。 2、开通服务空间。 https://unicloud.dcloud.net.cn/ 配置云函数URL。 2、在dclound开发者中心开通推送功能。 地址：https://dev.dcloud.net.cn/ ......
2023-04-14 uni-popup 报错：Error in config.errorHandler: "RangeError: Maximum call stack size exceeded"
问题描述：首次导入uniapp的uni-popup，在项目中使用时报错，业务场景为：页面渲染完成后显示弹窗。 报错：Error in config.errorHandler: "RangeError: Maximum call stack size exceeded" config.errorHan ......
uni-app中IM的发送的修改以及回滚底部的修改
在使用的过程中发现输入文字之后没有相关的发送按钮，所以对TUIKit/TUIPages/TUIChat/components/message-input/index.vue做微调，如下微调内容： 添加@input方法 <input class="TUI-message-input-area" :ad ......
uni-app小程序添加IM聊天以及音视频
uni-app开发小程序的过程中，需要继承IM的聊天以及音视频功能，因为我是放在分包里的， 步骤如下： 按照文档要求，然后在相关的界面引用就可以了。 音视频引入： 这里引入之后还有一个问题是你必须每次在微信开发工具构建npm一下，具体操作如下： 在微信开发工具终端依次输入如下指令： npm init ......
uni-app 踩坑之旅2
首先是 axios ，拿到 uni-app 测试项目中，不好使，需要改成自带的 uni.request 请求，于是乎重新封装了下 request：https://uniapp.dcloud.net.cn/api/request/request.html import { getItem, remov ......
uni-app 网络请求
一、网络请求 在uni中可以调用uni.request方法进行请求网络请求需要注意的是：在小程序中网络相关的 API 在使用前需要配置域名白名单。 配置请求 一下为发送网络请求的基本配置，可根据接口请求数据方法的不同，以不同的方式请求数据 var baseURL = "/api" var baseU ......
关于uni_app的生命周期
什么是生命周期？ 生命周期是从 创建 运行 到销毁 这整个过程称为生命周期 生命周期分为三大类 应用级 页面级 组件级 应用生命周期(仅可在App.vue中监听) onLacunh ：应用初始化完成触发一次，全局只触发一次、 onShow : 应用启动的时候，或者从后台进入前台 onHide : 应 ......
uni-app vue2升级vue3过程中遇到的问题总结
首先是在升级的过程中，项目跑不起来，相关的问题不贴图了，解决办法简单粗暴，就是卸载，重装最新版Hbuilder X。可以解决一大部分问题。 再次，会出现如下报错： 是因为我在main.js中app.use 的问题，直接注释。然后发现还有如下问题： 排查了好久才发现，是因为写在app.vue中的检测小 ......
uni-app:app:锁定屏幕方向禁止屏幕旋转(hbuilderx 3.7.3)
一，第一种方法：js代码: App.vue <script> export default { onLaunch: function() { console.warn('当前组件仅支持 uni_modules 目录结构 ，请升级 HBuilderX 到 3.1.0 版本以上！') console.l ......
uni-app（5）
uni-app（5） static 目录下的文件不会被编译，如果这里面有 es6 代码，不经过转换直接运行，则会报错；同样的，less、scss 等资源也不要放入这里面 根目录中的 uni.scss 会自动引入 uni-app 完整支持 Vue 里面的生命周期，此外，还包括它本身的 应用生命周期 和 ......
uni-app:npm安装js-md5第三方库(hbuilderx 3.7.3 / npm 9.5.0)
一，安装js-md5第三方库: 1，执行npm命令: liuhongdi@liuhongdideMacBook-Pro poem % npm install --save js-md5 added 1 package in 460ms npm notice npm notice New minor ......
uni-app 踩坑之旅1
有移动端需求，正好趁此机会学学 uni-app 先下载个 hello 模板看一看：https://ext.dcloud.net.cn/plugin?id=4941 然后按照教程学习：https://uniapp.dcloud.net.cn/tutorial/ 使用模板创建个新项目，引入官方 css ......
Taro架构构析(1)：多端框架分析，Taro WePY uni-app对比
像Qt 和 Flutter 从底层的渲染引擎 布局引擎 中层的 DSL，再到上层的框架全部由自己开发 ，研发成本巨大。React Native 和 Weex 没有渲染引擎，渲染的一致性无法保证。JS 和 Native 之间需要通信延迟等。Taro WePY uni-app抹平小程序之间 ......
微信小程序 开发,uni-app 开发简介
微信小程序 开发相关知识点 1.如何创建小程序 微信开发者工具，appid,微信公众平台，创建小程序 2.小程序项目基本组成结构 app.js 小程序入口文件;app.json小程序配置文件；app.wxss全局样式文件；pages小程序页面 3.小程序页面构成部分 .wxml页面结构,.wxss页 ......
uni-app去掉导航栏
在package.json中添加这句 "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path": "pages/index/index", "style": { "navigation ......
uni-app 日历组件的实现
uni-app 日历组件的实现 以下是一个基于 uni-app 的简单日历组件实现代码，包括了日历的基本布局和日期选择功能： <template> <view class="calendar"> <view class="calendar-header"> <view class="calendar ......
uni-app 弹出层组件的实现
uni-app 弹出层组件的实现 以下是一个简单的 uni-app 弹出层组件的实现代码示例，它可以根据传递的属性来控制弹出层的显示和隐藏： <template> <view class="overlay " v-show="visible" @click="close" :class="{ 'ce ......