前文:

今天踩了一下午的坑,但是确实很简单的问题。

我说一下需求:扫描商品的二维码,从而判断,同一个二维码不可多次扫描;

点击扫一扫 会在灰色区域展示 扫描的商品信息,比如商品名称,商品码等,但是我们的需求是一物一码,即使是同一个商品也是不同的商品码。

错误示例:

最开始我的想法是做判断,因为我会在相对应的js文件中定义一个 productList:[ ],数组来存放数据,

Pages({
productList: [用来存放,通过后台接口得到的相关商品的数据信息] })

由于我们是一物一码,那唯一的判断条件就是商品码了

wzy.post("/wx/open/getProdcutNameByCode", product, true)
.then((res) => { let products={
name: res.data.data,
code:product.code,
} let productLength = this.data.productIist.length; //如果列表没有直接推,如果有循环,如果
if (productLength==0){
this.data.productIist.push(products);
this.setData({
productIist: this.data.productIist
})
}else{ for (let i = 0; i < productLength;i++){
if (products.code == this.data.productIist[i].code){
global.jv.showPop('提示','同一商品不可重复扫描')
return
}
}
this.data.productIist.push(products);
this.setData({
productIist: this.data.productIist
})
}
}).catch((res) => {
console.log(res)
wzy.showPop('提示', '当前网络繁忙,请重新扫描')
})
},

原来的思路是:

 .then((res) => {

               let products={
name: res.data.data,
code:product.code,
} let productLength = this.data.productIist.length; //如果列表没有直接推,如果有循环,如果
if (productLength==0){
this.data.productIist.push(products);
this.setData({
productIist: this.data.productIist
})
}else{
// 原来思路:把数组中的每一项code取出来与扫码得到的code进行对比,如果不相等就push到数组中 从而在页面循环,但是发现
// 当数组的length>1的情况下,会发生即使你扫码得到的code不与原数组相同但是会重复多次,次数由productIist.length决定             productIist.forEach(item=>{
if(item.code !==this.data.productIist.code ) {
this.data.productIist.push(products);
this.setData({
productIist: this.data.productIist
})
} })
}).catch((res) => {
console.log(res)
wzy.showPop('提示', '当前网络繁忙,请重新扫描')
})
},

所以 在上面的正确的示例中 使用for循环 并把判断也写进for循环中  如果数组中的code与扫描的code相等 就会弹出提示框,并且不会执行下面代码,但是当条件不相符的时候,便可以愉快的执行下面的代码了。

文中的wzy封装的方法

微信小程序之条件判断的更多相关文章

  1. 微信小程序-视图条件渲染

    条件渲染 wx:if 在框架中,我们用 wx:if="{{condition}}" 来判断是否需要渲染该代码块: <view wx:if="{{condition} ...

  2. 微信小程序:如何判断数组中的条数?

    可以<view wx:if="{{list.length == 0}}"> </view> 可以在 {{}} 内进行简单的运算,包括三元运算符.逻辑判断.算 ...

  3. 微信小程序:条件渲染wx:if和hidden

    一.条件渲染:wx:if,wx:elif,wx:else 花括号中的true或false可以改成变量从而来动态显示. 二.hidden 只显示hidden2 当标签不是频繁切换显示(控制是否渲染到页面 ...

  4. 微信小程序-if条件渲染

    #index.wxml <view>今天吃啥</view> <view wx:if="{{condition==1}}"> 饺子 </vi ...

  5. 微信小程序的页面渲染(if/for)

    下面,粗略的介绍一下微信小程序的条件渲染.列表渲染.数据绑定等,详细的内容大家可以去看微信小程序的API,在此只做简单描述,希望能帮助到大家 条件渲染 <!--wxml--> <vi ...

  6. 微信小程序学习指南

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  7. 微信小程序与vueJs的异同

    简而言之,所有的框架都是建立在原生javascript基础之上的,所以对于有一定js基础的同学来说,各种框架都是比较容易入手的,但不同的框架之间又有一定的差别,有时候切换使用时就会掉入坑了. 一.微信 ...

  8. 如何开发微信小程序学习

    文件中 project.config.json是开发者工具为我们自动生成的一个开发者工具的配置文件,主要是保存了一些我们对开发者工具的个性化配置. 一个微信小程序应用至少要有两个文件 一个是app.j ...

  9. 小程序开发运营必看:微信小程序平台运营规范

    一.原则及相关说明 ​ 微信最核心的价值,就是连接——提供一对一.一对多和多对多的连接方式,从而实现人与人.人与智能终端.人与社交化娱乐.人与硬件设备的连接,同时连接服务.资讯.商业. ​ 微信团队一 ...

随机推荐

  1. css and canvas实现圆形进度条

    进度条效果:   话不多说,上代码 使用css动画实现,看到一篇博客的启发,稍微修改了下, css实现的原理是用两个半圆一开始隐藏,再分别旋转180度,最后成为一个整圆 半圆效果,一开始右边的半圆在盒 ...

  2. 4.Nginx配置文件Nginx.conf_虚拟主机配置规则

    1.Nginx配置文件及各个配置项含义 #定义Nginx运行的用户和用户组 user www www; #nginx进程数,建议设置为等于CPU总核心数. worker_processes 8; #全 ...

  3. tp5将查询数据返回为对象转为数组

    use think\Model; collection()->toArray(); $result = collection(model("Menu")->order( ...

  4. for(auto count:counts)

    c++中for(auto count : counts) 这是C++11中的语法,即:Range-based for loop.其中counts应满足:begin(counts), end(count ...

  5. MyBatis: Invalid bound statement (not found)错误的可能原因

    MyBatis: Invalid bound statement (not found)错误的可能原因 其他原因导致此问题解决参考: 1.检查 xml 文件所在 package 名称是否和 Mappe ...

  6. SSM项目无法解析JSP页面

    JSP页面显示标头<%@ page language="java" contentType="text/html; charset=UTF-8" page ...

  7. iconv命令

    iconv 用法: Usage: iconv [OPTION...] [FILE...] Convert encoding of given files from one encoding to an ...

  8. Pandas中DataFrame数据合并、连接(concat、merge、join)之merge

    二.merge:通过键拼接列 类似于关系型数据库的连接方式,可以根据一个或多个键将不同的DatFrame连接起来. 该函数的典型应用场景是,针对同一个主键存在两张不同字段的表,根据主键整合到一张表里面 ...

  9. markdown 使用总结

    Markdown介绍 Markdown 是一种轻量级标记语言,创始人为约翰·格鲁伯(John Gruber).它允许人们“使用易读易写的纯文本格式编写文档,然后转换成有效的XHTML(或者HTML)文 ...

  10. 9种纯CSS3人物信息卡片动态展示效果

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...