基于taro开发微信小程序，注意事项及遇到的坑

最新推荐文章于 2025-07-07 16:49:08 发布
原创 最新推荐文章于 2025-07-07 16:49:08 发布 · 1.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#小程序 #taro #reactjs

本文介绍了使用Taro框架开发微信小程序时应注意的事项，包括参考对应版本的官方文档，确保本地Taro版本与项目所需一致，以及在拉取他人项目时，Node.js版本和Taro版本需保持一致以避免运行错误。

一、taro官方文档
https://taro-docs.jd.com/taro/docs/2.2.11/README

二、目前，已经是3.0+的版本，避免版本的错误，注意本地taro版本，参考对应的版本文档
在这里插入图片描述
三、创建新项目，按照官方文档来就行~
在这里插入图片描述
四、通过git或svn，拉取的项目，记住一定一定要和拉取项目的，node版本和taro版本都保持一致，否则就会报错，运行失败！！！

	以下是，我当时因为版本不一致报错的情况，报的错也没说版本问题，网上找了一通，后来还是试着统一版本就好了，当时真的是想哭~~~

看看这都是些啥错，莫名其妙的。。。。版本统一，啥问题都没了
在这里插入图片描述
哈哈
在这里插入图片描述
在这里插入图片描述

最低0.47元/天 解锁文章
Taro框架开发微信小程序demo的笔记
qq_43294821的博客
10-10 1726
taro开发微信小程序demo 笔记
微信小程序授权登录写在app.js获取数据
hellow_tommer的博客
09-30 2451
小程序授权登录就不多说了，官方文档上都有， 那么大家获取数据时，都会怎么存储数据呢? 也许是使用 App({ onLaunch() { // 展示本地存储能力 const logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) }, globalData: { useri
微信小程序 加载 app-service.js 错误解决方法
11-21
微信小程序开发过程中出现错误，经过一番思考解决此问题，这里给大家提醒下！ 加载 app-service.js 错误 WAService.js:2 不要在 undefined.js 注册多个Page APP-SERVICE-Engine:Please do not register multiple Page in undefined.js 开始新建一个小程序，结果报这么多错误。 但是我点击到编辑页查看的时候，没有pages,utils呀。。 进入app.js没有注册多个page呀。 感觉很奇怪，然后忽然想起前几天新建了一个一样的项目名称，所以才出现上面的报错。 于是重新命名一个，就没有这个问
Error evaluating解决xpression ‘ew.sqlSegment != null and ew.sqlSegment != ‘‘ and ew.nonEmptyOfWhere‘.
热门推荐
w3x3g的博客
09-28 2万+
（看文章之前要排除，自身的代码bug，本文是在本身代码没问题的基础上，依赖包版本过低导致的） 先上错误和描述，使用的mybatisplus插件，开始用的是3.1.1版本，然后本地运行项目没有问题，之前将项目打包成war包，也没问题，可以在服务器上正常运行。 但是要求，将项目打包成jar包，本地没有问题，使用项目分离的形式进行打包，并且在服务器上运行的时候，在使用到lambda表达式的代码报错，如下： org.mybatis.spring.MyBatisSystemException: nested exc
Taro学习手册（六）—— 注意事项
kelly0721的博客
09-25 683
pages 文件夹下的文件夹名要小写开头，不能大写 如果有静态图片资源，那么应该将存放静态资源的文件夹放在 pages 文件夹下，不然编译打包在微信小程序上运行，无法加载图片资源 平时写 react 文件结构是 Home/index.js 那么在引用的时候，直接写 import xxx from './home' 就好了，但是在Taro中要把后面的index文件写出来 import xxx fr...
taro 注意点
温柔养猫客
07-29 349
1. scss注入； 按照官网写法，直接注入，但是app.scss中不能import其他scss,否则会编译语法出错 2.assets中的scss 使用同在assets中的img图片时，需使用 ~ 带~的路径 "~@/assets/img/logo_blue.png" 被webpack解析为 require(src/assets/img/logo_blue.png) 动态引入 1.相对路径: "./assets/logo_blue.png" 2.没有前缀的路径 "assets/logo_b...
Taro+Vue3实现微信小程序富文本编辑器组件开发指南
最新发布
a3212768093的博客
07-07 887
摘要：本文介绍了一个基于微信小程序原生editor组件封装的富文本编辑器实现方案。该组件主要功能包括：可配置的工具栏、双向数据绑定、图片上传和文本格式控制。关键技术点涉及编辑器实例管理、内容同步机制、图片处理流程和格式控制方法。组件采用Vue3+TypeScript开发，通过createSelectorQuery获取编辑器实例，实现了getContents/setContents的内容同步，并整合了图片选择和上传API。样式使用SCSS编写，包含编辑器容器和工具栏布局。注意事项包括服务器配置、样式限制和性能
精选资源
微信小程序文件上传(手机文件管理器上传)
08-07
微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要应用于移动端，为用户提供便捷的服务。在微信小程序中实现文件上传功能，特别是通过手机文件管理器上传，是开发者经常遇到的需求。这一功能允许用户选择...
为Taro微信小程序添加登录功能并提交体验版
比起未来可期，我更喜欢如约而至
01-08 1891
需求分析 项目描述：Taro.js+Dva.js+React开发，用于网球比赛的组织和管理，包括运动员信息管理、积分管理、规则修改和新闻查看等功能。 需求描述：为小程序添加用户注册登录功能并提交体验版。 由于项目特殊性，允许使用小程序的用户信息已经提前导入进了数据库，信息包括工号，姓名等字段（工号为用户唯一标志）。 注意事项： 1.小编这个小程序不需要使用用户微信昵称、微信号和手机号等个人信息。 2.不能强制用户对微信申请个人信息请求进行授权，即用户不登录也能访问小程序，只有当用户使用需要账户信息的功能时
taro微信小程序运行报错[ app.json 文件内容错误] app.json app.json 未找到
web13985085406的博客
03-01 2429
是由于根目录下的project.config.json文件中的“miniprogramRoot”未找到app.json所导致的,改成如下路径 "miniprogramRoot": "./dist/weapp", 若还是出错，直接修改dist路径下的project.config.json，添加 "miniprogramRoot": "./weapp", ...
Taro 写个微信小程序遇到的问题
hnnsboy的博客
03-09 620
测试了很多的 UI 方案，包括 VantWeapp，NutUI(安装报错，目前跟 Taro4.0.9 不适配, yarn add taro-ui@next)，ColorUI(只适用于 UniApp 和原生微信小程序), Taro UI(官网维护很差，找不到文档)，"requireConfigFile": false, // 关键配置：禁用 Babel 配置文件检查。configFile: './babel.config.js' // 指向你的 Babel 配置文件。taroify(有警告，但是至少能用)
Taro UI 样式在微信小程序没有生效
前端_小学生的博客
12-07 2583
Taro UI引入的都没有问题，但是微信小程序没有生效 这是官网的描述 检查你的微信开发者工具 修改调试基础库 ---- 用最高的版本即可
微信小程序中taro-ui-vue3组件不起作用
qq_51408649的博客
03-15 838
taro-ui-vue3组件不起作用
微信小程序使用vant组件样式未生效解决办法
欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！
06-28 3401
首先在app.json里面删除这一行。清除缓存 重新编译，重新构建npm 重新编译
Taro开发微信小程序遇到的问题和解决方法
p15097962069的博客
12-08 764
Taro开发微信小程序遇到的问题和解决方法
taro 引入js_使用taro开发微信小程序遇到的坑总结
weixin_39529128的博客
12-22 1682
Taro，京东凹凸实验室出品的适配多端的一个框架，Taro 是一套遵循 React 语法规范的 多端开发 解决方案。现如今市面上端的形态多种多样，Web、React-Native、微信小程序等各种端大行其道，当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。一.taro开发搭建1.taro很方便就在于...
taro小程序中如何引入css_moudle？配置后不生效的解决方法
清颖的博客
05-06 2624
taro官网没有写更多的内容，网上查找了一番，找到了方法。按步骤来： 1. 改配置文件，即标题1中所述。 2. 给样式文件 less/scss/css 加前缀：`.module`，如原来是：`index.less`，要改为`index.module.less` ……重新编译运行，给类名加了5位数的哈希字符，OK啦！
微信小程序开发之详解生命周期方法
weixin_54597234的博客
04-14 1327
生命周期是指一个小程序从创建到销毁的一系列过程 在小程序中 ，通过App()来注册一个小程序 ，通过Page()来注册一个页面 先来看一张小程序项目结构
[小程序Error] 各种遇到的问题
weixin_39307273的博客
12-25 3004
编译小程序时，图片没有加载，且出现错误信息console.error 出现这个错误的两个原因： 1、没有这个图片地址变量 2、初始化onload的时候变量还没有渲染进去 若是第二种原因：解决方法 在src前面加wx：if <image wx:if='{{userInfo.avatarUrl}}' src='{{userInfo.avatarUrl"}}'></ima...
taro开发的微信小程序之分享功能
06-04
### Taro开发的微信小程序中实现分享功能指南 在Taro框架中开发微信小程序时，实现分享功能需要结合微信小程序的基础能力以及Taro提供的接口。以下是关于如何在Taro开发的微信小程序中实现分享功能的详细说明。 #### 1. 微信小程序分享机制概述 微信小程序提供了`onShareAppMessage`和`onShareTimeline`两个生命周期函数来分别实现用户点击右上角菜单中的“转发”按钮和“分享到朋友圈”的功能[^1]。通过这两个函数，开发者可以自定义分享标题、分享路径和分享图片等内容。 #### 2. Taro 中的分享功能实现 在 Taro 框架中，可以通过 `useShareAppMessage` 和 `useShareTimeline` 钩子来实现分享功能。以下为具体实现步骤： - **安装依赖**：确保项目已正确安装 Taro 的最新版本及相关插件。如果当前 Taro 版本较低（如引用[4]中提到的3.0.7），需要先升级至支持分享功能的版本（如3.6.14）。 - **配置分享功能**：在页面组件中使用 `useShareAppMessage` 或 `useShareTimeline` 来定义分享行为。以下是一个示例代码： ```javascript import Taro, { useShareAppMessage, useShareTimeline } from '@tarojs/taro'; const Index = () => { // 配置转发给朋友的功能 useShareAppMessage(() => { return { title: '这是分享给朋友的标题', path: '/pages/index/index?from=share', // 自定义分享路径 imageUrl: 'https://example.com/share-image.png' // 自定义分享图片 }; }); // 配置分享到朋友圈的功能 useShareTimeline(() => { return { title: '这是分享到朋友圈的标题', query: 'from=timeline', // 自定义查询参数 imageUrl: 'https://example.com/timeline-image.png' }; }); return <View>这是一个带有分享功能的页面</View>; }; export default Index; ``` #### 3. 注意事项 - **分享内容的合法性**：确保分享的内容符合微信平台的审核规范，避免因违规内容导致分享功能被限制或小程序下架[^1]。 - **动态参数传递**：在定义分享路径时，可以通过 URL 参数传递动态信息，例如用户 ID 或商品 ID，以便接收方能够根据这些参数加载对应的内容。 - **用户体验优化**：提供清晰、吸引人的分享标题和图片，提升用户的分享意愿。 #### 4. 调试与测试 在开发完成后，可以通过微信开发者工具进行调试和测试，确保分享功能在不同场景下的表现均符合预期。同时，建议在真实设备上测试分享功能，以验证其在实际环境中的可用性[^2]。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值