taro3.0 +vue2 微信小程序

最新推荐文章于 2024-05-19 12:53:43 发布
最新推荐文章于 2024-05-19 12:53:43 发布
阅读量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 1131
微信小程序 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 1136
自 Taro 3.x 改造为运行时框架后，有不少同学抱怨小程序开发者工具的 AppData 面板看到的都是 Taro 虚拟 DOM 的序列化结果，而不是页面的 data 数据。为了缓解这个问题，并进一步地提升开发者的开发体验，Taro 对 React DevTools 和 Vue DevTools 进行了适配。只需要简单地配置，就能够和开发 Web 应用时一样使用框架的 DevTools。--暂不支持 Vue2。 1.在项目中安装 Taro 插件 @tarojs/plugin-vue-devtools：
Taro+vue3+nutui3.x构建微信小程序
最新发布
a3212768093的博客
05-19 417
taro+vue3+nutui构建小程序流程，以及部分拓展
Taro (v3.0.14)编写微信小程序项目记录
星海浮沉的成长路
10-14 313
问题记录: 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 549
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-ui-vue:Tarovue的UI KIT
04-13
taro-ui-vue 项目背景 tarojs 已经开始支持 vue 去写 taro 应用了，由于缺少相关的 ui 库，因此决定 按照 taro-ui 重写成 vue 组件。 形成了 taro-ui-vue 这个库。 相关链接 使用注意 Taro Ui Vue 提供的是源文件，源文件部分代码使用 ts 编写，需要项目支持 ts。 如果是用 taro init 命令创建，则需在使用时选择 ts 。 安装 npm i -S taro-ui-vue 使用 按需引入 // page.js import { AtButton } from 'taro-ui-vue' // OR import AtButton from 'taro-ui-vue/src/components/button/index.vue' 按需引入样式 // js import 'taro-ui-vue/dist/style/c
echarts-taro3-react:taro3.x-react构建的微信小程序echarts组件，及使用示列
04-28
echarts-taro3-react 基于Taro3.x-React框架构建的微信小程序版本echarts组件，及使用示例 代码体积过大解决方案： 使用分包， 自定义echart.js，自行前往（注意：版本需要选择4.9.0，不要勾选压缩，可下载下来后自行压缩） 按需构建echart.js，然后替换掉echarts-taro3-react/lib/ec-canvas/echart.js 版本日志： 1.0.11： 新增datazoom功能 1.0.10： 压缩了echarts.js, 代码大小从2.2m下降至543kb 修复了更新数据不能刷新的问题 传送门 特性 Taro3.x React Typescript 功能 柱状图 折线图 饼图 散点图 雷达图 热力图 地图 仪表盘 漏斗图 快速安装 npm i echarts-taro3-react 使用 引入EChart组
taro-vue2.x框架跨端开发（一）
vscode_js的博客
02-08 1983
最近使用taro-vue2.x版本开发微信小程序，taro框架是京东凹凸团队研发的开源框架，但是taro开始默认使用的是react语法，对于vue还是后面补充的，关于taro-vue官网也是没有相关详细文档说明的，使用vue2.x版本开发小程序只能一点一点的采坑了，虽说taro基本上使用跟微信小程序原生语法差不多，但是。。。 先记录一下踩得坑：（后面会慢慢补充完整） 首先是微信小程序获取手机号的一个小坑： 微信小程序原生是使用button标签并实现微信获取手机号方法，下面先列一下微信小程序原生的获取手
基于taro-vue2 开发小程序
qq_47793359的博客
03-21 1243
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 612
微信小程序 待办事项（项目实战） GitHub地址：一日之计在于春 极简待办 项目采用技术：Taro + Vue + Taro UI 项目模板来源：ToDoMVC，在该项目基础上不断完善，欢迎共同学习完善。
vue3 taro-ui-vue3 封装Tabbar组件
weixin_43761212的博客
03-25 3578
提示：使用 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", .
vue3.0使用taro-ui-vue3引入组件不生效解决方案
qq_44294202的博客
08-31 4610
这两天一直研究云闪付小程序，开始和同事好不容易用云闪付的官方ui研究了，但是害怕后期在多个平台上线部署出现不兼容的问题，无奈只好另辟蹊径，选择taro来实现‘一处代码，多处运行’，我们采用Vue3.0+TS+Sass+taro-ui-vue3，在安装编译一直出现问题，掉落我们几根宝贵的头发，这里把本次遇到的坑总结下： 第一步：确保已安装全局的vue3环境，在安装taro yarn global add @tarojs/cli 项目初始化：使用命令创建模板项目： $ taro init myApp 我这里
taro+vue3+微信小程序如何刷新页面
05-17
在微信小程序中，我们可以使用下拉刷新组件来刷新页面。在 Taro + Vue3 中，可以通过在页面的配置对象中添加 `enablePullDownRefresh: true` 来启用下拉刷新功能。 具体步骤如下： 1. 在页面的配置对象中添加 `enablePullDownRefresh: true`。 ```javascript export default { enablePullDownRefresh: true, // ... } ``` 2. 在页面的方法中添加 `onPullDownRefresh` 方法，该方法会在用户下拉刷新时触发。 ```javascript export default { enablePullDownRefresh: true, onPullDownRefresh() { // 执行刷新操作 }, // ... } ``` 3. 在 `onPullDownRefresh` 方法中编写刷新操作的代码。例如，我们可以重新请求数据，并更新页面渲染。 ```javascript export default { enablePullDownRefresh: true, async onPullDownRefresh() { // 重新请求数据 const newData = await this.fetchData() // 更新页面渲染 this.dataList = newData // 停止下拉刷新 Taro.stopPullDownRefresh() }, // ... } ``` 4. 最后，在页面中添加下拉刷新组件。可以使用 Taro UI 的 `AtPullDownRefresh` 组件，也可以自定义组件。 ```html <template> <!-- 使用 Taro UI 的 AtPullDownRefresh 组件 --> <view> <at-pull-down-refresh v-model="isRefreshing" color="#999" background-color="#f7f7f7" bind:refresh="onPullDownRefresh" > <view class="status" slot="status"> {{ isRefreshing ? '正在刷新...' : '下拉刷新' }} </view> </at-pull-down-refresh> <!-- 渲染数据列表 --> <view v-for="item in dataList" :key="item.id"> {{ item.title }} </view> </view> </template> ``` 以上就是在 Taro + Vue3 中实现微信小程序下拉刷新的方法。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

攻城狮狮

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

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

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

打赏作者

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

抵扣说明：

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

余额充值