uniapp使用

原创已于 2023-05-31 21:12:15 修改 · 101 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #java #javascript

于 2023-05-28 20:03:48 首次发布

一、配置路由

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}, {
			"path": "pages/home/home",
			"style": {
				"navigationBarTitleText": "登录",
				"enablePullDownRefresh": false
			}

		}
	],

二、底部导航

"tabBar": {
		"list": [{
			"pagePath": "pages/home/home",
			"text": "首页",
			"iconPath": "static/img/home.png",
			"selectedIconPath": "static/img/home_active.png"

		}, {
			"pagePath": "pages/index/index",
			"text": "列表",
			"iconPath": "static/img/label.png",
			"selectedIconPath": "static/img/label_active.png"
		}]
	},

三、提示框

uni.showToast({ //提示框
title: '失败,请输入正确手机号',
icon: 'none',
duration: 2000
});

uni.showToast({  //成功提示框
title: '注册成功',
icon: 'success',
duration: 2000
})

//确认取消框
	uni.showModal({
		title: '提示',
		content: '确定要退出登录吗？',
		success: (res) => {
			if (res.confirm) { //用户点击确定按钮
				uni.removeStorageSync('data')
				uni.navigateTo({
					url: '/pages/home/home'
				})
			} else if (res.cancel) { //用户点击取消按钮
				uni.showToast({ //成功提示框
					title: '取消退出',
					icon: 'none',
					duration: 2000
				})
			}
		}
	});

//拨打手机号
	uni.makePhoneCall({
		phoneNumber: e
	})

4.本地存储的使用

uni.setStorageSync('data', JSON.stringify(res.data.data)) //设置

uni.getStorageSync('data') //获取

uni.removeStorageSync('data') //删除

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

lipenghao111

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

uniapp 动态生成page.json，自动拆分页面及自动注册页面

Heartnottowake的博客

01-25

2977

上面通过getPageRouter进行页面自动读取，递归子文件夹，然后生成现在所使用的所有页面目录，统一放入page.json里面，实现页面自动注册，这里就不需要modules了，如果对页面有统一配置，像style，可以在data.push里面的那个对象里面进行并入，这里写的顶栏配置只是一个例子。上面就是所有的配置文件，通过index.js去配置通用配置，通过modules去吧页面进行分类，最后在build.js里面进行重构并生成所需的page.json文件。3，build.js文件。

uniapp使用WebSocket uniapp使用WebSocket Uniapp整合WebSocket uniapp使用 websocket

半只

07-29

5296

代码中的示例只在 H5、APP环境下成功运行，小程序环境下如果无效，需要使用预编译 - 条件性的编译，适配 小程序环境#ifdef H5：针对 Web H5页面。：针对原生应用（Android 和 iOS）。：针对微信小程序。：针对支付宝小程序。：针对百度小程序。：针对字节跳动小程序。：针对 QQ 小程序。：针对快手小程序。：针对京东小程序。

参与评论您还未登录，请先登录后发表或查看评论

HBuilder X ——Uni app 学习笔记（一）

weixin_41850709的博客

10-23

1390

HBuilder X ——Uni app 学习笔记（一） 1.pages.json配置 *pages数组中第一项表示应用启动页，数组中其他项为项目中所有页面路径。 enablePullDownRefresh:是否下拉刷新 "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { ...

Uni-app开发微信小程序的一些基础知识点包括开发工具的安装和项目的初始配置运行（边学边更新）

qq_44035882的博客

08-05

7454

```uni-app```是一个使用 [Vue.js](https://cn.vuejs.org/v2/guide/) 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/快手/钉钉/淘宝）、快应用等多个平台。.................................

uniapp 微信小程序根据不同角色实现动态路由

qq_47255575的博客

12-28

3300

不同角色/已登录未登录，都有不一样的底部导航栏

uniapp动态生成pages.json路由

哈哈大王

12-11

4141

uniapp动态配置json路由文件

精选资源

uniAPP使用sqlite数据库demo

04-01

这个“uniAPP使用sqlite数据库demo”是一个示例项目，旨在展示如何在uniAPP中集成并操作SQLite数据库。下面我们将详细探讨相关知识点。 1. **uniAPP介绍**： - uniAPP是由HBuilderX开发的一款基于Vue.js的开源框架...

精选资源

Vue或uniapp使用luckysheet免费开发多人在线编辑Excel文档

04-16

使用该压缩包可以使Vue或uniapp使用luckysheet免费开发多人在线编辑Excel档使用说明可打开链接https://blog.youkuaiyun.com/weixin_43416253/article/details/124211439?spm=1001.2014.3001.5502 或在论坛中搜索“Vue或...

精选资源

uniapp使用uCharts制作趋势图

06-24

uniapp使用uCharts制作趋势图，适用于小程序。

精选资源

uniapp使用安卓模拟器详解！！！全是干货，里面有readme

02-21

在uniapp工具---设置---运行配置。adb路径选择：platform-tools中的adb.exe Android模拟器端口改为7555，安装mumu模拟器，打开后，就可以把项目直接运行到模拟器了

UNIAPP实战项目笔记55 自定义Tabbar并使用Tabbar事件拦截未登录跳转到登录页面

Ggome的博客

12-18

2768

点击购物车和我的的时候需要拦截并验证登录通过验证的直接跳转,为通过验证的跳转到登录页面通过自定义tabbar来实现。

uni-app 打包之后日志输出和调试

最新发布

07-25

<think>我们正在讨论的是在UniApp中使用TDesign组件库的教程。根据引用[1]，TDesign Mobile Vue是腾讯开源的移动端Vue组件库，特别适合Vue 3项目。而UniApp是一个使用Vue.js开发跨平台应用的框架。因此，我们需要将TDesign Mobile Vue集成到UniApp项目中。步骤： 1. 创建UniApp项目（如果已有项目则跳过） 2. 安装TDesign Mobile Vue 3. 配置UniApp以使用TDesign组件 4. 使用组件注意：由于UniApp的特殊性（跨平台，编译到小程序、H5等），我们需要确保TDesign组件在UniApp环境中兼容。目前TDesign Mobile Vue主要是为H5移动端设计的，所以在小程序端可能无法直接使用，需要额外处理。具体步骤： 1. 创建UniApp项目（使用Vue3版本）： - 使用HBuilderX创建，选择Vue3版本。 - 或者使用命令行：`npx degit dcloudio/uni-preset-vue#vite my-project`（Vue3+Vite版本） 2. 安装TDesign Mobile Vue： - 在项目根目录下执行： ```bash npm install tdesign-mobile-vue ``` 3. 配置UniApp以使用TDesign组件： - 由于UniApp的Vue3版本支持Vite，我们可以按需引入组件。 - 在`main.js`中全局引入样式和组件（或者按需引入）： ```javascript import { createSSRApp } from 'vue'; import App from './App.vue'; // 引入TDesign样式 import 'tdesign-mobile-vue/es/style/index.css'; // 引入需要的组件，例如Button import { Button } from 'tdesign-mobile-vue'; export function createApp() { const app = createSSRApp(App); // 注册组件 app.use(Button); return { app }; } ``` - 或者按需引入（推荐使用自动按需引入，如unplugin-vue-components）： - 但是，由于UniApp的特殊构建流程，使用unplugin-vue-components可能比较麻烦。因此，我们这里采用手动按需引入。 4. 在页面中使用组件： - 在.vue文件中，直接使用组件： ```vue <template> <view> <t-button theme="primary">按钮</t-button> </view> </template> ``` 5. 注意事项： - TDesign Mobile Vue是为H5设计的，所以在小程序端可能无法使用。如果需要在多端运行，特别是小程序端，建议使用TDesign的小程序版本（如TDesign Mini）或者使用条件编译。 - 在UniApp中，我们可以使用条件编译来区分平台。例如，只在H5平台使用TDesign Mobile Vue，而在小程序端使用其他UI库或自定义组件。 ```vue   <t-button theme="primary">H5按钮</t-button>    <button>小程序按钮</button>  ``` 6. 替代方案（如果需要在多端使用TDesign）： - 考虑使用TDesign UniApp版本：TDesign团队提供了UniApp版本的组件库，名为`tdesign-uniapp`。这个版本支持多端（小程序、H5等）。 - 安装：`npm install tdesign-uniapp` - 使用：在`main.js`中引入 ```javascript import TDesign from 'tdesign-uniapp'; import 'tdesign-uniapp/dist/index.css'; app.use(TDesign); ``` - 然后在页面中直接使用组件，无需条件编译（因为它支持多端）。因此，如果用户希望多端兼容，建议使用`tdesign-uniapp`。总结： - 如果只考虑H5，可以使用`tdesign-mobile-vue`，但要注意条件编译。 - 如果希望多端兼容，使用`tdesign-uniapp`。由于用户没有明确说明平台，我们给出两种方案，并推荐多端方案。教程步骤（以多端方案为例）： 1. 创建UniApp项目（Vue3版本）。 2. 安装`tdesign-uniapp`：`npm install tdesign-uniapp` 3. 在`main.js`中引入： ```javascript import { createSSRApp } from 'vue'; import App from './App.vue'; import TDesign from 'tdesign-uniapp'; import 'tdesign-uniapp/dist/index.css'; export function createApp() { const app = createSSRApp(App); app.use(TDesign); return { app }; } ``` 4. 在页面中使用组件（例如按钮）： ```vue <template> <view> <t-button theme="primary">按钮</t-button> </view> </template> ``` 5. 运行项目：在HBuilderX中运行到相应平台。注意：使用`tdesign-uniapp`时，请查阅其官方文档（如果有）以获取最新使用方式和组件示例。引用说明： [^1]: 我们参考了TDesign Mobile Vue的介绍，但实际使用中我们推荐了TDesign UniApp版本，因为用户是在UniApp中使用。 [^2]: 关于this的指向问题，在UniApp中我们通常使用Vue3的Composition API，因此不太容易遇到this未定义的问题，但如果是Options API，需要注意箭头函数和普通函数的区别。由于我们推荐了TDesign UniApp版本，因此用户需要查看该库的文档。我们可以在npm上搜索`tdesign-uniapp`，或者访问其GitHub仓库（如果有）获取详细文档。相关问题： §§相关问题§§ 1. TDesign UniApp版本支持哪些平台？ 2. 在UniApp中使用TDesign组件时，如何自定义主题？ 3. TDesign UniApp版本和TDesign Mobile Vue版本有什么区别？</think>### UniApp 使用 TDesign 组件库教程在 UniApp 中使用 TDesign 组件库需要根据具体版本选择集成方式。目前 TDesign 提供了两种适配方案： #### 方案一：使用官方 TDesign UniApp 版本（推荐） **步骤说明**： 1. **安装依赖** 在项目根目录执行： ```bash npm install tdesign-uniapp ``` 2. **全局引入组件** 在 `main.js` 中配置： ```javascript import { createSSRApp } from 'vue' import App from './App.vue' import TDesign from 'tdesign-uniapp' export function createApp() { const app = createSSRApp(App) app.use(TDesign) // 注册组件 return { app } } ``` 3. **引入样式文件** 在 `App.vue` 中添加： ```vue <style> /* 核心样式 */ @import 'tdesign-uniapp/dist/index.css'; /* 主题色（可选） */ @import 'tdesign-uniapp/dist/theme/default.css'; </style> ``` 4. **使用组件** 在页面中直接调用： ```vue <template> <view> <t-button theme="primary">确认</t-button> <t-cell title="标题" note="辅助信息" /> </view> </template> ``` #### 方案二：适配 TDesign Mobile Vue（仅限 H5） > 适用于仅需 H5 端支持的项目 ```javascript // main.js import { Button, Cell } from 'tdesign-mobile-vue' import 'tdesign-mobile-vue/es/style/index.css' const app = createSSRApp(App) app.component('t-button', Button) // 手动注册组件 app.component('t-cell', Cell) ``` #### 注意事项： 1. **多端兼容** `tdesign-uniapp` 支持微信小程序、H5、APP 三端，而 `tdesign-mobile-vue` 仅支持 H5 端[^1]。 2. **版本匹配** - UniApp Vue3 项目：需使用 TDesign v1.0.0+ - Vue2 项目：需锁定 `tdesign-uniapp@0.3.0` 3. **按需引入**（减少体积） ```javascript // 只引入按钮组件 import { Button } from 'tdesign-uniapp' app.use(Button) ``` 4. **主题定制** 在 `uni.scss` 中覆盖变量： ```scss // 修改主题色 $t-primary-color: #ff6a00; ``` #### 示例代码 ```vue <template> <view class="container"> <t-navbar title="首页" left-icon="home" /> <t-list> <t-cell title="个人中心" arrow @click="navigateTo('/profile')" /> <t-cell title="设置" arrow /> </t-list> <t-button block theme="primary" @click="showToast">提示</t-button> </view> </template> <script setup> import { Toast } from 'tdesign-uniapp' const showToast = () => { Toast({ message: '操作成功', theme: 'success' }) } </script> ``` > ⚠️ **重要提示**：使用过程中如遇作用域问题（如 `this undefined`），请确保在 `setup()` 中使用 Composition API 或箭头函数[^2]。