jjzjj

微信小程序 camera组件实现自定义界面的扫码功能

woowen！ 2024-01-07 原文

目录

使用到的功能点：

代码实现：

效果图：

想要实现自定义界面的扫码，这里用到了微信小程序的媒体组件

⚠️：同一页面只能插入一个 camera 组件

使用到的功能点：

1. camera

  • mode=scanCode // 扫码模式
  • binderror  //用户不允许使用摄像头时触发
  • bindscancode // 在扫码识别成功时触发，仅在 mode="scanCode" 时生效

2.<cover-image> 也可使用image替代  // 覆盖camera原有的样式

3.跳转URL携带参数字符长度过长，需要encodeURIComponent编码URI

 

cover-view 与 cover-image

为了解决原生组件层级最高的限制。小程序专门提供了 cover-view 和 cover-image 组件，可以覆盖在部分原生组件上面。这两个组件也是原生组件，但是使用限制与其他原生组件有所不同。

代码实现：

// scan.vue. 扫码页
<view>
	<camera class="scan-area" @scancode="onScancode" @error="onError" mode="scanCode" device-position="back" flash="off">
		// <cover-image src="/static/image/scan-camera.gif"></cover-image>
        <image src="/static/image/scan-camera.gif"></image>
	</camera>

	<text>将二维码/条码放入框内，即可自动扫描</text>

	<view class="btn">	
		<view class="photo">
			<img @click="onPhoto" src="/static/image/photo.png" alt="" />
			<text>相册</text>
		</view>
	</view>
</view>

<script>
import * as utils from "@/utils/index";
export default({
    data(){
        return{
            hasScan: false， // false 还未跳转，true 已跳转一次
        }

    },
    onHide() { // 生命周期回调—监听页面隐藏
			this.hasScan = false
	},
	onUnload() { //生命周期回调—监听页面卸载
			this.hasScan = false
	},
    methods: {
			/**
			 * 扫码识别成功时触发,跳转至扫描详情页
			 * 防止扫码成功后页面多次跳转这里需要双重校验：
			 * 第一层校验：延迟跳转utils.throttle
			 * 第二层校验：使用变量控制hasScan是否跳转
			 * */
			onScancode: utils.throttle(function (e) {
				let bid = e.detail.result;
				if (!this.hasScan) {
					wx.navigateTo({
						url: `/sub_scan/scan_details/index?bid=` + encodeURIComponent(JSON.stringify(bid)),
						success: function(){
							this.hasScan = true
						}
					});
				}
			}, 1000),
    }
})

</script>

utils.throttle  方法：

// utils.js

/**
 * 防止小程序多次点击跳转
 * @param {*} obj 
 * @returns 
 */
export function throttle(fn, gapTime) {
    if (gapTime == null || gapTime == undefined) {
        gapTime = 1500
    }

    let _lastTime = null

    // 返回新的函数
    return function () {
        let _nowTime = + new Date()
        if (_nowTime - _lastTime > gapTime || !_lastTime) {
            fn.apply(this, arguments)   //将this和参数传给原函数
            _lastTime = _nowTime
        }
    }
}

scan_detail.vue 接收扫码页面的参数

// scan_detail.vue ,扫描详情页

onLoad(option) {
			this.BID = JSON.parse(decodeURIComponent(option.bid)); // 拿到参数bid

			if (!utils.isNullOrEmpty(this.BID) && this.BID.indexOf('did:bid') > -1) {
				// 当有bid的时候，loading先暂时加载着，直到接口内容返回后，才需要将loading设置为false，identifyState设置为true
				this.onGetDidDetails(this.BID) // 调用接口
			} else {
				this.isShowLoading = false // 当识别不到bid则loading消失。显示未识别内容
				this.identifyState = false // 显示未识别
			}
		},

以上实现扫码跳转，携带扫码成功的参数跳转至详情页面！

自定cameraxff61image微信小程序小程序

有关微信小程序 camera组件实现自定义界面的扫码功能的更多相关文章

  1. ruby-on-rails - form_for 中不在模型中的自定义字段 - 2

    我想向我的Controller传递一个参数，它是一个简单的复选框，但我不知道如何在模型的form_for中引入它，这是我的观点:{:id=>'go_finance'}do|f|%>Transferirde:para:Entrada:"input",:placeholder=>"Quantofoiganho?"%>Saída:"output",:placeholder=>"Quantofoigasto?"%>Nota:我想做一个额外的复选框，但我该怎么做，模型中没有一个对象，而是一个要检查的对象，以便在Controller中创建一个ifelse，如果没有检查，请帮助我，非常感谢,谢谢

  2. ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2

    我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征，我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现，但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden

  3. ruby-on-rails - Cucumber 是否只是 rspec 的包装器以帮助将测试组织成功能？ - 2

    只是想确保我理解了事情。据我目前收集到的信息，Cucumber只是一个“包装器”，或者是一种通过将事物分类为功能和步骤来组织测试的好方法，其中实际的单元测试处于步骤阶段。它允许您根据事物的工作方式组织您的测试。对吗？ 最佳答案 有点。它是一种组织测试的方式，但不仅如此。它的行为就像最初的Rails集成测试一样，但更易于使用。这里最大的好处是您的session在整个Scenario中保持透明。关于Cucumber的另一件事是您(应该)从使用您的代码的浏览器或客户端的角度进行测试。如果您愿意，您可以使用步骤来构建对象和设置状态，但通常您

  4. ruby-on-rails - 如何生成传递一些自定义参数的 `link_to` URL？ - 2

    我正在使用RubyonRails3.0.9，我想生成一个传递一些自定义参数的link_toURL。也就是说，有一个articles_path(www.my_web_site_name.com/articles)我想生成如下内容:link_to'Samplelinktitle',...#HereIshouldimplementthecode#=>'http://www.my_web_site_name.com/articles?param1=value1¶m2=value2&...我如何编写link_to语句“alàRubyonRailsWay”以实现该目的？如果我想通过传递一些

  5. ruby-on-rails - 如何在 Rails 3 中创建自定义脚手架生成器？ - 2

    有这些railscast。http://railscasts.com/episodes/218-making-generators-in-rails-3有了这个，你就会知道如何创建样式表和脚手架生成器。http://railscasts.com/episodes/216-generators-in-rails-3通过这个，您可以了解如何添加一些文件来修改脚手架View。我想把两者结合起来。我想创建一个生成器，它也可以创建脚手架View。有点像RyanBates漂亮的生成器或web_app_themegem(https://github.com/pilu/web-app-theme)。我

  6. ruby-on-rails - 事件管理员日期过滤器日期格式自定义 - 2

    是否有简单的方法来更改默认ISO格式(yyyy-mm-dd)的ActiveAdmin日期过滤器显示格式？ 最佳答案 您可以像这样为日期选择器提供额外的选项，而不是覆盖js:=f.input:my_date,as::datepicker,datepicker_options:{dateFormat:"mm/dd/yy"} 关于ruby-on-rails-事件管理员日期过滤器日期格式自定义，我们在StackOverflow上找到一个类似的问题： https://s

  7. 华为OD机试用Python实现 -【明明的随机数】 2023Q1A - 2

    华为OD机试题本篇题目：明明的随机数题目输入描述输出描述：示例1输入输出说明代码编写思路最近更新的博客华为od2023|什么是华为od，od薪资待遇，od机试题清单华为OD机试真题大全，用Python解华为机试题|机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为o

  8. 基于C#实现简易绘图工具【100010177】 - 2

    C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.

  9. ruby-on-rails - 从应用程序中自定义文件夹内的命名空间自动加载 - 2

    我们目前正在为ROR3.2开发自定义cms引擎。在这个过程中，我们希望成为我们的rails应用程序中的一等公民的几个类类型起源，这意味着它们应该驻留在应用程序的app文件夹下，它是插件。目前我们有以下类型:数据源数据类型查看我在app文件夹下创建了多个目录来保存这些:应用/数据源应用/数据类型应用/View更多类型将随之而来，我有点担心应用程序文件夹被这么多目录污染。因此，我想将它们移动到一个子目录/模块中，该子目录/模块包含cms定义的所有类型。所有类都应位于MyCms命名空间内，目录布局应如下所示:应用程序/my_cms/data_source应用程序/my_cms/data_ty

  10. ruby-on-rails - Rails - 使用/自定义 URL : '/dashboard' 指定根路径 - 2

    如何使此根路径转到:“/dashboard”而不仅仅是http://example.com？root:to=>'dashboard#index',:constraints=>lambda{|req|!req.session[:user_id].blank?} 最佳答案 您可以通过以下方式实现:root:to=>redirect('/dashboard')match'/dashboard',:to=>"dashboard#index",:constraints=>lambda{|req|!req.session[:user_id].b

随机推荐