微信小程序----wx.scanCode(Object object)调起客户端扫码界面进行扫码

WXRUI体验二维码

WXRUI体验码

如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢!

效果

扫码解析

参数(Object object)

属性类型默认值是否必填说明支持版本
onlyFromCamerabooleanfalse是否只能从相机扫码,不允许从相册选择图片>= 1.2.0
scanTypeArray.[‘barCode’, ‘qrCode’]扫码类型>= 1.7.0
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)

JS

  1. 设置既能唤醒扫码界面,又能进行从相册选择图片解析;
  2. 设置扫码类型;
  3. 将扫码返回的结果 result 通过参数的形式传递给查询页面,并且跳转查询页面。
wx.scanCode({
    onlyFromCamera: false,
    scanType: ['barCode', 'qrCode', 'datamatrix','pdf417'],
    success: res => {
        if(res.errMsg == 'scanCode:ok'){
            wx.navigateTo({
                url: '../../pages/search/search?keyword=' + res.result
            })
        }
    },
    fail: res => {
    // 接口调用失败
    wx.showToast({
        icon: 'none',
        title: '接口调用失败!'
    })
    },
    complete: res => {
        // 接口调用结束
        console.log(res)
    }
});

注意

  1. 改接口的扫码功能没有什么技术难点,需要注意的是要将扫码返回的结果传递到查询页面;
  2. 由于扫码查询就会进入页面就进行一次查询函数的调用,所以初始化的时候,把查询数组的页码、总页数、查询数组都要初始化,防止滚动加载后,不再查询。

WXRUI体验二维码

WXRUI体验码

如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢!

其他

QQ交流群: 264303060

QQ交流群

我的博客,欢迎交流!

我的优快云博客,欢迎交流!

微信小程序专栏

前端笔记专栏

微信小程序实现部分高德地图功能的DEMO下载

微信小程序实现MUI的部分效果的DEMO下载

微信小程序实现MUI的GIT项目地址

微信小程序实例列表

前端笔记列表

游戏列表

### 微信小程序贩卖系统概述 微信小程序贩卖系统通常涉及前端的小程序界面以及后端的服务接口。从前端来看,用户可以通过描二维触发特定的商品购买流程;而后端则负责处理支付逻辑、库存管理和订单创建等业务。 对于此类系统的实现,可以借鉴基于Java和MySQL构建的商店管理系统[^2]。这类系统不仅支持基本的商品浏览与下单操作,还能够集成第三方支付平台如微信支付的功能模块,从而完成整个交易过程中的资金流转环节。 以下是简化版的微信小程序贩卖系统的部分核心代片段: #### 小程序前端页面 (pages/product/scan.js) ```javascript // 引入必要的API库 const app = getApp(); Page({ data: { productId: '' }, onLoad() {}, onShow() { this.scanCode(); }, scanCode() { wx.scanCode({ success(res) { const { result } = res; let productId = decodeURIComponent(result.split('=')[1]); // 更新data属性并跳转至商品详情页传递参数 this.setData({ productId }); wx.navigateTo({ url: `/pages/detail/index?id=${productId}` }) } }) } }) ``` 这段JavaScript脚本展示了如何在微信小程序中启动摄像头描条形或QR Code,并从中提取产品ID用于后续查询具体的产品信息。 #### 后台服务端控制器方法 (controller/ProductController.java) ```java @RestController @RequestMapping("/api/v1/products") public class ProductController { @Autowired private ProductService productService; /** * 获取指定产品的详细资料. */ @GetMapping("/{id}") public ResponseEntity<ProductDTO> getProductById(@PathVariable String id){ Optional<ProductEntity> optionalProduct = productService.findById(id); if (!optionalProduct.isPresent()) { throw new ResourceNotFoundException("找不到对应的产品"); } return ResponseEntity.ok(ProductMapper.toDto(optionalProduct.get())); } } ``` 此段Java代定义了一个RESTful API endpoint,它接收来自客户端发出的HTTP GET请求,依据传入的产品编号检索相应的记录,并将其转换成适合传输的数据结构返回给调用方。 #### 支付回调处理器 (service/PaymentService.java) ```java @Service @Slf4j public class PaymentService implements IPaymentCallbackHandler { @Override public void handlePaymentNotification(Map<String, Object> params) throws Exception { log.info("接收到支付通知{}", JSON.toJSONString(params)); // 解析参数列表... String orderId = (String)params.get("out_trade_no"); Integer totalFee = ((Double)(params.get("total_fee"))).intValue(); Order order = orderRepository.findByOrderId(orderId); if(null != order && !order.isPaid()){ synchronized(this){ try{ // 更新订单状态为已付款 order.setPaid(true); orderRepository.save(order); // 发送确认消息给客户... }catch(Exception e){ log.error("更新订单失败",e); throw new RuntimeException(e.getMessage()); } } } } } ``` 上述`handlePaymentNotification()`函数实现了当微信支付成功之后服务器所要执行的动作——主要是验证交易合法性并将关联的订单标记为已完成支付的状态。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Rattenking

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值