Commit 8a535c50 by 高淑倩

modify: 条形码

parent a1a97872
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -399,3 +399,4 @@ var PATTERNS = [
[2, 1, 1, 2, 3, 2, 0, 0], // 105
[2, 3, 3, 1, 1, 1, 2, 0] // 106
]
# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# http://editorconfig.org
root = true
[*]
# Change these settings to your own preference
indent_style = space
indent_size = 4
# We recommend you to keep these unchanged
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
env:
es6: true
node: true
extends: 'eslint:recommended'
parserOptions:
sourceType: module
rules:
indent:
- error
- 4
linebreak-style:
- error
- windows
quotes:
- error
- single
semi:
- error
- never
no-console: 0
no-unused-vars: 0
# Automatically normalize line endings for all text-based files
# http://git-scm.com/docs/gitattributes#_end_of_line_conversion
* text=auto
# For the following file types, normalize line endings to LF on
# checkin and prevent conversion to CRLF when they are checked out
# (this is required in order to prevent newline related issues like,
# for example, after the build script is run)
.* text eol=lf
*.css text eol=lf
*.html text eol=lf
*.jade text eol=lf
*.js text eol=lf
*.json text eol=lf
*.less text eol=lf
*.scss text eol=lf
*.md text eol=lf
*.sh text eol=lf
*.txt text eol=lf
*.xml text eol=lf
# Include your project-specific ignores in this file
# Read about how to use .gitignore: https://help.github.com/articles/ignoring-files
build
node_modules
ncp-debug.log
npm-debug.log
# Generated by https://www.gitignore.io
### SublimeText ###
# cache files for sublime text
*.tmlanguage.cache
*.tmPreferences.cache
*.stTheme.cache
# workspace files are user-specific
*.sublime-workspace
# project files should be checked into the repository, unless a significant
# proportion of contributors will probably not be using SublimeText
*.sublime-project
# sftp configuration file
sftp-config.json
### Windows ###
# Windows image file caches
Thumbs.db
ehthumbs.db
# Folder config file
Desktop.ini
# Recycle Bin used on file shares
$RECYCLE.BIN/
# Windows Installer files
*.cab
*.msi
*.msm
*.msp
# Windows shortcuts
*.lnk
### OSX ###
.DS_Store
.AppleDouble
.LSOverride
# Thumbnails
._*
# Files that might appear in the root of a volume
.DocumentRevisions-V100
.fseventsd
.Spotlight-V100
.TemporaryItems
.Trashes
.VolumeIcon.icns
# Directories potentially created on remote AFP share
.AppleDB
.AppleDesktop
Network Trash Folder
Temporary Items
.apdisk
### Node ###
# Logs
*.log
npm-debug.log*
# Runtime data
pids
*.pid
*.seed
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# node-waf configuration
.lock-wscript
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules
jspm_packages
# Optional npm cache directory
.npm
# Optional REPL history
.node_repl_history
language: node_js
node_js:
- "6"
MIT License
Copyright (c) 2016 Alsey DAI (zamber@gmail.com)
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
\ No newline at end of file
# wxbarcode
微信小程序生成条码和二维码模块。
[![NPM Version][npm-image]][npm-url]
[![NPM Downloads][downloads-image]][downloads-url]
[![NPM](https://nodei.co/npm/wxbarcode.png?compact=true)](https://nodei.co/npm/wxbarcode/)
## 效果
![截图](https://raw.githubusercontent.com/alsey/wxbarcode/master/capture.png)
## 安装
```bash
$ npm install wxbarcode
```
## 使用方法
```js
import wxbarcode from 'wxbarcode'
wxbarcode.barcode('barcode', '1234567890123456789', 680, 200);
wxbarcode.qrcode('qrcode', '1234567890123456789', 420, 420);
```
### 条形码
函数名:barcode
函数原型:barcode(id, code, width, height)
参数:
- id: wxml文件中的 Canvas ID
- code: 用于生成条形码的字符串
- width: 生成的条形码宽度,单位 rpx
- height: 生成的条形码高度,单位 rpx
### 二维码
函数名:qrcode
函数原型:qrcode(id, code, width, height)
参数:
- id: wxml文件中的 Canvas ID
- code: 用于生成二维码的字符串
- width: 生成的二维码宽度,单位 rpx
- height: 生成的二维码高度,单位 rpx
## 例子
请参考`demo`文件夹下代码。
## License
[MIT](LICENSE)
[npm-image]: https://badge.fury.io/js/wxbarcode.svg
[npm-url]: https://npmjs.org/package/wxbarcode
[downloads-image]: https://img.shields.io/npm/dm/wxbarcode.svg
[downloads-url]: https://npmjs.org/package/wxbarcode
//app.js
App({})
\ No newline at end of file
{
"pages":[
"pages/index/index"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#439057",
"navigationBarTitleText": "条码、二维码演示程序",
"navigationBarTextStyle":"white"
}
}
//index.js
var wxbarcode = require('../../utils/index.js');
Page({
data: {
code: '1234567890123456789'
},
onLoad: function() {
wxbarcode.barcode('barcode', '1234567890123456789', 680, 200);
wxbarcode.qrcode('qrcode', '1234567890123456789', 420, 420);
}
})
<!--index.wxml-->
<view class="container page">
<view class="panel">
<view class="header">
</view>
<view class="barcode">
<view class="barnum">{{code}}</view>
<canvas canvas-id="barcode" />
</view>
<view class="qrcode">
<canvas canvas-id="qrcode" />
</view>
</view>
</view>
/**index.wxss**/
page {
background-color: #439057;
}
.page {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container {
padding-bottom: 10rpx;
}
.panel {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
box-sizing: border-box;
width: 710rpx;
margin-top: 40rpx;
border-radius: 10rpx;
background-color: #fff;
}
.header {
height: 140rpx;
background-color: #f0f0f0;
border-radius: 10rpx 10rpx 0 0;
}
.barcode {
display: flex;
height: 320rpx;
flex-direction: column;
justify-content: center;
align-items: center;
}
.barnum {
width: 670rpx;
height: 100rpx;
line-height: 100rpx;
font-size: 38rpx;
font-weight: bold;
text-align: center;
letter-spacing: 10rpx;
white-space: nowrap;
}
.barcode > canvas {
width: 680rpx;
height: 200rpx;
}
.qrcode {
height: 420rpx;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
.qrcode > canvas {
width: 420rpx;
height: 420rpx;
}
var barcode = require('./barcode');
var qrcode = require('./qrcode');
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))
}
function qrc(id, code, width, height) {
qrcode.api.draw(code, {
ctx: wx.createCanvasContext(id),
width: convert_length(width),
height: convert_length(height)
})
}
module.exports = {
barcode: barc,
qrcode: qrc
}
\ No newline at end of file
module.exports = require('./demo/utils')
\ No newline at end of file
{
"_from": "wxbarcode",
"_id": "wxbarcode@1.0.2",
"_inBundle": false,
"_integrity": "sha1-zgLjSP8AYwHZIBd21sn1rZATFLU=",
"_location": "/wxbarcode",
"_phantomChildren": {},
"_requested": {
"type": "tag",
"registry": true,
"raw": "wxbarcode",
"name": "wxbarcode",
"escapedName": "wxbarcode",
"rawSpec": "",
"saveSpec": null,
"fetchSpec": "latest"
},
"_requiredBy": [
"#USER",
"/"
],
"_resolved": "https://registry.npmjs.org/wxbarcode/-/wxbarcode-1.0.2.tgz",
"_shasum": "ce02e348ff006301d9201776d6c9f5ad901314b5",
"_spec": "wxbarcode",
"_where": "F:\\code\\7-Eleven\\src",
"author": {
"name": "Alsey",
"url": "zamber@gmail.com"
},
"bugs": {
"url": "https://github.com/alsey/wxbarcode/issues"
},
"bundleDependencies": false,
"dependencies": {},
"deprecated": false,
"description": "微信小程序条码、二维码生成模块",
"devDependencies": {},
"homepage": "https://github.com/alsey/wxbarcode#readme",
"keywords": [
"wechat",
"weixin",
"wxapp",
"barcode",
"qrcode",
"微信",
"微信小程序",
"条码",
"二维码"
],
"license": "MIT",
"main": "index.js",
"name": "wxbarcode",
"repository": {
"type": "git",
"url": "git+https://github.com/alsey/wxbarcode.git"
},
"scripts": {},
"version": "1.0.2"
}
......@@ -5,7 +5,6 @@ const utils = require('../../utils/util')
const envInfo = require('../../config/index').envInfo
var wxbarcode = require('../../codeUtils/index.js');
wxService.page({
/**
* 页面的初始数据
......@@ -19,6 +18,22 @@ wxService.page({
*/
onShow: function () {
// Promise.JsBarcode("#imgcode", "123", {
// format: "CODE39",//选择要使用的条形码类型
// width:3,//设置条之间的宽度
// height:100,//高度
// displayValue:true,//是否在条形码下方显示文字
// text:"456",//覆盖显示的文本
// fontOptions:"bold italic",//使文字加粗体或变斜体
// font:"fantasy",//设置文本的字体
// textAlign:"left",//设置文本的水平对齐方式
// textPosition:"top",//设置文本的垂直位置
// textMargin:5,//设置条形码和文本之间的间距
// fontSize:15,//设置文本的大小
// background:"#eee",//设置条形码的背景
// lineColor:"#2196f3",//设置条和文本的颜色。
// margin:15//设置条形码周围的空白边距
// });
wxbarcode.barcode('barcode', '1234567890123456789', 700, 150);
......
......@@ -14,6 +14,8 @@
<view class='top-code'>987876786</view>
<view class='code-img'>
<canvas canvas-id="barcode" />
<!--<img id="imgcode" /> -->
</view>
<view class='bottom-code'>987868</view>
</view>
......
......@@ -30,6 +30,7 @@
}
.code-img{
margin-top: 30rpx;
margin-left: 5px;
}
.bottom-code{
font-size: 40rpx;
......
......@@ -37,7 +37,7 @@
"list": []
},
"miniprogram": {
"current": 11,
"current": 7,
"list": [
{
"id": -1,
......@@ -82,8 +82,8 @@
"query": "id=579702812007600128"
},
{
"id": -1,
"name": "welvcom",
"id": 7,
"name": "welcome",
"pathName": "pages/welcome/welcome",
"query": ""
},
......@@ -108,7 +108,8 @@
{
"id": -1,
"name": "激活领卡回调页面",
"pathName": "pages/activateCard/activateCardCallback"
"pathName": "pages/activateCard/activateCardCallback",
"query": ""
}
]
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment