taro3.0 +vue2 微信小程序

最新推荐文章于 2024-04-28 16:01:56 发布
最新推荐文章于 2024-04-28 16:01:56 发布
阅读量3.7k 收藏 6
点赞数 2
分类专栏： 微信小程序 taro
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wodebokecsdn/article/details/107485270
版权

首先创建项目，按着官网来就行了，编译报错的话可以将node更新到最新版本

执行npm run dev:weapp后会编译文件，生成如下的目录结构，assets是我自己创建的，用来存放静态资源的目录

当执行完之后，文件中会生成一个dist的文件夹，打开微信开发者工具，导入项目，路径填到dist文件夹这一层。这时就可以预览项目了。

2、此时需要明白文件夹中文件的作用

这是配置好之后的效果

3、接下来看页面中的使用方式

下面这个文件 就跟原生对应的json配置文件一样

 

攻城狮狮
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
专栏目录
Taro + VUE 小程序环境搭建
freeWayWalker的专栏
05-26 1137
微信小程序 API 的 TypeScript 类型定义文件在中指定。
Taro3-Vue3-Demo:taro3使用vue3进行开发
03-29
Taro3-Vue3-Demo // option Api data ( ) { return { res : [ ] , msg : "" , } ; } , created ( ) { this . getRes ( ) ; } , methods : { getRes : async function ( ) { this . res = await test ( ) ; } , } , setup ( ) { const res = ref ( [ ] ) ; const msg = ref ( "" ) ; const getRes = async ( ) => { const result = await test ( ) ;
Taro3.0(vue)使用Vue DevTools插件
weixin_45173812的博客
04-18 1152
自 Taro 3.x 改造为运行时框架后，有不少同学抱怨小程序开发者工具的 AppData 面板看到的都是 Taro 虚拟 DOM 的序列化结果，而不是页面的 data 数据。为了缓解这个问题，并进一步地提升开发者的开发体验，Taro 对 React DevTools 和 Vue DevTools 进行了适配。只需要简单地配置，就能够和开发 Web 应用时一样使用框架的 DevTools。--暂不支持 Vue2。 1.在项目中安装 Taro 插件 @tarojs/plugin-vue-devtools：
Taro@3.x+Vue@3.x+TS开发微信小程序，上传文件
Mr Dear的博客
04-28 452
微信小程序上传文件，使用，同时自定义上传方法
Taro (v3.0.14)编写微信小程序项目记录
星海浮沉的成长路
10-14 315
问题记录: 1.初始化好项目之后,直接编译各种少包报错: 解决办法:少那个包补充上那个包. 下次可以直接先把要补充的包先一起补充上. npm install @babel/runtime npm install @tarojs/runtime npm install @tarojs/taro 2.taro 使用了vue框架就要配套taro-ui-vue 而不是taro-ui 不然会有组件直接不识别的错误 地址:http://taro-ui-vue.fontend.com/?spm=a2c6h.14275
taro3.0中使用dva/@tarojs/redux
weixin_39234651的博客
07-10 561
taro3.0中使用dva @tarojs/redux
taro + vue3 开发微信小程序的模板.zip
01-04
微信小程序的优势在于它方便快捷、轻量级、跨平台、丰富的推广方式、丰富的功能接口、数据分析与优化、结合微信支付、支持多场景应用、社交功能以及多端同步等。这些优点使得小程序能够满足用户的多种需求，提供更好...
光电设计大赛-物联网智能鱼缸-taro+ts =微信小程序.zip
11-09
光电设计大赛-物联网智能鱼缸-taro+ts =》微信小程序.zip 1、该资源内项目代码经过严格调试，下载即用确保可以运行！ 2、该资源适合计算机相关专业(如计科、人工智能、大数据、数学、电子信息等)正在做课程设计、...
vue3+taro+nutui+pina小程序空白框架
03-25
结合以上技术，"vue3+taro+nutui+pina小程序空白框架"可以理解为一个基础的开发环境，用于快速搭建微信小程序项目。使用Vue3作为基础框架，Taro负责跨平台编译，NutUI提供UI组件，而Pina则作为状态管理工具。这样的...
光电设计大赛-物联网智能鱼缸-taro+ts =微信小程序
最新发布
04-29
全国大学生电子设计竞赛（National Undergraduate Electronics Design Contest），试题，解决方案及源码。计划或参加电赛的同学可以用来学习提升和参考。...光电设计大赛-物联网智能鱼缸-taro+ts =》微信小程序
微信小程序基于Taro的分享图片功能实践详解
01-03
在各种小程序(微信、百度、支付宝)、H5、NativeApp 纷纷扰扰的当下，给大家强烈安利一款基于React的多终端开发利器：京东Taro（泰罗·奥特曼），Taro致力于多终端统一解决方案，一处代码，多处运行。 Taro支持以...
taro-vue2.x框架跨端开发（一）
vscode_js的博客
02-08 1989
最近使用taro-vue2.x版本开发微信小程序，taro框架是京东凹凸团队研发的开源框架，但是taro开始默认使用的是react语法，对于vue还是后面补充的，关于taro-vue官网也是没有相关详细文档说明的，使用vue2.x版本开发小程序只能一点一点的采坑了，虽说taro基本上使用跟微信小程序原生语法差不多，但是。。。 先记录一下踩得坑：（后面会慢慢补充完整） 首先是微信小程序获取手机号的一个小坑： 微信小程序原生是使用button标签并实现微信获取手机号方法，下面先列一下微信小程序原生的获取手
基于taro-vue2 开发小程序
qq_47793359的博客
03-21 1246
Taro 项目基于 node，请确保已具备较新的 node 环境（>=12.0.0） 1：使用 npm 或者 yarn 全局安装 @tarojs/cli 官网地址：https://taro-docs.jd.com/taro/docs/GETTING-STARTED // 使用 npm 安装 CLI npm install -g @tarojs/cli // 使用 yarn 安装 CLI yarn global add @tarojs/cli // 安装了 cnpm，使用 cnpm 安
taro-vue2里面使用原生html标签
qq_47793359的博客
03-21 1204
1：下载 yarn add @tarojs/plugin-html
基于Taro+Vue实现的微信小程序—待办事项
bats的博客
07-30 613
微信小程序 待办事项（项目实战） GitHub地址：一日之计在于春 极简待办 项目采用技术：Taro + Vue + Taro UI 项目模板来源：ToDoMVC，在该项目基础上不断完善，欢迎共同学习完善。
taro小程序返回上一页传参
weixin_44011462的博客
04-07 4316
1.在页面跳转上一页前添加 var pages = getCurrentPages(); var prevPage = pages[pages.length - 2]; //上一个页面 //直接调用上一个页面的setState()方法，把数据存到上一个页面中去 prevPage.$component.setState({ type...
Taro框架小程序返回上一页，监听事件
热门推荐
jagger_guo的博客
02-27 1万+
需求：做项目中，当前页点击新增一个用户的功能，增加成功后返回原来的页面刷新数据。 涉及到页面跳转和监听。 使用taro在下一页，使用 返回上一页： // 返回列表页面 Taro.navigateBack({ delta: 1 // 返回上一级页面。 }); } 在上一页的componentDidShow中监听，执行刷新： componentDi...
vue3 taro-ui-vue3 封装Tabbar组件
weixin_43761212的博客
03-25 3591
提示：使用 vant-weapp,Taro,vant-weapp,vue3 文章目录前言一、创建 Tabbar组件二、页面引入1.目录结构 前言 提示：请在 app.config.ts 文件内引入： usingComponents: { "van-button": "@vant/dist/button/index", "van-icon": "@vant/dist/icon/index", "van-tabbar": "@vant/dist/tabbar/index", .
Taro中的生命周期(Taro3.0)
qq_38261819的博客
09-06 2769
Taro中的生命周期
taro+vue3+微信小程序如何刷新页面
05-17
在微信小程序中，我们可以使用下拉刷新组件来刷新页面。在 Taro + Vue3 中，可以通过在页面的配置对象中添加 `enablePullDownRefresh: true` 来启用下拉...以上就是在 Taro + Vue3 中实现微信小程序下拉刷新的方法。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

攻城狮狮

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值