UNI
uni-app:nvue:配置底部安全区域(hbuilderx 3.7.3)
一，文档地址: https://uniapp.dcloud.net.cn/collocation/manifest-app.html#full-manifest 如图: 说明：offset:底部安全区域偏移， "none"表示不空出安全区域， "auto"自动计算空出安全区域 二，编辑配置文件: m ......
uni-app 滚动通知组件的实现
uni-app 滚动通知组件的实现 一、实现思路 二、使用scroll-view 组件实现 <template> <view class="notice"> <scroll-view class="notice-scroll" :scroll-y="true" :scroll-with-animat ......
uni-app:nvue:居左/居右/居中对齐(hbuilderx 3.7.3)
一，代码: 居中: <view style="position: fixed;bottom:0;width:750rpx;height: 60rpx; display: flex;flex-direction: row;justify-content:center;"> <span>{{appNam ......
半天时间写完一个案例，循序渐进的掌握uni-app，使用uni-app完成一个简单项目——新闻列表
一、创建项目 uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。 uni-app在手，做啥都不愁。即使不跨端，uni-ap ......
小程序原生 转 uni-app
1. 下载miniprogram-to-uniapp npm install miniprogram-to-uniapp -g 2. 项目下打开终端 wtu -i "你的小程序项目路径" 如：wtu -i "G:wx_project" 回车后: 在项目根目录出现一个后缀为_uni的目录 -- 就是转 ......
uni-app:ios/android中的nvue和vue页面加载自定义字体(hbuilderx 3.7.3)
一，官方文档地址: https://uniapp.dcloud.net.cn/tutorial/nvue-api.html#addrule 二，代码 1,nvue页面: 模板 <view class="listTitle"> {{item.title}} </view> <view style="w ......
uni-app:tabbar自定义中间凸起按钮的tabbar(hbuilderx 3.7.3)
一，官方文档地址: https://uniapp.dcloud.net.cn/collocation/pages.html#tabbar https://uniapp.dcloud.net.cn/api/ui/tabbar.html#ontabbarmidbuttontap 二，代码 1，pages ......
uni-simple-router路由组件的使用问题
1、uni-simple-router路由组件导致无法使用eventChannel 进行页面跳转传值——使用路由导航传值 2、导致onBackPress事件被阻止一次后失效——使用路由暴力解锁。 const router = createRouter({ platform: process.env. ......
uni——uni-file-picker的使用
使用自己服务器上传文件，选择过一次后，再次选择限制次数规则无效，选择事件触发后添加ref做清空处理clearFiles() ......
uni-app框架
1. uni-app简介 uni-app 是一个使用vue的语法 + 微信小程序的标签和API的跨平台前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台，几乎覆盖所有流量端，uni-app 具有跨端数量更多、性能体验更优秀、学习成本低、开发成本低等几大关键优势。 2 ......
uni.request拦截器
uni.requset 1 uni.request({ 2 url:'', // 地址 3 data:{}, // 请求body 4 header:{}, //请求header 5 method: '', // 请求方式 'GET'/'POST'/'PUT'/'DELETE' 6 success: ......
uni-app:微信小程序:预加载字体文件(hbuilderx 3.7.3)
一，官方文档地址: https://uniapp.dcloud.net.cn/api/ui/font.html 二，js代码： 1,app.vue <script> export default { onLaunch: function() { console.warn('当前组件仅支持 uni_m ......
uni-app:button中添加图片/图标时与文字对齐(hbuilderx 3.7.3)
一，js代码： 1,html： <!-- 语音音阶动画 end--> <button class="btn" @click="goRecord"> <uni-icons :type="micType" size="30"></uni-icons> {{title}} </button> <view ......
微信小程序uni-app开发中遇到的踩坑一二三事
兼容问题 开发者工具中正常显示，在手机上运行时却出现问题 举例： tab切换效果，默认第一个tab是激活状态，后面的是未激活状态，初始化是正常的（这里的激活状态与其他初始状态的区别在于字体颜色不一样，添加一个class控制样式） 问题：切换，当前点击激活的是正常的，其他的都无法显示，开发者工具上可正 ......
Uni-app使用socket.io进行开发.浏览器端没有问题,打包成APP存在问题
重写 socket.io-client 的 engin.io-client 处理件，h5 依旧使用原生 WebSocket，APP 与小程序使用 uni-app 的 WebSocket 协议，所以 h5 端任然可以支持长轮询等方式，APP 与小程序只能支持 WebSocket 协议。 https:/ ......
教你在HbuilderX上使用模拟器运行uni-app,良心教学！！！
文章目录一、下载安装HbuilderX和逍遥模拟器（准备工作） 二、添加adb.exe到环境变量 三、在HbuilderX中连接模拟器 一、下载安装HbuilderX和逍遥模拟器（准备工作） 1.下载安装HbuilderX HbuilderX官网链接：https://www.dcloud.io/hb ......
关于使用 uni app 开发的小程序，在 Android 上 image 标签本地图片加载失败的问题
一句话结论：使用 v-bind + require 就能解决。 今天碰到一个奇葩的问题，使用 uni app 开发的小程序，image 标签在 iOS 和 Android 上表现不一致，在我的机器（iOS）上可以显示，Android 上就是空白一片。下面是示例代码： <image src="/sta ......
uni.showModal安卓环境操作按钮顺序对调
问题： uni.showModal在H5、IOS等环境中确认按钮在右边，安卓中则在左边。 解决方案： 添加如下代码后，重新编译后生效。 // 在main.js中添加如下代码 // #ifdef APP-PLUS if (uni.getSystemInfoSync().platform == "and ......
uni-app中左滑右滑页面
在H5项目中有时候会遇到左滑右滑的问题，左滑去上一个页面，右滑去下一个页面 通过以下代码即可实现 <view @touchstart="touchStart" @touchend="touchEnd"></view> 下边是js touchStart(e){ if (e.touches.length ......
uni-app的基本使用
b站视频地址：https://www.bilibili.com/video/BV1BJ411W7pX/?spm_id_from=333.337.search-card.all.click 基础部分： 环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件的使用 uni-app中样式学习 在 ......
uni-app 实现市级定位
uni-app 实现市级定位 <template> <view class=""> </view> </template> <script> export default { data() { return {}; }, onLoad(option) { const self = this; sel ......
uni-app中的input限制输入两位小数
<input v-model="inputAmount" type="digit" @input="replaceInput" /> replaceInput(event) { // 必须在nextTick中 this.$nextTick(() => { this.inputAmount = eve ......
使用uni-app写小程序，解析含有html标签的富文本
最近在改一个项目，将html+js+css的项目改成小程序，我说使用的uni来写的，其中遇到一个问题，就是需要解析富文本，在vue中可以直接使用v-html， 但是小程序中的标签都是view，text以及image等，该怎么办呢 于是在uni官网找到插件u-parse <u-parse :conte ......
记uni-app中多重数组在子组件中更新页面问题（粗心所致，非问题）
简介 如下图所示，传递一个对象到子组件中，让子组件渲染数据，同时将数据改变，这里面最恐怖的就是自定义的单选按钮。 如下图所示，子组件数据这里面有两个数组，第一个数组topicReply，第二个数组question_stem，当界面单选时，修改的是question_stem数组中的内容，当内容改变时， ......
uni-app px与rpx的转换
uniapp尺寸单位 px转rpx uniapp尺寸单位uni-app 支持的通用 css 单位 包括 px、rpx。px即屏幕像素rpx（responsive pixel) 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx实际显示 ......
uni-app+js uni-datetime-picker扩展组件，禁用某个日期不可选择
参考链接： https://blog.csdn.net/qq_40881695/article/details/124894009 1、 props: { // 禁用日期 disabledDate:{ type: Function }, } 2、 props: { // 禁用日期 disabledD ......
uni-app云开发入门
云函数 首先创建一个uniapp项目，创建项目时选择启用uniCloud云开发。 创建项目成功后，按照下面的步骤进行开发。 创建云函数 1.关联云服务器 2.创建云函数 一个云函数可以看成是一个后台接口 云函数实现 'use strict'; exports.main = async (event, ......
uni APP 怎么打开支付宝小程序
uni APP 怎么打开支付宝小程序，直接上代码 // #ifdef APP-PLUS uni.getSystemInfo({ success(res) { if (res.platform == 'android') { var info = `alipays://platformapi/star ......
uni-app:获取当前经纬度解决方案+如何布置全局组件
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 一.布置全局组件 在我们开发的过程中，会碰到一个现象，就是在页面里面引入组件，总算要写import，components才能引用，这里给大家分享我们的一个解决方案 1.首先要建立一个components文件夹，用来放我们的所有组件 2.然 ......