微信小程序checkbox,checkbox-group多选框的简易用法,代码简洁,可复用性高

首先这是官网的用法:
代码非常的长,而且很难复用(不能多个复选框共用这个checkboxChange方法)

<checkbox-group bindchange="checkboxChange">
	 <label class="weui-cell weui-check__label" wx:for="{{items}}" wx:key="{{item.value}}">
	    <view class="weui-cell__hd">
	      <checkbox value="{{item.value}}" checked="{{item.checked}}"/>
	    </view>
	    <view class="weui-cell__bd">{{item.name}}</view>
	  </label>
</checkbox-group>
Page({
  onShareAppMessage() {
    return {
      title: 'checkbox',
      path: 'page/component/pages/checkbox/checkbox'
    }
  },

  data: {
    items: [
      {value: 'USA', name: '美国'},
      {value: 'CHN', name: '中国', checked: 'true'},
      {value: 'BRA', name: '巴西'},
      {value: 'JPN', name: '日本'},
      {value: 'ENG', name: '英国'},
      {value: 'FRA', name: '法国'}
    ]
  },

  checkboxChange(e) {
    console.log('checkbox发生change事件,携带value值为:', e.detail.value)

    const items = this.data.items
    const values = e.detail.value
    for (let i = 0, lenI = items.length; i < lenI; ++i) {
      items[i].checked = false

      for (let j = 0, lenJ = values.length; j < lenJ; ++j) {
        if (items[i].value === values[j]) {
          items[i].checked = true
          break
        }
      }
    }

    this.setData({
      items
    })
  }
})

划分线,下面是更好的写法


触发checkboxChange的时候传一个key值过去,之后值对应的是一个新数组(与下面wx:for的数组不同),用来存放已选择的项

<wxs module="v1">
	var  include = function(array,value) {
	    var has = false;
	    for (var i = 0; i < array.length; ++i) {
	        if (array[i] == value){
	            has = true;
	            return has
	        }
	    }
	    return has;
	 }
  module.exports.include =  include;
</wxs>

<checkbox-group bindchange="checkboxChange" data-key="selectedArray">
  <label wx:for="{{myArray}}" wx:key="index" >
       <view>
         <checkbox value="{{item.value}}" checked="{{v1.include(selectedArray,item.value)}}"/>
       </view>
       <view>{{item.name}}</view>
     </label>
 </checkbox-group>

因为 微信小程序中我们不能直接在wxml模板中使用includes方法(真是够落后的),所以只能用<wxs>自己定义一个,然后checked这样写,如果checked="{{item.checked}}"的话,选中状态的页面效果将不会存储起来.

为什么不用

var  include = function(array,value) {
    return array.indexOf(value) > -1
 }

来实现include效果,因为传值的时候默认会把数字转成字符串传过去,[“1”,“2”].indexOf(2)就等于-1了,用上面的方法就避免了这个情况

data:{
	myArray:[
      {value: 'v1', name: '菠萝'},
      {value: 'v2', name: '叉烧'},
    ],
    selectedArray: [],
},
checkboxChange(e) {
   let { key } = e.currentTarget.dataset;
   this.setData({
     [key]: e.detail.value
   })
 }

这里checkboxChange的意思就是把选中的值赋给我们传进来的参数(数组)
非常简洁,最重要的是,不管我们写了多少组checkbox-group,都能直接复用这个方法

<think>好的,用户想了解创芯科技CAN分析仪使用方法。我需要根据提供的引用资料来整理回答。首先,用户提到的引用[1][4]提到了官网下载驱动CANTest软件安装,还有Python二次开发的步骤。引用[2][3]强调了了解CAN通讯基础项目应用。应该分步骤讲解,从硬件准备、驱动安装、软件使用到二次开发。要注意使用正确的格式,比如行内数学公式用$符号,但这里可能用不上。还要生成相关问题,可能涉及驱动安装问题、CANTest功能、Python开发要点应用场景。需要确保回答结构清晰,步骤详细,引用标识正确添加。检查是否有遗漏的步骤,比如硬件连接或常见问题。最后确认是否符合用户需求,可能需要补充一些注意事项,比如系统兼容性或驱动安装顺序。</think>### 创芯科技CAN分析仪使用教程 #### 一、硬件准备与驱动安装 1. **硬件连接** 将创芯科技CAN分析仪(如CANalyst-II)通过USB接口连接到电脑,并确保开发板与CAN分析仪通过CAN总线正确连接(需匹配波特率)[^3]。 2. **驱动安装** - 访问创芯科技官网下载驱动及资料包,选择对应型号(如CANalyst-II)的驱动[^1]。 - 解压安装包,运行驱动程序(如`CH368Driver.exe`),按提示完成安装[^4]。 - 安装完成后,在设备管理器中确认是否识别到设备(显示为`USB-CAN Interface`或类似名称)。 --- #### 二、CANTest软件使用 1. **安装与配置** - 下载并安装`CANTest`测试软件(包含在资料包中)。 - 打开软件,选择设备类型为`USBCAN-2A/2B`,设置通道参数(如波特率、滤波模式等)[^3]。 2. **基础通信测试** - 点击“启动设备”按钮,开启CAN通道。 - 在“发送区”输入CAN帧数据(ID、数据域等),点击“发送”测试通信是否正常。 - 接收区显示从CAN总线读取的数据,验证双向通信功能[^2]。 --- #### 三、Python二次开发(以CANalyst-II为例) 1. **依赖库安装** - 根据设备提供的DLL文件(如`ControlCAN.dll`),使用`ctypes`库进行调用。 ```python from ctypes import * can_dll = windll.LoadLibrary("ControlCAN.dll") ``` 2. **初始化设备** ```python # 打开设备 ret = can_dll.VCI_OpenDevice(device_type, device_index, reserved) # 初始化CAN通道参数(波特率、工作模式等) config = VCI_INIT_CONFIG() can_dll.VCI_InitCAN(device_type, device_index, can_channel, byref(config)) ``` 3. **数据收发示例** ```python # 发送数据 send_frame = VCI_CAN_OBJ(ID=0x123, Data=[0x01, 0x02]) can_dll.VCI_Transmit(device_type, device_index, can_channel, byref(send_frame), 1) # 接收数据 recv_frames = (VCI_CAN_OBJ * 1000)() ret = can_dll.VCI_Receive(device_type, device_index, can_channel, byref(recv_frames), 1000, 100) ``` --- #### 四、注意事项 1. 确保开发板与分析仪的**波特率一致**,否则无法通信。 2. 若驱动安装失败,尝试以管理员权限运行安装程序或禁用驱动程序强制签名。 3. 调试时建议先通过`CANTest`验证硬件连接,再进行二次开发。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值