小程序扫码_小程序扫码点餐 - CSDN
  • 在微信小程序中生成条形和二维码需要使用到wxbarcode的npm包,wxbarcode的npm包地址:https://www.npmjs.com/package/wxbarcode 1:安装wxbarcode npmiwxbarcode-S--production 在微信小程序项目中使用npm包...

    一:条形码,二维码生成

    在微信小程序中生成条形码和二维码需要使用到wxbarcode的npm包,wxbarcode的npm包地址:https://www.npmjs.com/package/wxbarcode

    1:安装wxbarcode

    npm i wxbarcode -S --production

    在微信小程序项目中使用npm包参考:https://www.wj0511.com/site/detail.html?id=366

    2:条形码和二维码生成

    (1)引入wxbarcode包

    在你需要生成条形码和二维码页面的js中引入exbarcode包

    import wxbarcode from 'wxbarcode'

    或:

    const wxbarcode = require('wxbarcode')

    (2)条形码生成

    在wxbarcode包中生成条形码使用到了barcode函数,barcode的函数原型为:

    barcode(id, code, width, height)

    参数说明:

    id: wxml文件中的 Canvas ID

    code: 用于生成条形码的字符串

    width: 生成的条形码宽度,单位 rpx

    height: 生成的条形码高度,单位 rpx

    条形码生成实例:

    wxml:

    <canvas canvas-id="barcode" />

    js:

    onLoad: function (options) {
        wxbarcode.barcode('barcode', '1234567890123456789', 680, 200);
    },

    根据如上可实现条形码生成:

    image.png

    (3)二维码生成

    在wxbarcode包中生成二维码使用到了qrcode函数,qrcode的函数原型为:

    qrcode(id, code, width, height)

    参数说明:

    id: wxml文件中的 Canvas ID

    code: 用于生成二维码的字符串

    width: 生成的二维码宽度,单位 rpx

    height: 生成的二维码高度,单位 rpx

    二维码生成实例:

    wxml:

    <canvas canvas-id="qrcode" />

    js:

    onLoad: function (options) {
        wxbarcode.qrcode('qrcode', '1234567890123456789', 300, 300);
    },

    根据如上可实现二维码生成:

    image.png

    二:微信小程序扫码

    微信小程序扫码使用到了微信自带的API:wx.scanCode(Object object)

    wx.scanCode的参数:

    onlyFromCamera:是否只能从相机扫码,不允许从相册选择图片,默认为false

    scanType:扫码类型,默认为['barCode', 'qrCode'],参数可以为数组也可以为字符串,可选参数:barCode(一维码),qrCode(二维码),datamatrix(Data Matrix 码),pdf417(PDF417 条码 )

    success:接口调用成功的回调函数,回调成功参数:result(所扫码的内容),scanType(所扫码的类型),charSet(所扫码的字符集),path(当所扫的码为当前小程序二维码时,会返回此字段,内容为二维码携带的 path),rawData(原始数据,base64编码)

    fail:接口调用失败的回调函数

    complete:接口调用结束的回调函数(调用成功、失败都会执行)

    实例:

    // 允许从相机和相册扫码
    wx.scanCode({
    success(res) {
    //扫码成功执行
    console.log(res)
    },
    fail(res) {
    //扫码失败执行
    console.log(res)
    },
    complete(res) {
    //扫码结束执行
    console.log(res)
    }
    })

    如果你只允许拍照扫码的话你可以增加如下参数:

    onlyFromCamera: true,

    根据如上就可以实现微信小程序扫码

    展开全文
  • 小程序调用微信扫码控件会主动调用微信自身的扫码控件 调用的方法名 wx.scanCode() 以下是一些回调方法 附 demo wx.scanCode({ onlyFromCamera: true, success(res) { console.log(res) let result = res....

    小程序调用微信扫码控件会主动调用微信自身的扫码控件
    调用的方法名 wx.scanCode()
    以下是一些回调方法
    在这里插入图片描述
    附 demo

    wx.scanCode({
            onlyFromCamera: true,
            success(res) {
              console.log(res)     
              let result = res.result     //这里是扫码拿到的返回值加粗样式
              wx.request({
                method: "POST",
                url: "这里是自己的服务器接口" + result,
                success: (res) => {
                  console.log(res)   //这里是请求成功的回调
                }
              })
            }
          })
    
    展开全文
  • 医院场景:比如每个医生一个id,通过带参数二维码,扫码二维码就直接进入小程序医生页面 2.餐厅场景:比如每个菜一个二维码,通过扫码这个菜的二维码,进入小程序后,可以直接点这道菜,而不是要找菜铺。 3.电商...

    1.使用场景

    1.医院场景:比如每个医生一个id,通过带参数二维码,扫码二维码就直接进入小程序医生页面

    2.餐厅场景:比如每个菜一个二维码,通过扫码这个菜的二维码,进入小程序后,可以直接点这道菜,而不是要找菜铺。

    3.电商场景:扫码二维码带参数,进入小程序直接购买,比如通过公众号,通过带参数二维码,用户长按识别,直接进入服装的购买页面,提高购买转换。

    2.二维码生成

    通过后台接口可以获取小程序任意页面的二维码,扫描该二维码可以直接进入小程序对应的页面。
    小程序官方提供了3个二维码生成接口。可生成2种类型的二维码。

    微信公众号支持带参二维码的批量生成,但是小程序目前不可以,如果数量巨大,比如需要10万个带不同参数的二维码,那官方提供的二维码的生成方式就不实用了(可以自己尝试写一个脚本挂在那里循环生成233)

    2.1.类型一

    特点:

    接口A(菊花形二维码)、接口C(普通方形二维码):适用于需要的码数量较少的业务场景:

    • 0.可接受path参数较长
    • 1.通过该接口生成的小程序码,永久有效
    • 2.生成数量受限制( 目前接口A、B总数量限制是10万个),扫码访问次数没有限制
    • 3.用户扫码后,直接进入指定页面

    接口A的参数:

    参数 类型 默认值 说明
    path String - 不能为空,最大长度 128 字节
    width Int 430 二维码的宽度
    auto_color Bool false 自动配置线条颜色,如果颜色依然是黑色,则说明不建议配置主色调
    line_color Object {“r”:”0”,”g”:”0”,”b”:”0”} 二维码的线条颜色

    接口C的参数:

    参数 类型 默认值 说明
    path String - 不能为空,最大长度 128 字节
    width int 430 二维码的宽度
    2.2.类型二

    特点:

    接口B:适用于需要的码数量极多的业务场景

    • 0.可接受页面参数较短
    • 1.通过该接口生成的小程序码,永久有效
    • 2.数量不做限制(截止今天,官方未对生成数量做限制)
    • 3.用户扫码后,可以在对应页面获取到二维码中scene字段下面的值
    • 4.B接口调用分钟频率受限(目前5000次/分钟,会调整)
    • 5.B接口没有path参数,B接口只能跳转到主页面上。

    B接口每分钟调用频率受限(目前5000次/分钟),超出该限制会报错:45009,官方表示对该限制会做调整。
    B接口根据传入参数不同可以用作:渠道统计和大致的场景入口区分(比如:连锁店中,餐厅A是一个二维码,餐厅B是另一个二维码)

    接口B的参数:

    参数 类型 默认值 说明
    scene String - 最大32个可见字符,只支持数字,大小写英文以及部分特殊字
    page String - 必须是已经发布的小程序存在的页面(否则报错)
    width、auto_color、line_color 和接口1一样
    // 这是首页的 js
    Page({
      onLoad: function(options) {
        // options 中的scene需要使用decodeURIComponent才能获取到生成二维码时传入的scene
        var scene = decodeURIComponent(options.scene)//参数二维码传递过来的参数
        var query = options.query.dentistId // 参数二维码传递过来的场景参数
      }
    })

    3.第三方二维码生成

    好推二维码(芝麻小程序)

    芝麻小程序

    草料二维码

    草料二维码

    阿拉丁二维码

    这里写图片描述

    功能分析

    功能 好推 草料 阿拉丁
    费用: 免费 基础功能免费 基础功能免费
    批量生成 X 支持 支持
    路径带参数 支持 支持 支持
    定制参数 支持 X 支持
    带场景值 支持 X 支持
    二维码统计(人数/次数等) 支持 X 支持
    二维码样式定制 支持 支持 支持

    《参考文档》

    1.微信官方文档
    2.小程序二维码和小程序带参数二维码生成
    3.小程序社区: 跳坑《八十五》带参数二维码,返回数据保存为图片
    4.W3C-微信小程序API 获取小程序页面二维码

    展开全文
  • 一、生成二维码 1、获取appid,appsecret,利用工具: https://mp.weixin.qq.com/debug/ 获取access_token 2、利用接口产生二维码 ...可以利用postman来进行: 3、接收页面的代码 ...onLo...

    一、生成二维码
    1、获取appid,appsecret,利用工具:
    https://mp.weixin.qq.com/debug/
    获取access_token
    2、利用接口产生二维码
    https://developers.weixin.qq.com/miniprogram/dev/api/qrcode.html
    可以利用postman来进行:
    这里写图片描述

    3、接收页面的代码

    onLoad(options) {
        if (options.scene) {
          console.log("has scene");
          var scene = decodeURIComponent(options.scene);
          console.log("scene is ", scene);
          var arrPara = scene.split("&");
          var arr = [];
          for (var i in arrPara) {
            arr = arrPara[i].split("=");
            wx.setStorageSync(arr[0],arr[1]);
            console.log("setStorageSync:",arr[0],"=",arr[1]);
          }
        } else {
          console.log("no scene");
        }
      },

    4、开发阶段的测试
    因为要发布有线上的代码,并且配置的path也在线上的版本中有配置才能真正使用,那测试阶段如何操作?
    用开发者工具进行模拟:
    这里写图片描述

    这个是自定义的,模式名称是自己起的,启动页面,设为自己想要的,启动参数key为secne,value是经过encodeURIComponent编码的(因为在调用接口的时候,这些值也是会被encode处理,在接收的页面处理中,统一用decoce恢复),进入场景不知道有多大作用,这里选扫描小程序码或者扫描二维码都行。

    展开全文
  • 微信扫码进入小程序取参

    千次阅读 2020-03-04 16:47:24
    小程序扫码功能,官方只给了简单的介绍,和方法,这让很多像我一样的菜鸟,刚接触这样的功能时,完全无从下手,本章,我会详细的介绍一下,小程序扫码功能的实现。 注意事项: 1.小程序扫码功能,用处普遍,只有发布...
  • 效果jslet app = getApp(); Page({ data: { img: "/images/1.jpg" }, onLoad() { }, scan() { wx.scanCode({ success: (res) =&gt;...扫码结果"); console.log(res)...
  • 小程序连续扫码实现

    千次阅读 2019-01-10 10:58:32
    小程序中 官方提供了标准扫码函数 wx.scanCode   官方提供的函数做的已经比较完善了 但是缺点在与每次扫码完毕后都会关闭扫码页进入处理页面 无法达到超市扫码枪连续扫码的效果   在网上查询其他...
  • 最近有个需求,小程序的一个扫码页面,扫码界面一直开着,同时可以处理其他功能,如下: 由于直接调用微信的scanCode,无法自定义界面,所以只能使用原生组件camera,完成这个功能,关于扫描框的四个角的图片,就...
  • 微信小程序实例详解,扫描二维码获取信息

    万次阅读 多人点赞 2018-01-09 22:25:09
    1.最简单的二维码获得信息。 首先,在网上找一个二维码生成网站,生成一个二维码,我用的是草料二维码,随便生成了一个二维码做...4是小程序的结构,就是快速模板建立的,index页面里的内容都删空了,替换了新的代
  • 通过微信小程序扫码,在PC端登陆跳转相应页面 最近在做一个零食店,移动端采用微信小程序进行实现。当然,既然是零食店,那么肯定会有后台管理的,当时的想法是如何才能通过微信小程序里进行扫码去登陆PC端的管理...
  • 小程序扫码进入指定页面 需求: 通过扫特定二维码进入->工作用户界面 微信下拉进入小程序->回到首页 思路 需要做两步 一、判断用户是否是扫码进入 二、查看扫描的二维码是否里面带有路径参数/其他差数(根据...
  • 小程序扫码进入对应页面思路

    千次阅读 2019-05-28 15:25:03
    1.小程序扫码携带的参数字符个数有限,字符内容有限 (详情见官网:https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/qr-code/wxacode.getUnlimited.html#HTTPS%20%E8%B0%83%E7%94%A8) ,...
  • 微信小程序 扫码 加载图片

    千次阅读 2017-08-31 22:15:44
    微信小程序 扫码 加载图片 loading 隐藏组件
  • 作者:祈澈姑娘小程序扫码实现读取isbn,获取图书的各种信息接触到云函数已经有一段时间了,之前一直在看api,现在自己跟着网络上的资料和视频学习,受到豆瓣读书系列的启发,决定用云函数做一个项目,获取图书信息...
  • 最近有个需求,扫码获取在微信中识别二维码直接跳转到指定的打卡圈,下面来介绍下如何实现这个功能。 分享海报的绘制保存教程点击这里 这里是引用 ...
  • 小程序内嵌网页调用小程序扫码API

    千次阅读 2019-05-10 19:00:30
    如图所示,我需要点击扫码的按钮,调取小程序的API,但是我有两个不同类型的扫码类型,一个是条形码,一个是箱码,所以我在跳转的时候传了一个参数,codeType。 点击事件如下: clickScan(type, ...
  • 微信小程序扫码打开接入指南

    千次阅读 2019-06-21 09:51:04
    为了方便小程序开发者更便捷地推广小程序,兼容线下已有的二维码,微信公众平台开放扫描普通链接二维码跳转小程序能力。 2、功能 普通链接二维码,是指开发者使用工具对网页链接进行编码后生成的二维码。线下商户...
  • 小程序如何实现扫码支付即...如何用好扫码即成会员,自然需要从我们的小程序扫码支付功能说起,在传统的店铺收银台我们看到更多商家放的是个人的微信号收款码,这样用户扫码支付完,就没有后续的事情了,因此在使用小程
  • 2019独角兽企业重金招聘Python工程师标准>>> ...
  • 的二维码,通过草料二维码生成的,这个网站挺好的,用起来比较简单方便,可以直接输入文字生成二维码,也可以放入链接生成二维码。 草料二维码:https://cli.im/ index.wxml <view class="container">...
1 2 3 4 5 ... 20
收藏数 37,798
精华内容 15,119
关键字:

小程序扫码