小程序 生成条形码barcode.js

1、下载barcode.js,新建一个文件wxbarcode.js用于计算条形码的宽高,以自适应不同手机屏显示

var barcode = require(‘./barcode‘); 

function convert_length(length) {
    return Math.round(wx.getSystemInfoSync().windowWidth * length / 750);
}

function barc(id, code, width, height) {
    barcode.code128(wx.createCanvasContext(id), code, convert_length(width), convert_length(height)) //参数1:页面接收生成条形码的容器 参数2:需要生成条形码的code 参数3:条形码的宽度 参数4:条形码的高度
}

module.exports = {
    barcode: barc
}

2、在需要使用的页面引入wxbarcode.js

const wxbarcode = require(‘wxbarcode.js‘);

//在拿到生成条形码的id后调用
 wxbarcode.barcode(‘barcode‘, code, 490, 80); //注意在wxml中设置一个如代码id为barcode的wxml容器

3、注意:

由于barcode.js的条形码的位置实际是通过获取页面相关元素的高度后定位而得到的位置,

所以如果在条形码元素的前面,有通过手动计算后得到高度的元素,那么条形码的位置可能会出现偏差。

所以条形码前面的图片元素不能使用mode=‘widthFix‘属性,元素不能通过计算得到高度,最好通过wxss设置固定高。

原文地址:https://www.cnblogs.com/muzs/p/11212443.html

时间: 2024-10-04 17:28:24

小程序 生成条形码barcode.js的相关文章

微信小程序-06-详解介绍.js 逻辑层文件-注册页面

上一篇介绍的是 app.js 逻辑层文件中注册程序,对应的每个分页面都会有的 js 文件中 page() 函数注册页面 微信小程序-06-详解介绍.js 逻辑层文件-注册页面 宝典官方文档: https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html 今天开始深度学习编程语法,虽然大部分是拷贝官方文档,代码类都是我自己敲的,希望能自己敲一遍表格里的内容,熟悉一下操作 页面 Page Page(Object) Page(

微信小程序学习Course 4-2 JS数组对象学习

微信小程序学习Course 3-2 JS数组对象学习 本节主要介绍JS中的数组. 3-2.1 数组的声明 数组声明的方式多种,如下例.一般我们可以先创建一个空数组,然后再填充. var names = [];//创建一个空数组 var names = ["sadad","asdsad"];//创建一个包含两个字符串的数组 var names = new Array(3);//创建一个包含三个元素的数组 3-2.2 数组的增添 数组有多种增添方式,一种是栈方式,另一种

.NET开发微信小程序-生成二维码

1.生成小程序二维码功能 直接请求相应的链接.传递相应的参数 以生成商铺的付款码为例: var shopsId = e.ShopsId //付款码的参数 var codeModel = new function () { } codeModel.path = "pages/PageWxPay/PageWxPay?shopsId=" + shopsId codeModel.width = 430 codeModel.auto_color = false codeModel.line_co

小程序——如何引入外部js

当写小程序需要引入一些额外的js文件时,可以这样: 一.先把外部js用一个函数封闭起来: test.js function myfunc() { console.log("myfunc...."); } // 在这个函数的最下面暴露接口 module.exports.myfunc = myfunc; 二.引用 在需要引用此函数的文件里,如Index.js: const util = require("../../utils/test.js") // 这是引入文件 P

微信小程序之获取验证码js

在微信小程序中怎样实现获取验证码的倒计时功能捏,倒计时的原理是一样一样的,就是某些地方需要注意. 第一步:结构 <view class='get-code' wx:if="{{!isShow}}" bindtap='getCode'>获取验证码</view> <view class='get-code' wx:if="{{isShow}}">{{sec}}秒后重新发送</view> 注意:微信小程序中要用到两个按钮,不

微信小程序里解决app.js onLaunch事件与小程序页面的onLoad加载前后异常问题

使用 Promise 解决小程序页面因为需要app.js onLaunch 参数导致的请求失败 app.js onLaunch 的代码 1 "use strict"; 2 Object.defineProperty(exports, "__esModule", { 3 value: true 4 }); 5 const http = require('./utils/http.js'); 6 const api = require('./config.js'); 7

【微信小程序】引入外部js 方法

微信小程序引入外部js 方法 步骤: 1.首先将外部js放在你指定的文件夹里  如:utils/fecth.js 2.接下来 将该js文件中你要使用的方法给暴露出来 3.在您要使用的js中引入该js ,并使用暴露出来的方法 步骤1:使用utils文件夹下的 fetch.js 方法 步骤2:将我要使用的方法用 module.exports 给暴露出来 下面是一个网络请求的js方法: module.exports = (url, data) => { return new Promise((reso

微信小程序封装请求的js

1.配置访问服务器的地址config.js: const config = {//192.18.1.2:8083 https://www.so.com/ api_base_url: 'http://192.168.1.12:8083', // api_base_url:"https://www.baidu.com", img_base_url: '' } export { config } 2.封装http请求http.js: import { config } from './con

小程序实例:用js方法splict()、indexOf()、push()、replace()等操作数组Array的增删改查

一.增加数组子级 1.Array.push() 定义和用法 向数组的末尾处添加一个或多个子集,并返回新数组的长度 语法 var array=["好","扎在那个"]; array.push("fewa")//array=>["好","扎在那个","fewa"] 小程序配图 2.Array.unshift() 定义和用法 向数组的首部处添加一个或多个子集,并返回新数组的长度 语法 v