微信小程序报错：Bad attr ‘wx 解决方法

最新推荐文章于 2023-08-06 11:46:07 发布
最新推荐文章于 2023-08-06 11:46:07 发布
阅读量1.6k 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/G_XUI/article/details/107968545

转载 原地址:https://blog.youkuaiyun.com/baidu_39418435/article/details/103821828、

今天写代码第一次遇到了Bad attr 'wx 报错
解决全部的方法在上面的链接里
我主要遇到了第三种
在同一标签内写入了wx:for 和wx:if 在同一级标签写入wx:else 会报错
错误例子：
在这里插入图片描述
正确例子：在这里插入图片描述

G_XUI
关注
【微信小程序】动态API+swiper组件实现轮播图+es6的promise
DUMG
05-01 3661
动态API+swiper组件实现轮播图 1. 获取轮播图数据 接口：https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata pages/index/index.js Page({ data: { // 轮播图数组 swiperList: [] }, onLoad: function (opt...
微信小程序 表单验证 源码
qq_42897782的博客
02-20 2466
效果图 点击预约设计弹出表单  城市，面积不能输入，只能选择  点击位置获取当前定位  源码: Wxml <!--pages/designerList/designerDetail.wxml--> <view> <view class='tc m_t20'> <image src='{{urlhttp + designerDet...
微信小程序报错：Bad attr 'wx 的三种原因，已解决
baidu_39418435的博客
01-03 1万+
最近开发小程序，一写wx:else就会报这个错：Bad attr 'wx。错误原因有一下几种： 1、百度了很多都说是多写了wx:else，所以首先请检查页面是否多写了wx:else，多写会报错，一个wx:if 对应一个wx:else 2、但确实只写了一个wx:else，那么请检查wx:if 与wx:else 是否写在同一层级，比如： 正确写法√ 错误写法× <vi...
小笔记：wx:for和wx:if在同一个标签下提示 Bad attr `wx的问题
月落星河
12-07 1315
问题：在微信XHTML中当wx:for和wx:if 和 wx:else 一起用的时候会报错Bad attr wx，如图： 如果蓝色标记，造成问题的原因是因为你的for的优先级比if的优先级要高，如下代码： /*先进行了for循环 */ for(){ .... /*然后进入了if判断 */ if(){ .... } } /*最后单独的一个else */ else{ .... } 这就成了一个语法错误了。 正确写法1： <!- 包一个block，代码从上而下顺序执行，这样if的优先
微信小程序报错Bad attr ‘wx的原因以及解决办法
qq_44606064的博客
02-20 3236
微信小程序报错Bad attr 'wx的原因以及解决办法
小程序 在同一个标签上同时使用 wx:if和wx:for 会报错 （Bad attr `wx）
byking818的博客
03-28 384
今天写小程序遇到个同时使用if和for报错的问题 网上查了查 也没有具体答案，解决办法就是 吧if和for循环 嵌套一下
小程序wx:else提示 Bad attr `wx
LlanyW的专栏
08-06 1398
WX:FOR和WX:IF在同一个标签下提：for的。比if的优先级要高，
微信小程序控制台提示warning:Now you can provide attr "wx:key" for a "wx:for" to improve performance解决方法
10-17
主要介绍了微信小程序控制台提示warning:Now you can provide attr "wx:key" for a "wx:for" to improve performance解决方法,简单分析了wx:for警告提示相关解决方法,需要的朋友可以参考下
微信小程序数据绑定
05-17
微信小程序是一种轻量级的应用开发框架，由腾讯公司推出，主要应用于移动端，为用户提供便捷的交互体验。在微信小程序中，数据绑定是核心概念之一，它使得数据与视图层能够实时同步，实现用户界面与应用程序逻辑之间...
小程序笔记
weixin_47124112的博客
10-18 524
在微信小程序中，有时候使用wx.navigateTo()跳转页面时要传递过长的参数或者传递一个数组对象会发现传递不过去。通用，网络认证（使用用户名[gitee的用户名@后面的名字]和密码），远程都要填写。第一次推送的分支中不能有任何文件，或者创建另一个分支来推送进去。如果传递的对象较大超出字符串长度，或者有一些特殊字符问题时。把tabBar页面的名字改了之后，报找不到文件的错误。使用vantweapp的dialog弹出框的。原来固定定位不加偏移量是固定在原来的位置的。e.target：触发事件的元素。
Bad attr `data-event-opts` with message
m0_61185905的博客
06-01 1308
uniapp转微信小程序，代码转义提示 Bad attr `data-event-opts` with message 大量代码爆红。解决办法：将uniapp中代码备份，分段删除代码运行微信开发工具，定位出错代码段修正。发现是JS函数写的不合理造成的问题，三元表达式是支持转义的。
uniapp发布到微信小程序提示 ： Bad value with message: unexpected 的原因
张子豪的博客
10-18 3793
用了中文，当时忘了改回来了。
微信小程序开发——小程序开发-Now you can provide attr “wx:key“ for a “wx:for“ to improve performance
qq_44934339的博客
02-20 331
项目场景： 解决方案： Now you can provide attr “wx:key” for a “wx:for” to improve performance 是一个关于性能优化方面的提示. 不处理不影响程序运行。 在wx:for后面添加wx:key=“key” 可消除警告。
微信小程序报错 Bad attr `wx:key` with message: unexpected token `*`.
江南雨
11-29 8674
  搜索以上错误代码：wx:key = “{{*this}}” 改成 wx:key = “*this” 预览测试即可     wx:key  如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 中的输入内容， 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。 wx:key 的值以两种形式提供 字符串，代表在 fo...
小程序Bad attr `wx:key` with message: unexpected token `*`.
Nontracely的博客
08-22 5229
Bad attr wx:key with message: unexpected token *. wx:key = “{{*this}}” 功能没问题，console里没有警告没有报错， 但二维码预览编译时报错，Error: wxml 编译错误， 错误信息：./pages/goorders/goorders.wxml:6:117: Bad attr wx:key with message...
Now you can provide attr "wx:key" for a "wx:for" to improve performance.
热门推荐
卫小卫
02-13 2万+
微信小程序 Now you can provide attr "wx:key" for a "wx:for" to improve performance. 上文为警告，不处理不影响程序运行。 在wx:for后面添加wx:key="key" 可消除警告。
二、jQuery小程序之jQuery HTML text() html() val()、attr()、添加元素、获取设置css、尺寸
weixin_40512519的博客
08-09 1094
  获得内容和属性: jQuery 拥有可操作 HTML 元素和属性的强大方法。 jQuery DOM操作： 获得内容： 三个简单实用的用于 DOM 操作的 jQuery 方法： text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容（包括 HTML 标记） val() - 设置或返回表单字段的值，获得输入字段的值 &lt;script typ...
uniapp转微信小程序编译报错 Bad attr `data-event-opts` with message
前端路上坎坎坷坷，总有一天站在顶峰仰望世界！！！
10-16 1万+
Bad attr `data-event-opts` with message > 1 | <view class="activityContent data-v-74e8dc3a"> > <view class="poster_img_outside data-v-74e8dc3a" data-event-opts="{{index==setdata?animdata:{}}}"> > <image src="{{imgSrc}}" mode class=
【微信小程序】云函数报错:Unexpected token *
微笑丶1998的博客
02-24 5315
问题描述 1.小程序端调用云函数控制台报错 Error: errCode: -404011 cloud function execution error | errMsg: cloud.callFunction:fail requestID e54b29cb-56d2-11ea-aa7b-5254006250a6, cloud function service error code -5040...
微信小程序编译错误：Bad attr `text` with message: unexpected token `+`.
最新发布
05-19
### 微信小程序编译错误 `Bad attr text unexpected token +` 的解决方案 微信小程序在编译过程中遇到 `Bad attr text unexpected token +` 错误，通常是由于 WXML 文件中的语法问题引起的。以下是可能导致该错误的具体原因及其对应的解决方案： --- #### 1. **WXML 插值表达式中的语法错误** 在 WXML 中，插值表达式需要遵循严格的语法规则。如果表达式中包含了不被支持的 JavaScript 特性（如复杂的三元运算符或未闭合的括号），就会导致编译失败[^1]。 - **问题表现**: 使用了类似于 `{{ index == setdata ? animdata : '' }}` 的复杂三元运算符，而微信小程序并不完全支持这类复杂的逻辑计算。 - **解决方案**: 将复杂的逻辑移至 JS 文件中处理，仅在 WXML 中展示最终的结果。例如： ```javascript // 在 JS 文件中预处理数据 Page({ data: { result: '' }, onLoad() { const index = this.data.index; const setdata = this.data.setdata; const animdata = this.data.animdata; this.setData({ result: index === setdata ? animdata : '' }); } }); ``` 然后在 WXML 中直接绑定简单的变量： ```html <view>{{result}}</view> ``` --- #### 2. **双引号与单引号混用问题** 微信小程序对引号的使用非常敏感。如果在同一表达式中混合使用双引号和单引号，可能会导致解析错误[^1]。 - **问题表现**: 表达式中同时使用了双引号和单引号，例如：`data-event-opts="{{index==setdata?'animdata':''}}"`。 - **解决方案**: 统一使用一种类型的引号。推荐在外层使用双引号，在内部使用单引号： ```html <view data-event-opts="{{index == setdata ? 'animdata' : ''}}"></view> ``` --- #### 3. **空对象或 null 处理不当** 如果插值表达式返回的是一个空对象 `{}` 或 `null`，这可能会导致编译器无法正确解析[^1]。 - **问题表现**: 表达式返回了一个空对象或 `null`，例如：`<view>{{{}}</view>` 或 `<view>{{null}}</view>`。 - **解决方案**: 明确返回具体的字符串或数值类型，默认情况下可返回空字符串 `''`： ```html <view>{{value || ''}}</view> ``` --- #### 4. **插值语法中的特殊字符** 插值表达式中不应包含任何未经转义的特殊字符（如 `+`, `-`, `*` 等）。如果这些字符出现在表达式中且未正确处理，也会引发编译错误[^2]。 - **问题表现**: 表达式中直接使用了加法运算符 `+`，例如：`<view>{{a + b}}</view>`。 - **解决方案**: 同样将复杂计算移到 JS 文件中完成，只在 WXML 中显示结果： ```javascript Page({ data: { sum: 0 }, onLoad() { const a = this.data.a; const b = this.data.b; this.setData({ sum: a + b }); } }); ``` 然后在 WXML 中绑定简单变量： ```html <view>{{sum}}</view> ``` --- #### 5. **WXSS 或 WXML 文件中的其他潜在问题** 虽然问题是关于 WXML 的编译错误，但也需检查 WXSS 文件是否存在样式定义上的冲突或错误[^3]。 - **问题表现**: WXSS 文件中可能定义了一些会影响 DOM 结构渲染的样式规则，间接导致 WXML 编译失败。 - **解决方案**: 清理不必要的样式规则，并确保 WXSS 和 WXML 文件之间的兼容性。 --- ### 示例代码修正 假设原代码如下： ```html <view data-text="{{name + age}}">{{name + age}}</view> ``` 修正后的代码应为： ```javascript Page({ data: { name: 'John', age: 30, combinedText: '' }, onLoad() { this.setData({ combinedText: `${this.data.name} ${this.data.age}` }); } }); ``` 对应 WXML 文件： ```html <view data-text="{{combinedText}}">{{combinedText}}</view> ``` --- ### 总结 以上方法能够有效解决微信小程序编译错误 `Bad attr text unexpected token +` 的问题。核心在于简化 WXML 中的插值表达式，将复杂逻辑交由 JS 文件处理，从而避免因语法限制而导致的编译失败。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值