美文网首页微信小程序apifm-wxapi微信小程序开发
简单的查条码小程序Demo (输入商品条码查询商品信息)

简单的查条码小程序Demo (输入商品条码查询商品信息)

作者: fe1e31171ab2 | 来源:发表于2019-08-09 12:58 被阅读0次

前言

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

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

功能说明

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

小程序实现

效果演示

商品条码查询Demo

wxml代码

<view class="page">
  <view class="page__bd">
    <view class="weui-cells__title">商品条码查询</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell ">
        <view class="weui-cell__hd">
          <view class="weui-label">条码</view>
        </view>
        <view class="weui-cell__bd">
          <input class="weui-input" placeholder="请输入条码" bindinput="barcodeChange" />
        </view>
      </view>
    </view>

    <view class="weui-btn-area">
      <button class="weui-btn" type="primary" bindtap="queryBarcode">查询</button>
    </view>
  </view>
</view>

js代码

const WXAPI = require('apifm-wxapi')
WXAPI.init('gooking')

Page({
  data: {
    barcode: undefined
  },
  onLoad: function (options) {

  },
  onShow: function () {

  },
  barcodeChange(e){
    this.data.barcode = e.detail.value
  },
  queryBarcode() { // 查询条码
    if (!this.data.barcode){
      wx.showToast({
        title: '条码不能为空',
        icon: 'none'
      })
      return
    }
    WXAPI.queryBarcode(this.data.barcode).then(res => {
      console.log(res)
      if (res.code == 0) {
        wx.showToast({
          title: '查询成功',
          icon: 'success'
        })
      } else {
        wx.showToast({
          title: res.msg,
          icon: 'none'
        })
      }
    })
  }
})

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

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

拓展:

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

期待你的进步!
感谢!

相关文章

  • 简单的查条码小程序Demo (输入商品条码查询商品信息)

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

  • 2.7商品信息录入界面功能设计

    一.主要功能 商超管理系统的登入以及录入商品信息。用户可通过点击录入商品信息,进入商品信息界面,通过输入商品条码、...

  • 《2.8 商品信息录入界面功能设计》项目总结汇报

    一、效果图 二、画面主要功能:点击录入商品信息,进入录入商品信息界面,输入商品条码、商品名称、商品价格。商品规格、...

  • 2018-05-25

    2.9 商品信息查询修改界面功能设计 修改流程 1.画面主要功能 修改商品的各种信息,但是商品条码不能修改。 2....

  • 2.9 商品信息查询修改界面功能设计

    一、成果界面展示 二、界面功能描述 本界面可以根据所提供的商品条码名称对商品信息按要求的查询、信息的修改和删除 三...

  • 简单查商品 – Easier

    简单查商品是一款查找澳洲保健品信息的微信小程序。通过扫描商品上的条码,即可获取商品的中文信息。通常我们买到的保健品...

  • 2.7 商品信息录入界面功能设计

    一、界面主要功能 该界面主要用于商品信息的录入,其中包括条码,名称,价格,规格等信息 为了支持商品信息的录入功能,...

  • 物流条码的特点-idata数据采集器完全适用

    商品条码在当今已有广泛应用,而物流条码扫描器则刚刚起步。物流条码与通用商品条码相比,有着许多不同之处: 1、标识对...

  • 2.7

    2.7 1.GIF效果图 2.功能: 设计录入制作商品信息录入界面,可录入商品条码、商品名称、商品价格、商品规格以...

  • 如何建立规范的条码

    怎么样规范您的条码 【商品条码】通常是指一组规则排列的字母、数字或符号组成的一列标记,规范的商品条码可以有效的提高...

网友评论

    本文标题:简单的查条码小程序Demo (输入商品条码查询商品信息)

    本文链接:https://www.haomeiwen.com/subject/lzncjctx.html