前言

本教程是基于 “apifm-wxapi” 模块，教你快速实现小程序开发，所以你可能需要先了解以下知识点：

《创建 HelloWorld 项目》
《使用 “apifm-wxapi” 快速开发小程序》
《免费注册开通后台，获得专属域名》

功能说明

任何商品的外包装上都有一个条形码；
本例演示如何快速实现输入条形码查询商品信息；

小程序实现

效果演示

查条码Demo - 图1

wxml代码

  1. <view class="page">
  2.   <view class="page__bd">
  3.     <view class="weui-cells__title">商品条码查询</view>
  4.     <view class="weui-cells weui-cells_after-title">
  5.       <view class="weui-cell ">
  6.         <view class="weui-cell__hd">
  7.           <view class="weui-label">条码</view>
  8.         </view>
  9.         <view class="weui-cell__bd">
  10.           <input class="weui-input" placeholder="请输入条码" bindinput="barcodeChange" />
  11.         </view>
  12.       </view>
  13.     </view>
  15.     <view class="weui-btn-area">
  16.       <button class="weui-btn" type="primary" bindtap="queryBarcode">查询</button>
  17.     </view>
  18.   </view>
  19. </view>

js代码

  1. const WXAPI = require('apifm-wxapi')
  2. WXAPI.init('gooking')
  4. Page({
  5.   data: {
  6.     barcode: undefined
  7.   },
  8.   onLoad: function (options) {
  10.   },
  11.   onShow: function () {
  13.   },
  14.   barcodeChange(e){
  15.     this.data.barcode = e.detail.value
  16.   },
  17.   queryBarcode() { // 查询条码
  18.     if (!this.data.barcode){
  19.       wx.showToast({
  20.         title: '条码不能为空',
  21.         icon: 'none'
  22.       })
  23.       return
  24.     }
  25.     WXAPI.queryBarcode(this.data.barcode).then(res => {
  26.       console.log(res)
  27.       if (res.code == 0) {
  28.         wx.showToast({
  29.           title: '查询成功',
  30.           icon: 'success'
  31.         })
  32.       } else {
  33.         wx.showToast({
  34.           title: res.msg,
  35.           icon: 'none'
  36.         })
  37.       }
  38.     })
  39.   }
  40. })

WXAPI.init(‘gooking’) 这句代码是将你的小程序链接到你的后台，其中 gooking 这个是你的专属域名(请查看前言中关于专属域名的章节说明)；

利用小程序的扫码api，你可以轻松实现调用微信扫码接口实现快速扫码读取条形码继而查询

拓展：

利用该功能，你可以尝试着开发一款基于商品条码的进销存、出入库类小程序，记得和大家一起分享哦~

期待你的进步！
感谢！