Taro + vue3 中 前端中预览图片最简单的写法

最新推荐文章于 2024-05-07 15:31:58 发布
最新推荐文章于 2024-05-07 15:31:58 发布
阅读量367 收藏 9
点赞数 5
文章标签： taro 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lele66688888/article/details/138224422
版权

在移动端开发中

我们使用Taro 开发前端的时候

当我们想做一个功能 比如说是预览图片的功能

我们可以使用Taro 中的封装好的Api

 

const handleClickImage = (e) => {
  Taro.previewImage({
    current: e,
    urls: [e],
  });
};

就是一个方法 封装好的方法 

这个参数其实就是 一个图片的链接 

或者是 本地的图片路径 也是可以的

喝一杯维C
关注
  • 5
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Taro + vue3 +ts + pinia的前端小程序/h5 框架模板
03-22
Taro + vue3 +ts 的前端小程序/h5 的框架模板，其中将request.js 的请求封装好了 使用的数据状态管理时pinia 其中的store 文件都已经建好 手动封装的tabbar 我们可以直接从这个基础上去开发，我们会节省很大的成本，...
Taro 3.x 跨版本升级踩坑指南
小陈的博客
10-26 763
数据驱动的好处，在于前后端可以通过清晰的数据格式明确页面的呈现和交互效果；另外，在修改数据时，可以只修改接口返回，而前端无需上线。数据驱动在客服工单系统中的应用还有很多，比如表格视图、流程渲染等，这些应用都能大幅提高开发效率和维护性。在追求低代码的大潮流下，客服工单系统虽然非常复杂，但我们吸取低代码的设计思想去简化系统的复杂度。
使用 Taro 开发微信小程序的实践 + 踩坑合集
lentoo的博客
03-12 3576
我和这篇文章我是一名前端爱好者，现在是大三学生。大二开始接触小程序开发，目前自己唯一还在弄的项目是校内面向学生的一款课程评测小程序 uCourse。使用过微信小程序原生语...
taro 重新加载小程序_使用 Taro 开发微信小程序的实践 + 踩坑合集
weixin_39838362的博客
12-19 992
我这篇文章我想简单总结一下我在使用 Taro 开发小程序时的一些经验和踩坑，以及我在与微信小程序纠缠时的各方面心路历程……(主要是微信小程序，我还暂时没有开发多端。)另外除了 Taro 本身，也会带一些小程序的开发实践。总之乱七八糟说啦，希望能对各位有所帮助。原生小程序开发 vs 第三方框架原生小程序开发的痛点总结来说：单页面的文件结构繁琐(四个之多)语法像 React、像 Vue、又像风(四不像...
前端面试题（HTML、JS、Vue、React、小程序）
weixin_43750611的博客
11-05 7317
前端面试题HTML && CSSHTML1、Div 里面有个一个div *****2、doctype的作用 *3、link标签和import标签的区别 **HTML51、h5的新特性 ***CSS & CSS31、盒子模型 ****2、弹性布局、浮动布局、table布局 *****3、flex的属性 ****4、CSS3的新特性 *** （动画效果）5、CSS3选择器优先级及计算 ***6、清除浮动 ***7、position的相关属性 **JS原生*****
前端开发常用技术工具网址导航汇总
m0_71327177的博客
10-20 1473
这个是之前github看到过的一篇前端开发网址总结，涵盖前端开发所有常用的相关技术和插件汇总，
【VsCode】VsCode（Vue/React）的安装与48个插件大全
【敦厚的曹操】的专栏
04-12 9342
一、下载和安装 下载地址：https://code.visualstudio.com/download是Microsoft（微软的产品） 最好安装System Installer版 二、配置 1、打开【设置】，找到或搜索【Format on Save】，打对勾。 2、打开【设置】，找到或搜索【AutoSave】，选择：afterDelay。 三、插件（陆续更新中，红色推荐前端安装） 1、Chinese Language （简体中文，重启软件生效）。 2、Live Server（按alt+..
Taro实践 - 深度开发实践体验及总结
大灰狼的小绵羊哥哥的博客
11-30 4753
前言 凹凸实验室的 Taro 是遵循 React 语法规范的多端开发方案，Taro 目前已对外开源一段时间，受到了前端开发者的广泛欢迎和关注。截止目前 star 数已经突破11.7k，还在开启的 Issues 有 200多个，已经关闭700多个，可见使用并参与讨论的开发者是非常多的。Taro 目前已经支持微信小程序、H5、RN、支付宝小程序、百度小程序，持续迭代中的 Taro，也正在兼容更多的端...
Taro深度开发实践
凹凸实验室
11-30 433
前言凹凸实验室的 Taro 是遵循 React 语法规范的多端开发方案，Taro 目前已对外开源一段时间，受到了前端开发者的广泛欢迎和关注。截止目前 star 数已经突破11.2k，还在开启的 Issues 有 200多个，已经关闭700多个，可见使用并参与讨论的开发者是非常多的。Taro 目前已经支持微信小程序、H5、RN、支付宝小程序、百度小程序，持续迭代中的 Taro，也正在兼容更多的端以及...
京东Taro框架深度实践
weixin_33751566的博客
11-30 476
前言Taro是凹凸实验室遵循 React 语法规范的多端开发方案，Taro 目前已对外开源一段时间，受到了前端开发者的广泛欢迎和关注。截止目前 star 数已经突破11.2k，还在开启的 Issues 达 200多个，已经关闭700多个，可见使用并参与讨论的开发者是非常多的。Taro 目前已经支持微信小程序、H5、RN、支付宝小程序、百度小程序，持续迭代中的 Taro，也正在兼容更多的端以及增加一...
vue3+taro+nutui+pina小程序空白框架
03-25
vue3+taro+nutui+pina小程序空白框架
mall:基于taro.js + vue3 + typescript + taro-ui-vue3 搭建的模板
05-23
基于taro.js + Vue3 + taro-ui-vue3 搭建的模板 环境准备 初始化 node_modules: npm install or(推荐, 尽量在执行前开启梯子) yarn 提供的脚本 具体可以查看 package.json 中的脚本列表. 主要脚本为: start 启动项目...
taro + vue3 开发微信小程序的模板.zip
01-04
微信小程序的优势在于它方便快捷、轻量级、跨平台、丰富的推广方式、丰富的功能接口、数据分析与优化、结合微信支付、支持多场景应用、社交功能以及多端同步等。这些优点使得小程序能够满足用户的多种需求，提供更好...
基于Taro3+Vue3的跨端方案模板.zip
11-30
基于Taro3+Vue3的跨端方案模板.zip
Taro@3.x+Vue@3.x+TS开发微信小程序，设置转发分享
最新发布
Mr Dear的博客
05-07 337
微信小程序设置全局自定义转发分享，或自定义单个页面的转发分享
【Web】CTFSHOW 中期测评刷题记录(1)
uuzeray的博客
05-02 1701
访问./cache/6a992d5529f459a44fee58c733255e86.php，命令执行拿flag。login.php是在./templates下的，而./flag.php与./templates均为web目录。注意到用./template/error.php中存在{{username}}，可以用其cache来写马。这时候重开下靶机再去读./templates/index.php，发现是给了提示的。访问./config/settings.php，命令执行拿到flag。
50个前端实战项目之04：隐藏的搜索小组件
前端开发博客
05-03 1094
大家好，我是宝哥。今天讲50个前端实战项目之04：隐藏的搜索小组件。源码下载地址https://github.com/bradtraversy/50projects50days/tree/master/hidden-search前端实战项目系列正在更新：04/5001：可展开卡片02：进度条03：旋转导航动画04：隐藏的搜索小组件项目介绍本项目演示了一个简洁实用的隐藏式搜索小部件。点击搜索按钮后，...
前端Vue 后端FastApi 跨域 CORS
weixin_44656422的博客
05-06 304
前端是localhost:3000,后端是localhost:8000 ，就是跨域了。
taro + vue3 +ts 的小程序项目
07-29
如果你想在 Taro + Vue 3 + TypeScript 的小程序项目中使用 Pinia，你可以按照以下步骤进行配置： 1. 首先，确保你已安装了 Taro 的 Vue 3 模板。你可以使用以下命令创建一个新的 Taro + Vue 3 + TypeScript 项目： ```bash npx @tarojs/cli@next init myApp --template vue3-ts ``` 2. 在项目目录下安装 Pinia： ```bash npm install [email protected] ``` 3. 在 `src/main.ts` 文件中，导入 `createPinia` 并创建一个 Pinia 实例，并将其传递给 Vue 的 `createApp` 方法： ```typescript import { createApp } from 'vue' import { createPinia } from 'pinia' const app = createApp(...) const pinia = createPinia() app.use(pinia) ... ``` 4. 接下来，你可以根据需要创建和使用 Pinia 的 store。在 `src/store` 目录下创建一个新的文件来定义你的 store，例如 `counter.ts`： ```typescript import { defineStore } from 'pinia' export const useCounterStore = defineStore('counter', { state: () => ({ count: 0, }), actions: { increment() { this.count++ }, decrement() { this.count-- }, }, }) ``` 5. 在组件中使用 store。在你的组件中，你可以使用 `useStore` 函数来获取 store 的实例： ```typescript import { useCounterStore } from '../store/counter' export default { setup() { const counterStore = useCounterStore() return { counterStore, } }, } ``` 6. 最后，你可以在你的组件中使用 store： ```vue <template> <div> <p>Count: {{ counterStore.count }}</p> <button @click="counterStore.increment()">Increment</button> <button @click="counterStore.decrement()">Decrement</button> </div> </template> <script setup> import { useCounterStore } from '../store/counter' const counterStore = useCounterStore() </script> ``` 这样，你就可以在 Taro + Vue 3 + TypeScript 的小程序项目中使用 Pinia 了。如果你遇到任何问题，请提供更多的上下文和相关代码，我将尽力帮助你解决。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值