推荐 最新
一只tomatoo

uniapp如何升级APP版本？

这里的APP版本是vue的版本吗？如何升级该版本？ "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250108/177d2c2fb6b34e671af08a14ded93d36.png)

uniapp vue.js 前端
18
1
0
浏览量284
瞳孔放大黑洞

开发uniapp用vue3有像uview一样的框架吗？

平时需要用uniapp开发项目，需要同时支付H5,微信小程序，支付宝小程序，微信公众号，支付宝生活号，但用的是vue2，这时用uview非常不错。 但是我现在想用vue3来开发新的项目，但是uview不行，那用vue3时有可用的像uview一样的框架吗？

uniapp vue3 uview
17
1
0
浏览量355
无敌英俊大师兄

低代码的页面渲染器是怎样实现的？

想了解下基于低代码平台的页面渲染器是怎么实现的(根据页面渲染器生成一个页面)，有没有开源的项目可以参考下。 注：技术栈VueJs

低代码 vue.js 微前端 uniapp
15
1
0
浏览量264
办公室高手

uniapp 发布APP时怎么打dev和prod包？

config.js里怎么配置，配置好后又怎么知道打的包是开发环境的包还是生产环境的包？ app是不是不能打包？有人试过么？ "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241225/7ca7af0f7d7f556629a1a312b2e0b286.png)

uniapp 打包apk 生产环境 开发环境
18
1
0
浏览量193
明道

【uniapp】新手求助！vuex的问题，为什么会报module namespace not found in xxx？

"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250111/73edf58ddea31ebcc45b47f23f62c75b.png) 有哪位大佬能够帮我看看这个vuex的问题，按照网上搜索得到的，翻来覆去弄了一个小时，该检查的我都已经去检查过了，包括命名空间、导入、注册等等，感觉都没有错误，但就是报找不到state和mutation，很邪门。。。 功能实现是：goods_detail页面点击“加入购物车”，然后同步购物车数据到各个模块 涉及到的页面是goods_detail.vue、store.js、cart.js、main.js 先谢过大家！！！ 以下是三个页面完整代码： 1.goods_detail.vue ￥{{goods_info.goods_price}} {{goods_info.goods_name}} 收藏 快递：免运费 import { mapState } from 'vuex' // 按需导入 mapMutations 这个辅助方法 import { mapMutations } from 'vuex' export default { computed: { ...mapState('m_cart', ['cart']) }, data() { return { // 商品详情对象 goods_info: {}, // 渲染商品导航区域的 UI 结构 // 左侧按钮组的配置对象 options: [{ icon: 'shop', text: '店铺' }, { icon: 'cart', text: '购物车', info: 2 }], // 右侧按钮组的配置对象 buttonGroup: [{ text: '加入购物车', backgroundColor: '#ff0000', color: '#fff' }, { text: '立即购买', backgroundColor: '#ffa200', color: '#fff' } ] }; }, onLoad(options) { // 获取商品 Id const goods_id = options.goods_id // 调用请求商品详情数据的方法 this.getGoodsDetail(goods_id) }, methods: { // 把 m_cart 模块中的 addToCart 方法映射到当前页面使用 ...mapMutations('m_cart', ['addToCart']), // 定义请求商品详情数据的方法 async getGoodsDetail(goods_id) { const ans = uni.$http.get('/api/public/v1/goods/detail', { goods_id }) console.log(ans) const { data: res } = await uni.$http.get('/api/public/v1/goods/detail', { goods_id }) if (res.meta.status !== 200) return uni.$showMsg() // 使用字符串的 replace() 方法，为 img 标签添加行内的 style 样式，从而解决图片底部空白间隙的问题 res.message.goods_introduce = res.message.goods_introduce.replace(/ x.pics_big) }) }, // 左侧按钮的点击事件处理函数 onClick(e) { console.log(e) if (e.content.text === '购物车') { // 切换到购物车页面 uni.switchTab({ url: '/pages/cart/cart' }) } }, // 右侧按钮的点击事件处理函数 buttonClick(e) { // 1. 判断是否点击了 加入购物车 按钮 if (e.content.text === '加入购物车') { // 2. 组织一个商品的信息对象 const goods = { goods_id: this.goods_info.goods_id, // 商品的Id goods_name: this.goods_info.goods_name, // 商品的名称 goods_price: this.goods_info.goods_price, // 商品的价格 goods_count: 1, // 商品的数量 goods_small_logo: this.goods_info.goods_small_logo, // 商品的图片 goods_state: true // 商品的勾选状态 } // 3. 通过 this 调用映射过来的 addToCart 方法，把商品信息对象存储到购物车中 this.addToCart(goods) } } } } swiper { height: 750rpx; image { width: 100%; height: 100%; } } // 商品信息区域的样式 .goods-info-box { padding: 10px; padding-right: 0; .price { color: #c00000; font-size: 18px; margin: 10px 0; } .goods-info-body { display: flex; justify-content: space-between; .goods-name { font-size: 13px; padding-right: 10px; } // 收藏区域 .favi { width: 120px; font-size: 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-left: 1px solid #efefef; color: gray; } } // 运费 .yf { margin: 10px 0; font-size: 12px; color: gray; } .goods-detail-container { // 给页面外层的容器，添加 50px 的内padding， // 防止页面内容被底部的商品导航组件遮盖 padding-bottom: 50px; } .goods_nav { /* #ifndef APP-NVUE */ display: flex; /* #endif */ flex-direction: column; position: fixed; left: 0; right: 0; /* #ifdef H5 */ left: var(--window-left); right: var(--window-right); /* #endif */ bottom: 0; } } 2.store.js // 1. 导入 Vue 和 Vuex import Vue from 'vue' import Vuex from 'vuex' // 导入购物车的 vuex 模块 import moduleCart from './cart.js' // 2. 将 Vuex 安装为 Vue 的插件 Vue.use(Vuex) // 3. 创建 Store 的实例对象 const store = new Vuex.Store({ // TODO：挂载 store 模块 modules: { // 挂载购物车的 vuex 模块，模块内成员的访问路径被调整为 m_cart，例如： // 购物车模块中 cart 数组的访问路径是 m_cart/cart m_cart: moduleCart, }, }) // 4. 向外共享 Store 的实例对象 export default store 3.cart.js export default { // 为当前模块开启命名空间 namespaced: true, // 模块的 state 数据 state: () => ({ // 购物车的数组，用来存储购物车中每个商品的信息对象 // 每个商品的信息对象，都包含如下 6 个属性： // { goods_id, goods_name, goods_price, goods_count, goods_small_logo, goods_state } cart: [], }), // 模块的 mutations 方法 mutations: { addToCart(state, goods) { // 根据提交的商品的Id，查询购物车中是否存在这件商品 // 如果不存在，则 findResult 为 undefined；否则，为查找到的商品信息对象 const findResult = state.cart.find((x) => x.goods_id === goods.goods_id) console.log(findResult) if (!findResult) { // 如果购物车中没有这件商品，则直接 push state.cart.push(goods) } else { // 如果购物车中有这件商品，则只更新数量即可 findResult.goods_count++ } console.log(state.cart) } }, // 模块的 getters 属性 getters: {}, } 4.main.js import App from './App' import store from './store' // 导入网络请求的包 import {$http} from '@escook/request-miniprogram' // 将按需导入的 $http 挂载到 wx 顶级对象之上，方便全局调用 uni.$http = $http // 配置请求拦截器 $http.beforeRequest = function(){ uni.showLoading({ title:'数据加载中......' }) } // 配置响应拦截器 $http.afterRequest = function(){ uni.hideLoading() } // 请求根路径 https://api-hmugo-web.itheima.net https://www.uinav.com $http.baseUrl = 'https://api-hmugo-web.itheima.net' // 封装请求结果状态信息的弹框方法 uni.$showMsg = function(title = '数据请求失败！', duration = 1500){ uni.showToast({ title, duration, icon:'none' }) } // #ifndef VUE3 import Vue from 'vue' Vue.config.productionTip = false Vue.prototype.$store = store Vue.prototype.$adpid = "1111111111" Vue.prototype.$backgroundAudioData = { playing: false, playTime: 0, formatedPlayTime: '00:00:00' } App.mpType = 'app' const app = new Vue({ store, ...App }) app.$mount() // #endif // #ifdef VUE3 import { createSSRApp } from 'vue' export function createApp() { const app = createSSRApp(App) app.use(store) app.config.globalProperties.$adpid = "1111111111" app.config.globalProperties.$backgroundAudioData = { playing: false, playTime: 0, formatedPlayTime: '00:00:00' } return { app } } // #endif

javascript uniapp 前端
12
1
0
浏览量363
只想躺平

uni-app怎样让软键盘弹起时，将底部的内容自动放到键盘上面？

想问下前端大神，如果页面底部有内容，怎样让软键盘弹起时，将底部的内容自动放到键盘上面？类似下图效果： https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250102/793d69086b8487fc94590b0eca2d53d3.pnghttps://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250102/7bd4f277e26f6f6fe9665f75064a3f66.png

uniapp 前端 uni-app
13
1
0
浏览量332
577739990

uniapp的vue3全局方法app.config.globalProperties为什么一定要定义$开头的名字？

import { createSSRApp } from 'vue' import App from '@/App.vue' import dayjs from 'dayjs' import PB from '@/common/js/public.js' import '@/common/css/glob.scss' export function createApp() { const app = createSSRApp(App) app.config.globalProperties.$dayjs = dayjs; app.config.globalProperties.$PB = PB; return { app } } "main.js"大致内容是按照uniapp默认项目来写，其中"app.config.globalProperties.$PB = PB;"定义全局工具类，不知为什么，一定要用"$PB"，不能叫"PB"。 但是在PC端正常的vue3-cli建的项目，又可以用"app.config.globalProperties.PB = PB;"来定义。 这是为什么呢？

前端 vue.js html5 javascript uniapp
14
1
0
浏览量404
喵酱魔法师

uniapp 真机测试底部导航栏文字不显示问题如何解决？

我正在使用uniapp编写app，真机测试时底部导航栏设置的文字没有显示，但是在浏览器上是正常的。 { "pages": [ { "path": "pages/index/home", "style": { "navigationBarTitleText": "首页" } }, { "path": "pages/index/welcomepage", "style": { "navigationBarTitleText": "欢迎界面" } }, { "path": "pages/index/toolbar", "style": { "navigationBarTitleText": "工作台" } }, { "path": "pages/index/my", "style": { "navigationBarTitleText": "我的" } }, { "path": "pages/testview/inner2page", "style": { "navigationBarTitleText": "二级界面" } } ], "globalStyle": { "navigationBarTextStyle": "#000000", "navigationBarBackgroundColor": "#ff4000", "backgroundColor": "#ff4000" }, "tabBar":{ "selectedColor":"#ff4000", "color":"#ff4000", "list":[ { "pagePath":"pages/index/home", "text":"首页", "iconPath":"/static/home.png", "selectedIconPath":"/static/home2.png" }, { "pagePath":"pages/index/toolbar", "text":"工作台", "iconPath":"/static/toolbar.png", "selectedIconPath":"/static/toolbar2.png" }, { "pagePath":"pages/index/my", "text":"我的", "iconPath":"/static/my.png", "selectedIconPath":"/static/my2.png" } ] } } 浏览器效果： "图片.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20250121/5b840429f80744c558f5b70e6bfd6f8c.png) 真机效果： "图片.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20250121/8e45054145cc4e1480c6638472a7e2e4.png)

uniapp
9
1
0
浏览量338
少年阿T

uniapp项目选中段落文字进行排序（支持h5和小程序）

const inputVal = ref(''); const isFocused = ref(false); let textareaContext = null; // 获取 textarea 上下文 const getTextareaContext = () => { // #ifdef MP-WEIXIN return new Promise((resolve) => { const query = uni.createSelectorQuery(); query .select('#textarea') .context((res) => { textareaContext = res.context; resolve(res.context); }) .exec(); }); // #endif }; // 焦点事件处理 const onFocus = () => { isFocused.value = true; getTextareaContext(); }; const onBlur = () => { isFocused.value = false; }; // 处理编号逻辑 const handleNumbering = (type, cursorPos) => { // 获取当前行的内容 const lines = inputVal.value.split('\n'); let currentLineIndex = 0; let currentPos = 0; let orderNumber = 1; // 用于有序列表的序号计数 // 找到光标所在行 for (let i = 0; i cursorPos) { currentLineIndex = i; break; } } // 处理编号 const newLines = lines.map((line) => { // 如果是空行，直接返回，不增加序号计数 if (!line.trim()) return line; // 移除已有的编号 line = line.replace(/^(\d+\.|[\*\-])\s*/, '').trim(); if (type === 'ol') { // 有序列表 const numberedLine = `${orderNumber}. ${line}`; orderNumber++; // 只在非空行时增加序号 return numberedLine; } else { // 无序列表 return `* ${line}`; } }); // 更新文本内容 inputVal.value = newLines.join('\n'); // 更新文本内容后的光标处理 nextTick(async () => { const newCursorPos = newLines.slice(0, currentLineIndex + 1).join('\n').length; // #ifdef H5 const textarea = document.querySelector('.respon-textarea'); if (textarea) { textarea.focus(); textarea.setSelectionRange && textarea.setSelectionRange(newCursorPos, newCursorPos); } // #endif // #ifdef MP-WEIXIN try { if (!textareaContext) { await getTextareaContext(); } textareaContext.focus({ success: () => { setTimeout(() => { textareaContext.setSelection({ start: newCursorPos, end: newCursorPos, }); }, 100); }, }); } catch (error) { console.error('设置光标位置失败:', error); } // #endif }); }; 效果图 "https://wmprod.oss-cn-shanghai.aliyuncs.com/community/FvafVXF3LLFtX03jZvJt9GywWOtG.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/community/FvafVXF3LLFtX03jZvJt9GywWOtG.png) "https://wmprod.oss-cn-shanghai.aliyuncs.com/community/FlMMAq-sZL1SdsTdqt1okL9sFaGm.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/community/FlMMAq-sZL1SdsTdqt1okL9sFaGm.png)

小程序 uniapp vue3 h5端 javascript
12
0
0
浏览量263
ciiiiinema

请教一下，uniapp项目断网或者连的不是指定的网络？该怎么判断？

我现在有几种可能性：1、断网的情况 2、连接的不是指定的网络，这两张情况都不能访问项目，当用户正在处理的时候，突然出现这两种情况，怎么给他友好提示？当用户没有任何操作的时候，突然断网或者服务挂了或者不是指定的网络，怎么才能给他提示？

uniapp
10
1
0
浏览量352