Commit 60fa3237 by 高淑倩

add: 条形码

parent f207758f
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
...@@ -2,6 +2,7 @@ const app = getApp() ...@@ -2,6 +2,7 @@ const app = getApp()
const wxService = require('../../utils/wxService') const wxService = require('../../utils/wxService')
const utils = require('../../utils/util') const utils = require('../../utils/util')
const envInfo = require('../../config/index').envInfo const envInfo = require('../../config/index').envInfo
Component({ Component({
/** /**
* 组件的属性列表 * 组件的属性列表
......
# 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"
}
{
"requires": true,
"lockfileVersion": 1,
"dependencies": {
"wxbarcode": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/wxbarcode/-/wxbarcode-1.0.2.tgz",
"integrity": "sha1-zgLjSP8AYwHZIBd21sn1rZATFLU="
}
}
}
...@@ -3,6 +3,8 @@ const app = getApp() ...@@ -3,6 +3,8 @@ const app = getApp()
const wxService = require('../../utils/wxService') const wxService = require('../../utils/wxService')
const utils = require('../../utils/util') const utils = require('../../utils/util')
const envInfo = require('../../config/index').envInfo const envInfo = require('../../config/index').envInfo
var wxbarcode = require('../../codeUtils/index.js');
wxService.page({ wxService.page({
/** /**
...@@ -16,6 +18,10 @@ wxService.page({ ...@@ -16,6 +18,10 @@ wxService.page({
* 生命周期函数--监听页面显示 * 生命周期函数--监听页面显示
*/ */
onShow: function () { onShow: function () {
wxbarcode.barcode('barcode', '1234567890123456789', 700, 150);
const {title,cardno} = this.options const {title,cardno} = this.options
this.setData({ this.setData({
couponDetailTitle: title couponDetailTitle: title
......
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<view class='qr-code'> <view class='qr-code'>
<view class='top-code'>987876786</view> <view class='top-code'>987876786</view>
<view class='code-img'> <view class='code-img'>
<image src='/assets/imgs/avatar.png'></image> <canvas canvas-id="barcode" />
</view> </view>
<view class='bottom-code'>987868</view> <view class='bottom-code'>987868</view>
</view> </view>
......
...@@ -22,32 +22,32 @@ wxService.page({ ...@@ -22,32 +22,32 @@ wxService.page({
onShow(){ onShow(){
}, },
onLoad: function () { onLoad: function () {
if (app.globalData.userInfo) { // if (app.globalData.userInfo) {
this.setData({ // this.setData({
userInfo: app.globalData.userInfo, // userInfo: app.globalData.userInfo,
hasUserInfo: true // hasUserInfo: true
}) // })
} else if (this.data.canIUse){ // } else if (this.data.canIUse){
// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回 // // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况 // // 所以此处加入 callback 以防止这种情况
app.userInfoReadyCallback = res => { // app.userInfoReadyCallback = res => {
this.setData({ // this.setData({
userInfo: res.userInfo, // userInfo: res.userInfo,
hasUserInfo: true // hasUserInfo: true
}) // })
} // }
} else { // } else {
// 在没有 open-type=getUserInfo 版本的兼容处理 // // 在没有 open-type=getUserInfo 版本的兼容处理
wx.getUserInfo({ // wx.getUserInfo({
success: res => { // success: res => {
app.globalData.userInfo = res.userInfo // app.globalData.userInfo = res.userInfo
this.setData({ // this.setData({
userInfo: res.userInfo, // userInfo: res.userInfo,
hasUserInfo: true // hasUserInfo: true
}) // })
} // }
}) // })
} // }
}, },
getAuth(){ getAuth(){
......
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