Initial commit
This commit is contained in:
yulixing
commit
1ecf63a46c
18
.babelrc
Normal file
18
.babelrc
Normal file
@ -0,0 +1,18 @@
|
||||
{
|
||||
"presets": [
|
||||
["env", {
|
||||
"modules": false,
|
||||
"targets": {
|
||||
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
|
||||
}
|
||||
}],
|
||||
"stage-2"
|
||||
],
|
||||
"plugins": ["transform-runtime"],
|
||||
"env": {
|
||||
"test": {
|
||||
"presets": ["env", "stage-2"],
|
||||
"plugins": ["istanbul"]
|
||||
}
|
||||
}
|
||||
}
|
||||
9
.editorconfig
Normal file
9
.editorconfig
Normal file
@ -0,0 +1,9 @@
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
13
.gitignore
vendored
Normal file
13
.gitignore
vendored
Normal file
@ -0,0 +1,13 @@
|
||||
.DS_Store
|
||||
node_modules/
|
||||
dist/
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
7
.postcssrc.js
Normal file
7
.postcssrc.js
Normal file
@ -0,0 +1,7 @@
|
||||
// https://github.com/michael-ciniawsky/postcss-load-config
|
||||
|
||||
module.exports = {
|
||||
"plugins": {
|
||||
"postcss-mpvue-wxss": {}
|
||||
}
|
||||
}
|
||||
37
README.md
Normal file
37
README.md
Normal file
@ -0,0 +1,37 @@
|
||||
# maker
|
||||
|
||||
> A Mpvue project
|
||||
|
||||
## Build Setup
|
||||
|
||||
``` bash
|
||||
# 初始化项目
|
||||
vue init mpvue/mpvue-quickstart myproject
|
||||
cd myproject
|
||||
|
||||
# 安装依赖
|
||||
yarn
|
||||
|
||||
# 开发时构建
|
||||
npm dev
|
||||
|
||||
# 打包构建
|
||||
npm build
|
||||
|
||||
# 指定平台的开发时构建(微信、百度、头条、支付宝)
|
||||
npm dev:wx
|
||||
npm dev:swan
|
||||
npm dev:tt
|
||||
npm dev:my
|
||||
|
||||
# 指定平台的打包构建
|
||||
npm build:wx
|
||||
npm build:swan
|
||||
npm build:tt
|
||||
npm build:my
|
||||
|
||||
# 生成 bundle 分析报告
|
||||
npm run build --report
|
||||
```
|
||||
|
||||
For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
|
||||
45
build/build.js
Normal file
45
build/build.js
Normal file
@ -0,0 +1,45 @@
|
||||
require('./check-versions')()
|
||||
|
||||
process.env.NODE_ENV = 'production'
|
||||
process.env.PLATFORM = process.argv[process.argv.length - 1] || 'wx'
|
||||
|
||||
var ora = require('ora')
|
||||
var rm = require('rimraf')
|
||||
var path = require('path')
|
||||
var chalk = require('chalk')
|
||||
var webpack = require('webpack')
|
||||
var config = require('../config')
|
||||
var webpackConfig = require('./webpack.prod.conf')
|
||||
var utils = require('./utils')
|
||||
|
||||
var spinner = ora('building for production...')
|
||||
spinner.start()
|
||||
|
||||
rm(path.join(config.build.assetsRoot, '*'), err => {
|
||||
if (err) throw err
|
||||
webpack(webpackConfig, function (err, stats) {
|
||||
spinner.stop()
|
||||
if (err) throw err
|
||||
if (process.env.PLATFORM === 'swan') {
|
||||
utils.writeFrameworkinfo()
|
||||
}
|
||||
process.stdout.write(stats.toString({
|
||||
colors: true,
|
||||
modules: false,
|
||||
children: false,
|
||||
chunks: false,
|
||||
chunkModules: false
|
||||
}) + '\n\n')
|
||||
|
||||
if (stats.hasErrors()) {
|
||||
console.log(chalk.red(' Build failed with errors.\n'))
|
||||
process.exit(1)
|
||||
}
|
||||
|
||||
console.log(chalk.cyan(' Build complete.\n'))
|
||||
console.log(chalk.yellow(
|
||||
' Tip: built files are meant to be served over an HTTP server.\n' +
|
||||
' Opening index.html over file:// won\'t work.\n'
|
||||
))
|
||||
})
|
||||
})
|
||||
48
build/check-versions.js
Normal file
48
build/check-versions.js
Normal file
@ -0,0 +1,48 @@
|
||||
var chalk = require('chalk')
|
||||
var semver = require('semver')
|
||||
var packageConfig = require('../package.json')
|
||||
var shell = require('shelljs')
|
||||
function exec (cmd) {
|
||||
return require('child_process').execSync(cmd).toString().trim()
|
||||
}
|
||||
|
||||
var versionRequirements = [
|
||||
{
|
||||
name: 'node',
|
||||
currentVersion: semver.clean(process.version),
|
||||
versionRequirement: packageConfig.engines.node
|
||||
}
|
||||
]
|
||||
|
||||
if (shell.which('npm')) {
|
||||
versionRequirements.push({
|
||||
name: 'npm',
|
||||
currentVersion: exec('npm --version'),
|
||||
versionRequirement: packageConfig.engines.npm
|
||||
})
|
||||
}
|
||||
|
||||
module.exports = function () {
|
||||
var warnings = []
|
||||
for (var i = 0; i < versionRequirements.length; i++) {
|
||||
var mod = versionRequirements[i]
|
||||
if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
|
||||
warnings.push(mod.name + ': ' +
|
||||
chalk.red(mod.currentVersion) + ' should be ' +
|
||||
chalk.green(mod.versionRequirement)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
if (warnings.length) {
|
||||
console.log('')
|
||||
console.log(chalk.yellow('To use this template, you must update following to modules:'))
|
||||
console.log()
|
||||
for (var i = 0; i < warnings.length; i++) {
|
||||
var warning = warnings[i]
|
||||
console.log(' ' + warning)
|
||||
}
|
||||
console.log()
|
||||
process.exit(1)
|
||||
}
|
||||
}
|
||||
9
build/dev-client.js
Normal file
9
build/dev-client.js
Normal file
@ -0,0 +1,9 @@
|
||||
/* eslint-disable */
|
||||
require('eventsource-polyfill')
|
||||
var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
|
||||
|
||||
hotClient.subscribe(function (event) {
|
||||
if (event.action === 'reload') {
|
||||
window.location.reload()
|
||||
}
|
||||
})
|
||||
111
build/dev-server.js
Normal file
111
build/dev-server.js
Normal file
@ -0,0 +1,111 @@
|
||||
require('./check-versions')()
|
||||
|
||||
process.env.PLATFORM = process.argv[process.argv.length - 1] || 'wx'
|
||||
var config = require('../config')
|
||||
if (!process.env.NODE_ENV) {
|
||||
process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
|
||||
}
|
||||
|
||||
// var opn = require('opn')
|
||||
var path = require('path')
|
||||
var express = require('express')
|
||||
var webpack = require('webpack')
|
||||
var proxyMiddleware = require('http-proxy-middleware')
|
||||
var portfinder = require('portfinder')
|
||||
var webpackConfig = require('./webpack.dev.conf')
|
||||
var utils = require('./utils')
|
||||
|
||||
// default port where dev server listens for incoming traffic
|
||||
var port = process.env.PORT || config.dev.port
|
||||
// automatically open browser, if not set will be false
|
||||
var autoOpenBrowser = !!config.dev.autoOpenBrowser
|
||||
// Define HTTP proxies to your custom API backend
|
||||
// https://github.com/chimurai/http-proxy-middleware
|
||||
var proxyTable = config.dev.proxyTable
|
||||
|
||||
var app = express()
|
||||
var compiler = webpack(webpackConfig)
|
||||
if (process.env.PLATFORM === 'swan') {
|
||||
utils.writeFrameworkinfo()
|
||||
}
|
||||
|
||||
// var devMiddleware = require('webpack-dev-middleware')(compiler, {
|
||||
// publicPath: webpackConfig.output.publicPath,
|
||||
// quiet: true
|
||||
// })
|
||||
|
||||
// var hotMiddleware = require('webpack-hot-middleware')(compiler, {
|
||||
// log: false,
|
||||
// heartbeat: 2000
|
||||
// })
|
||||
// force page reload when html-webpack-plugin template changes
|
||||
// compiler.plugin('compilation', function (compilation) {
|
||||
// compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
|
||||
// hotMiddleware.publish({ action: 'reload' })
|
||||
// cb()
|
||||
// })
|
||||
// })
|
||||
|
||||
// proxy api requests
|
||||
Object.keys(proxyTable).forEach(function (context) {
|
||||
var options = proxyTable[context]
|
||||
if (typeof options === 'string') {
|
||||
options = { target: options }
|
||||
}
|
||||
app.use(proxyMiddleware(options.filter || context, options))
|
||||
})
|
||||
|
||||
// handle fallback for HTML5 history API
|
||||
app.use(require('connect-history-api-fallback')())
|
||||
|
||||
// serve webpack bundle output
|
||||
// app.use(devMiddleware)
|
||||
|
||||
// enable hot-reload and state-preserving
|
||||
// compilation error display
|
||||
// app.use(hotMiddleware)
|
||||
|
||||
// serve pure static assets
|
||||
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
|
||||
app.use(staticPath, express.static('./static'))
|
||||
|
||||
// var uri = 'http://localhost:' + port
|
||||
|
||||
var _resolve
|
||||
var readyPromise = new Promise(resolve => {
|
||||
_resolve = resolve
|
||||
})
|
||||
|
||||
// console.log('> Starting dev server...')
|
||||
// devMiddleware.waitUntilValid(() => {
|
||||
// console.log('> Listening at ' + uri + '\n')
|
||||
// // when env is testing, don't need open it
|
||||
// if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
|
||||
// opn(uri)
|
||||
// }
|
||||
// _resolve()
|
||||
// })
|
||||
|
||||
module.exports = new Promise((resolve, reject) => {
|
||||
portfinder.basePort = port
|
||||
portfinder.getPortPromise()
|
||||
.then(newPort => {
|
||||
if (port !== newPort) {
|
||||
console.log(`${port}端口被占用，开启新端口${newPort}`)
|
||||
}
|
||||
var server = app.listen(newPort, 'localhost')
|
||||
// for 小程序的文件保存机制
|
||||
require('webpack-dev-middleware-hard-disk')(compiler, {
|
||||
publicPath: webpackConfig.output.publicPath,
|
||||
quiet: true
|
||||
})
|
||||
resolve({
|
||||
ready: readyPromise,
|
||||
close: () => {
|
||||
server.close()
|
||||
}
|
||||
})
|
||||
}).catch(error => {
|
||||
console.log('没有找到空闲端口，请打开任务管理器杀死进程端口再试', error)
|
||||
})
|
||||
})
|
||||
117
build/utils.js
Normal file
117
build/utils.js
Normal file
@ -0,0 +1,117 @@
|
||||
var path = require('path')
|
||||
var fs = require('fs')
|
||||
var config = require('../config')
|
||||
var ExtractTextPlugin = require('extract-text-webpack-plugin')
|
||||
var mpvueInfo = require('../node_modules/mpvue/package.json')
|
||||
var packageInfo = require('../package.json')
|
||||
var mkdirp = require('mkdirp')
|
||||
|
||||
exports.assetsPath = function (_path) {
|
||||
var assetsSubDirectory = process.env.NODE_ENV === 'production'
|
||||
? config.build.assetsSubDirectory
|
||||
: config.dev.assetsSubDirectory
|
||||
return path.posix.join(assetsSubDirectory, _path)
|
||||
}
|
||||
|
||||
exports.cssLoaders = function (options) {
|
||||
options = options || {}
|
||||
|
||||
var cssLoader = {
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
minimize: process.env.NODE_ENV === 'production',
|
||||
sourceMap: options.sourceMap
|
||||
}
|
||||
}
|
||||
|
||||
var postcssLoader = {
|
||||
loader: 'postcss-loader',
|
||||
options: {
|
||||
sourceMap: true
|
||||
}
|
||||
}
|
||||
|
||||
var px2rpxLoader = {
|
||||
loader: 'px2rpx-loader',
|
||||
options: {
|
||||
baseDpr: 1,
|
||||
rpxUnit: 0.5
|
||||
}
|
||||
}
|
||||
|
||||
// generate loader string to be used with extract text plugin
|
||||
function generateLoaders (loader, loaderOptions) {
|
||||
var loaders = [cssLoader, px2rpxLoader, postcssLoader]
|
||||
if (loader) {
|
||||
loaders.push({
|
||||
loader: loader + '-loader',
|
||||
options: Object.assign({}, loaderOptions, {
|
||||
sourceMap: options.sourceMap
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// Extract CSS when that option is specified
|
||||
// (which is the case during production build)
|
||||
if (options.extract) {
|
||||
return ExtractTextPlugin.extract({
|
||||
use: loaders,
|
||||
fallback: 'vue-style-loader'
|
||||
})
|
||||
} else {
|
||||
return ['vue-style-loader'].concat(loaders)
|
||||
}
|
||||
}
|
||||
|
||||
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
|
||||
return {
|
||||
css: generateLoaders(),
|
||||
wxss: generateLoaders(),
|
||||
postcss: generateLoaders(),
|
||||
less: generateLoaders('less'),
|
||||
sass: generateLoaders('sass', { indentedSyntax: true }),
|
||||
scss: generateLoaders('sass'),
|
||||
stylus: generateLoaders('stylus'),
|
||||
styl: generateLoaders('stylus')
|
||||
}
|
||||
}
|
||||
|
||||
// Generate loaders for standalone style files (outside of .vue)
|
||||
exports.styleLoaders = function (options) {
|
||||
var output = []
|
||||
var loaders = exports.cssLoaders(options)
|
||||
for (var extension in loaders) {
|
||||
var loader = loaders[extension]
|
||||
output.push({
|
||||
test: new RegExp('\\.' + extension + '$'),
|
||||
use: loader
|
||||
})
|
||||
}
|
||||
return output
|
||||
}
|
||||
|
||||
const writeFile = async (filePath, content) => {
|
||||
let dir = path.dirname(filePath)
|
||||
let exist = fs.existsSync(dir)
|
||||
if (!exist) {
|
||||
await mkdirp(dir)
|
||||
}
|
||||
await fs.writeFileSync(filePath, content, 'utf8')
|
||||
}
|
||||
|
||||
exports.writeFrameworkinfo = function () {
|
||||
var buildInfo = {
|
||||
'toolName': mpvueInfo.name,
|
||||
'toolFrameWorkVersion': mpvueInfo.version,
|
||||
'toolCliVersion': packageInfo.mpvueTemplateProjectVersion || '',
|
||||
'createTime': Date.now()
|
||||
}
|
||||
|
||||
var content = JSON.stringify(buildInfo)
|
||||
var fileName = '.frameworkinfo'
|
||||
var rootDir = path.resolve(__dirname, `../${fileName}`)
|
||||
var distDir = path.resolve(config.build.assetsRoot, `./${fileName}`)
|
||||
|
||||
writeFile(rootDir, content)
|
||||
writeFile(distDir, content)
|
||||
}
|
||||
21
build/vue-loader.conf.js
Normal file
21
build/vue-loader.conf.js
Normal file
@ -0,0 +1,21 @@
|
||||
var utils = require('./utils')
|
||||
var config = require('../config')
|
||||
// var isProduction = process.env.NODE_ENV === 'production'
|
||||
// for mp
|
||||
var isProduction = true
|
||||
|
||||
module.exports = {
|
||||
loaders: utils.cssLoaders({
|
||||
sourceMap: isProduction
|
||||
? config.build.productionSourceMap
|
||||
: config.dev.cssSourceMap,
|
||||
extract: isProduction
|
||||
}),
|
||||
transformToRequire: {
|
||||
video: 'src',
|
||||
source: 'src',
|
||||
img: 'src',
|
||||
image: 'xlink:href'
|
||||
},
|
||||
fileExt: config.build.fileExt
|
||||
}
|
||||
145
build/webpack.base.conf.js
Normal file
145
build/webpack.base.conf.js
Normal file
@ -0,0 +1,145 @@
|
||||
var path = require('path')
|
||||
var fs = require('fs')
|
||||
var utils = require('./utils')
|
||||
var config = require('../config')
|
||||
var webpack = require('webpack')
|
||||
var merge = require('webpack-merge')
|
||||
var vueLoaderConfig = require('./vue-loader.conf')
|
||||
var MpvuePlugin = require('webpack-mpvue-asset-plugin')
|
||||
var glob = require('glob')
|
||||
var CopyWebpackPlugin = require('copy-webpack-plugin')
|
||||
var relative = require('relative')
|
||||
|
||||
function resolve(dir) {
|
||||
return path.join(__dirname, '..', dir)
|
||||
}
|
||||
|
||||
function getEntry(rootSrc) {
|
||||
var map = {};
|
||||
glob.sync(rootSrc + '/pages/**/main.js')
|
||||
.forEach(file => {
|
||||
var key = relative(rootSrc, file).replace('.js', '');
|
||||
map[key] = file;
|
||||
})
|
||||
return map;
|
||||
}
|
||||
|
||||
const appEntry = { app: resolve('./src/main.js') }
|
||||
const pagesEntry = getEntry(resolve('./src'), 'pages/**/main.js')
|
||||
const entry = Object.assign({}, appEntry, pagesEntry)
|
||||
|
||||
let baseWebpackConfig = {
|
||||
// 如果要自定义生成的 dist 目录里面的文件路径，
|
||||
// 可以将 entry 写成 {'toPath': 'fromPath'} 的形式，
|
||||
// toPath 为相对于 dist 的路径, 例：index/demo，则生成的文件地址为 dist/index/demo.js
|
||||
entry,
|
||||
target: require('mpvue-webpack-target'),
|
||||
output: {
|
||||
path: config.build.assetsRoot,
|
||||
jsonpFunction: 'webpackJsonpMpvue',
|
||||
filename: '[name].js',
|
||||
publicPath: process.env.NODE_ENV === 'production'
|
||||
? config.build.assetsPublicPath
|
||||
: config.dev.assetsPublicPath
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['.js', '.vue', '.json'],
|
||||
alias: {
|
||||
'vue': 'mpvue',
|
||||
'@': resolve('src')
|
||||
},
|
||||
symlinks: false,
|
||||
aliasFields: ['mpvue', 'weapp', 'browser'],
|
||||
mainFields: ['browser', 'module', 'main']
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.vue$/,
|
||||
loader: 'mpvue-loader',
|
||||
options: vueLoaderConfig
|
||||
},
|
||||
{
|
||||
test: /\.js$/,
|
||||
include: [resolve('src'), resolve('test')],
|
||||
use: [
|
||||
'babel-loader',
|
||||
{
|
||||
loader: 'mpvue-loader',
|
||||
options: Object.assign({ checkMPEntry: true }, vueLoaderConfig)
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
|
||||
loader: 'url-loader',
|
||||
options: {
|
||||
limit: 10000,
|
||||
name: utils.assetsPath('img/[name].[ext]')
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
|
||||
loader: 'url-loader',
|
||||
options: {
|
||||
limit: 10000,
|
||||
name: utils.assetsPath('media/[name].[ext]')
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
|
||||
loader: 'url-loader',
|
||||
options: {
|
||||
limit: 10000,
|
||||
name: utils.assetsPath('fonts/[name].[ext]')
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /.less$/, loader: "style-loader!css-loader!less-loader",
|
||||
}
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
// api 统一桥协议方案
|
||||
new webpack.DefinePlugin({
|
||||
'mpvue': 'global.mpvue',
|
||||
'mpvuePlatform': 'global.mpvuePlatform'
|
||||
}),
|
||||
new MpvuePlugin(),
|
||||
new CopyWebpackPlugin([{
|
||||
from: '**/*.json',
|
||||
to: ''
|
||||
}], {
|
||||
context: 'src/'
|
||||
}),
|
||||
new CopyWebpackPlugin([
|
||||
{
|
||||
from: path.resolve(__dirname, '../static'),
|
||||
to: path.resolve(config.build.assetsRoot, './static'),
|
||||
ignore: ['.*']
|
||||
}
|
||||
])
|
||||
]
|
||||
}
|
||||
|
||||
// 针对百度小程序，由于不支持通过 miniprogramRoot 进行自定义构建完的文件的根路径
|
||||
// 所以需要将项目根路径下面的 project.swan.json 拷贝到构建目录
|
||||
// 然后百度开发者工具将 dist/swan 作为项目根目录打
|
||||
const projectConfigMap = {
|
||||
tt: '../project.config.json',
|
||||
swan: '../project.swan.json'
|
||||
}
|
||||
|
||||
const PLATFORM = process.env.PLATFORM
|
||||
if (/^(swan)|(tt)$/.test(PLATFORM)) {
|
||||
baseWebpackConfig = merge(baseWebpackConfig, {
|
||||
plugins: [
|
||||
new CopyWebpackPlugin([{
|
||||
from: path.resolve(__dirname, projectConfigMap[PLATFORM]),
|
||||
to: path.resolve(config.build.assetsRoot)
|
||||
}])
|
||||
]
|
||||
})
|
||||
}
|
||||
|
||||
module.exports = baseWebpackConfig
|
||||
85
build/webpack.dev.conf.js
Normal file
85
build/webpack.dev.conf.js
Normal file
@ -0,0 +1,85 @@
|
||||
var utils = require('./utils')
|
||||
var webpack = require('webpack')
|
||||
var config = require('../config')
|
||||
var merge = require('webpack-merge')
|
||||
var baseWebpackConfig = require('./webpack.base.conf')
|
||||
// var HtmlWebpackPlugin = require('html-webpack-plugin')
|
||||
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
|
||||
var MpvueVendorPlugin = require('webpack-mpvue-vendor-plugin')
|
||||
|
||||
// copy from ./webpack.prod.conf.js
|
||||
var path = require('path')
|
||||
var ExtractTextPlugin = require('extract-text-webpack-plugin')
|
||||
var CopyWebpackPlugin = require('copy-webpack-plugin')
|
||||
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
|
||||
|
||||
// add hot-reload related code to entry chunks
|
||||
// Object.keys(baseWebpackConfig.entry).forEach(function (name) {
|
||||
// baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
|
||||
// })
|
||||
|
||||
module.exports = merge(baseWebpackConfig, {
|
||||
module: {
|
||||
rules: utils.styleLoaders({
|
||||
sourceMap: config.dev.cssSourceMap,
|
||||
extract: true
|
||||
})
|
||||
},
|
||||
// cheap-module-eval-source-map is faster for development
|
||||
// devtool: '#cheap-module-eval-source-map',
|
||||
// devtool: '#source-map',
|
||||
output: {
|
||||
path: config.build.assetsRoot,
|
||||
// filename: utils.assetsPath('[name].[chunkhash].js'),
|
||||
// chunkFilename: utils.assetsPath('[id].[chunkhash].js')
|
||||
filename: utils.assetsPath('[name].js'),
|
||||
chunkFilename: utils.assetsPath('[id].js')
|
||||
},
|
||||
plugins: [
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': config.dev.env
|
||||
}),
|
||||
|
||||
// copy from ./webpack.prod.conf.js
|
||||
// extract css into its own file
|
||||
new ExtractTextPlugin({
|
||||
// filename: utils.assetsPath('[name].[contenthash].css')
|
||||
filename: utils.assetsPath(`[name].${config.dev.fileExt.style}`)
|
||||
}),
|
||||
// Compress extracted CSS. We are using this plugin so that possible
|
||||
// duplicated CSS from different components can be deduped.
|
||||
new OptimizeCSSPlugin({
|
||||
cssProcessorOptions: {
|
||||
safe: true
|
||||
}
|
||||
}),
|
||||
new webpack.optimize.CommonsChunkPlugin({
|
||||
name: 'common/vendor',
|
||||
minChunks: function (module, count) {
|
||||
// any required modules inside node_modules are extracted to vendor
|
||||
return (
|
||||
module.resource &&
|
||||
/\.js$/.test(module.resource) &&
|
||||
module.resource.indexOf('node_modules') >= 0
|
||||
) || count > 1
|
||||
}
|
||||
}),
|
||||
new webpack.optimize.CommonsChunkPlugin({
|
||||
name: 'common/manifest',
|
||||
chunks: ['common/vendor']
|
||||
}),
|
||||
new MpvueVendorPlugin({
|
||||
platform: process.env.PLATFORM
|
||||
}),
|
||||
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
|
||||
// new webpack.HotModuleReplacementPlugin(),
|
||||
new webpack.NoEmitOnErrorsPlugin(),
|
||||
// https://github.com/ampedandwired/html-webpack-plugin
|
||||
// new HtmlWebpackPlugin({
|
||||
// filename: 'index.html',
|
||||
// template: 'index.html',
|
||||
// inject: true
|
||||
// }),
|
||||
new FriendlyErrorsPlugin()
|
||||
]
|
||||
})
|
||||
120
build/webpack.prod.conf.js
Normal file
120
build/webpack.prod.conf.js
Normal file
@ -0,0 +1,120 @@
|
||||
var path = require('path')
|
||||
var utils = require('./utils')
|
||||
var webpack = require('webpack')
|
||||
var config = require('../config')
|
||||
var merge = require('webpack-merge')
|
||||
var baseWebpackConfig = require('./webpack.base.conf')
|
||||
var UglifyJsPlugin = require('uglifyjs-webpack-plugin')
|
||||
var CopyWebpackPlugin = require('copy-webpack-plugin')
|
||||
// var HtmlWebpackPlugin = require('html-webpack-plugin')
|
||||
var ExtractTextPlugin = require('extract-text-webpack-plugin')
|
||||
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
|
||||
var MpvueVendorPlugin = require('webpack-mpvue-vendor-plugin')
|
||||
var env = config.build.env
|
||||
|
||||
var webpackConfig = merge(baseWebpackConfig, {
|
||||
module: {
|
||||
rules: utils.styleLoaders({
|
||||
sourceMap: config.build.productionSourceMap,
|
||||
extract: true
|
||||
})
|
||||
},
|
||||
devtool: config.build.productionSourceMap ? '#source-map' : false,
|
||||
output: {
|
||||
path: config.build.assetsRoot,
|
||||
// filename: utils.assetsPath('[name].[chunkhash].js'),
|
||||
// chunkFilename: utils.assetsPath('[id].[chunkhash].js')
|
||||
filename: utils.assetsPath('[name].js'),
|
||||
chunkFilename: utils.assetsPath('[id].js')
|
||||
},
|
||||
plugins: [
|
||||
// http://vuejs.github.io/vue-loader/en/workflow/production.html
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': env
|
||||
}),
|
||||
// extract css into its own file
|
||||
new ExtractTextPlugin({
|
||||
// filename: utils.assetsPath('[name].[contenthash].css')
|
||||
filename: utils.assetsPath(`[name].${config.build.fileExt.style}`)
|
||||
}),
|
||||
// Compress extracted CSS. We are using this plugin so that possible
|
||||
// duplicated CSS from different components can be deduped.
|
||||
new OptimizeCSSPlugin({
|
||||
cssProcessorOptions: {
|
||||
safe: true
|
||||
}
|
||||
}),
|
||||
// generate dist index.html with correct asset hash for caching.
|
||||
// you can customize output by editing /index.html
|
||||
// see https://github.com/ampedandwired/html-webpack-plugin
|
||||
// new HtmlWebpackPlugin({
|
||||
// filename: config.build.index,
|
||||
// template: 'index.html',
|
||||
// inject: true,
|
||||
// minify: {
|
||||
// removeComments: true,
|
||||
// collapseWhitespace: true,
|
||||
// removeAttributeQuotes: true
|
||||
// // more options:
|
||||
// // https://github.com/kangax/html-minifier#options-quick-reference
|
||||
// },
|
||||
// // necessary to consistently work with multiple chunks via CommonsChunkPlugin
|
||||
// chunksSortMode: 'dependency'
|
||||
// }),
|
||||
// keep module.id stable when vender modules does not change
|
||||
new webpack.HashedModuleIdsPlugin(),
|
||||
// split vendor js into its own file
|
||||
new webpack.optimize.CommonsChunkPlugin({
|
||||
name: 'common/vendor',
|
||||
minChunks: function (module, count) {
|
||||
// any required modules inside node_modules are extracted to vendor
|
||||
return (
|
||||
module.resource &&
|
||||
/\.js$/.test(module.resource) &&
|
||||
module.resource.indexOf('node_modules') >= 0
|
||||
) || count > 1
|
||||
}
|
||||
}),
|
||||
// extract webpack runtime and module manifest to its own file in order to
|
||||
// prevent vendor hash from being updated whenever app bundle is updated
|
||||
new webpack.optimize.CommonsChunkPlugin({
|
||||
name: 'common/manifest',
|
||||
chunks: ['common/vendor']
|
||||
}),
|
||||
new MpvueVendorPlugin({
|
||||
platform: process.env.PLATFORM
|
||||
})
|
||||
]
|
||||
})
|
||||
|
||||
// if (config.build.productionGzip) {
|
||||
// var CompressionWebpackPlugin = require('compression-webpack-plugin')
|
||||
|
||||
// webpackConfig.plugins.push(
|
||||
// new CompressionWebpackPlugin({
|
||||
// asset: '[path].gz[query]',
|
||||
// algorithm: 'gzip',
|
||||
// test: new RegExp(
|
||||
// '\\.(' +
|
||||
// config.build.productionGzipExtensions.join('|') +
|
||||
// ')$'
|
||||
// ),
|
||||
// threshold: 10240,
|
||||
// minRatio: 0.8
|
||||
// })
|
||||
// )
|
||||
// }
|
||||
|
||||
if (config.build.bundleAnalyzerReport) {
|
||||
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
|
||||
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
|
||||
}
|
||||
|
||||
var useUglifyJs = process.env.PLATFORM !== 'swan'
|
||||
if (useUglifyJs) {
|
||||
webpackConfig.plugins.push(new UglifyJsPlugin({
|
||||
sourceMap: true
|
||||
}))
|
||||
}
|
||||
|
||||
module.exports = webpackConfig
|
||||
6
config/dev.env.js
Normal file
6
config/dev.env.js
Normal file
@ -0,0 +1,6 @@
|
||||
var merge = require('webpack-merge')
|
||||
var prodEnv = require('./prod.env')
|
||||
|
||||
module.exports = merge(prodEnv, {
|
||||
NODE_ENV: '"development"'
|
||||
})
|
||||
68
config/index.js
Normal file
68
config/index.js
Normal file
@ -0,0 +1,68 @@
|
||||
// see http://vuejs-templates.github.io/webpack for documentation.
|
||||
var path = require('path')
|
||||
var fileExtConfig = {
|
||||
swan: {
|
||||
template: 'swan',
|
||||
script: 'js',
|
||||
style: 'css',
|
||||
platform: 'swan'
|
||||
},
|
||||
tt: {
|
||||
template: 'ttml',
|
||||
script: 'js',
|
||||
style: 'ttss',
|
||||
platform: 'tt'
|
||||
},
|
||||
wx: {
|
||||
template: 'wxml',
|
||||
script: 'js',
|
||||
style: 'wxss',
|
||||
platform: 'wx'
|
||||
},
|
||||
my: {
|
||||
template: 'axml',
|
||||
script: 'js',
|
||||
style: 'acss',
|
||||
platform: 'my'
|
||||
}
|
||||
}
|
||||
var fileExt = fileExtConfig[process.env.PLATFORM]
|
||||
|
||||
module.exports = {
|
||||
build: {
|
||||
env: require('./prod.env'),
|
||||
index: path.resolve(__dirname, `../dist/${fileExt.platform}/index.html`),
|
||||
assetsRoot: path.resolve(__dirname, `../dist/${fileExt.platform}`),
|
||||
assetsSubDirectory: '',
|
||||
assetsPublicPath: '/',
|
||||
productionSourceMap: false,
|
||||
// Gzip off by default as many popular static hosts such as
|
||||
// Surge or Netlify already gzip all static assets for you.
|
||||
// Before setting to `true`, make sure to:
|
||||
// npm install --save-dev compression-webpack-plugin
|
||||
productionGzip: false,
|
||||
productionGzipExtensions: ['js', 'css'],
|
||||
// Run the build command with an extra argument to
|
||||
// View the bundle analyzer report after build finishes:
|
||||
// `npm run build --report`
|
||||
// Set to `true` or `false` to always turn it on or off
|
||||
bundleAnalyzerReport: process.env.npm_config_report,
|
||||
fileExt: fileExt
|
||||
},
|
||||
dev: {
|
||||
env: require('./dev.env'),
|
||||
port: 8080,
|
||||
// 在小程序开发者工具中不需要自动打开浏览器
|
||||
autoOpenBrowser: false,
|
||||
assetsSubDirectory: '',
|
||||
assetsPublicPath: '/',
|
||||
proxyTable: {},
|
||||
// CSS Sourcemaps off by default because relative paths are "buggy"
|
||||
// with this option, according to the CSS-Loader README
|
||||
// (https://github.com/webpack/css-loader#sourcemaps)
|
||||
// In our experience, they generally work as expected,
|
||||
// just be aware of this issue when enabling this option.
|
||||
cssSourceMap: false,
|
||||
fileExt: fileExt
|
||||
}
|
||||
}
|
||||
3
config/prod.env.js
Normal file
3
config/prod.env.js
Normal file
@ -0,0 +1,3 @@
|
||||
module.exports = {
|
||||
NODE_ENV: '"production"'
|
||||
}
|
||||
11
index.html
Normal file
11
index.html
Normal file
@ -0,0 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>maker</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
10141
package-lock.json
generated
Normal file
10141
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
85
package.json
Normal file
85
package.json
Normal file
@ -0,0 +1,85 @@
|
||||
{
|
||||
"name": "maker",
|
||||
"version": "1.0.0",
|
||||
"mpvueTemplateProjectVersion": "0.1.0",
|
||||
"description": "A Mpvue project",
|
||||
"author": "yulixing <yulixing@kingsome.cn>",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev:wx": "node build/dev-server.js wx",
|
||||
"start:wx": "npm run dev:wx",
|
||||
"build:wx": "node build/build.js wx",
|
||||
"dev:swan": "node build/dev-server.js swan",
|
||||
"start:swan": "npm run dev:swan",
|
||||
"build:swan": "node build/build.js swan",
|
||||
"dev:tt": "node build/dev-server.js tt",
|
||||
"start:tt": "npm run dev:tt",
|
||||
"build:tt": "node build/build.js tt",
|
||||
"dev:my": "node build/dev-server.js my",
|
||||
"start:my": "npm run dev:my",
|
||||
"build:my": "node build/build.js my",
|
||||
"dev": "node build/dev-server.js wx",
|
||||
"start": "npm run dev",
|
||||
"build": "node build/build.js wx"
|
||||
},
|
||||
"dependencies": {
|
||||
"mpvue": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-core": "^6.22.1",
|
||||
"babel-loader": "^7.1.1",
|
||||
"babel-plugin-transform-runtime": "^6.22.0",
|
||||
"babel-preset-env": "^1.3.2",
|
||||
"babel-preset-stage-2": "^6.22.0",
|
||||
"babel-register": "^6.22.0",
|
||||
"chalk": "^2.4.0",
|
||||
"connect-history-api-fallback": "^1.3.0",
|
||||
"copy-webpack-plugin": "^4.5.1",
|
||||
"css-loader": "^0.28.11",
|
||||
"cssnano": "^3.10.0",
|
||||
"eventsource-polyfill": "^0.9.6",
|
||||
"express": "^4.16.3",
|
||||
"extract-text-webpack-plugin": "^3.0.2",
|
||||
"file-loader": "^1.1.11",
|
||||
"friendly-errors-webpack-plugin": "^1.7.0",
|
||||
"glob": "^7.1.2",
|
||||
"html-webpack-plugin": "^3.2.0",
|
||||
"http-proxy-middleware": "^0.18.0",
|
||||
"less": "^3.10.3",
|
||||
"less-loader": "^5.0.0",
|
||||
"mkdirp": "^0.5.1",
|
||||
"mpvue-loader": "^2.0.0",
|
||||
"mpvue-template-compiler": "^2.0.0",
|
||||
"mpvue-webpack-target": "^1.0.3",
|
||||
"optimize-css-assets-webpack-plugin": "^3.2.0",
|
||||
"ora": "^2.0.0",
|
||||
"portfinder": "^1.0.13",
|
||||
"postcss-loader": "^2.1.4",
|
||||
"postcss-mpvue-wxss": "^1.0.0",
|
||||
"prettier": "~1.12.1",
|
||||
"px2rpx-loader": "^0.1.10",
|
||||
"relative": "^3.0.2",
|
||||
"rimraf": "^2.6.0",
|
||||
"semver": "^5.3.0",
|
||||
"shelljs": "^0.8.1",
|
||||
"style-loader": "^1.0.0",
|
||||
"uglifyjs-webpack-plugin": "^1.2.5",
|
||||
"url-loader": "^1.0.1",
|
||||
"vue-style-loader": "^4.1.0",
|
||||
"webpack": "^3.11.0",
|
||||
"webpack-bundle-analyzer": "^2.2.1",
|
||||
"webpack-dev-middleware-hard-disk": "^1.12.0",
|
||||
"webpack-merge": "^4.1.0",
|
||||
"webpack-mpvue-asset-plugin": "^2.0.0",
|
||||
"webpack-mpvue-vendor-plugin": "^2.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 4.0.0",
|
||||
"npm": ">= 3.0.0"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not ie <= 8"
|
||||
]
|
||||
}
|
||||
12
package.swan.json
Normal file
12
package.swan.json
Normal file
@ -0,0 +1,12 @@
|
||||
{
|
||||
"appid": "touristappid",
|
||||
"setting": {
|
||||
"urlCheck": false
|
||||
},
|
||||
"condition": {
|
||||
"swan": {
|
||||
"current": -1,
|
||||
"list": []
|
||||
}
|
||||
}
|
||||
}
|
||||
73
project.config.json
Normal file
73
project.config.json
Normal file
@ -0,0 +1,73 @@
|
||||
{
|
||||
"description": "项目配置文件。",
|
||||
"setting": {
|
||||
"urlCheck": false,
|
||||
"es6": true,
|
||||
"postcss": true,
|
||||
"minified": true,
|
||||
"newFeature": true,
|
||||
"coverView": true,
|
||||
"autoAudits": false,
|
||||
"checkInvalidKey": true,
|
||||
"checkSiteMap": true,
|
||||
"uploadWithSourceMap": true,
|
||||
"babelSetting": {
|
||||
"ignore": [],
|
||||
"disablePlugins": [],
|
||||
"outputPath": ""
|
||||
}
|
||||
},
|
||||
"miniprogramRoot": "dist/wx/",
|
||||
"compileType": "miniprogram",
|
||||
"appid": "wx4d305a3b655ad75f",
|
||||
"projectname": "maker",
|
||||
"simulatorType": "wechat",
|
||||
"simulatorPluginLibVersion": {},
|
||||
"condition": {
|
||||
"search": {
|
||||
"current": -1,
|
||||
"list": []
|
||||
},
|
||||
"conversation": {
|
||||
"current": -1,
|
||||
"list": []
|
||||
},
|
||||
"plugin": {
|
||||
"current": -1,
|
||||
"list": []
|
||||
},
|
||||
"game": {
|
||||
"currentL": -1,
|
||||
"list": []
|
||||
},
|
||||
"gamePlugin": {
|
||||
"current": -1,
|
||||
"list": []
|
||||
},
|
||||
"miniprogram": {
|
||||
"current": -1,
|
||||
"list": [
|
||||
{
|
||||
"id": 0,
|
||||
"name": "答题页",
|
||||
"pathName": "pages/details/main",
|
||||
"query": "_id= 5dcbe979f8c239ef95aa9b40",
|
||||
"scene": null
|
||||
},
|
||||
{
|
||||
"id": -1,
|
||||
"name": "结果页",
|
||||
"pathName": "pages/result/main",
|
||||
"query": "",
|
||||
"scene": null
|
||||
},
|
||||
{
|
||||
"id": -1,
|
||||
"name": "首页",
|
||||
"pathName": "pages/index/main",
|
||||
"scene": null
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
12
project.swan.json
Normal file
12
project.swan.json
Normal file
@ -0,0 +1,12 @@
|
||||
{
|
||||
"appid": "testappid",
|
||||
"setting": {
|
||||
"urlCheck": false
|
||||
},
|
||||
"condition": {
|
||||
"swan": {
|
||||
"current": -1,
|
||||
"list": []
|
||||
}
|
||||
}
|
||||
}
|
||||
50
src/App.vue
Normal file
50
src/App.vue
Normal file
@ -0,0 +1,50 @@
|
||||
<script>
|
||||
export default {
|
||||
created () {
|
||||
// 调用API从本地缓存中获取数据
|
||||
/*
|
||||
* 平台 api 差异的处理方式: api 方法统一挂载到 mpvue 名称空间, 平台判断通过 mpvuePlatform 特征字符串
|
||||
* 微信：mpvue === wx, mpvuePlatform === 'wx'
|
||||
* 头条：mpvue === tt, mpvuePlatform === 'tt'
|
||||
* 百度：mpvue === swan, mpvuePlatform === 'swan'
|
||||
* 支付宝(蚂蚁)：mpvue === my, mpvuePlatform === 'my'
|
||||
*/
|
||||
|
||||
let logs
|
||||
if (mpvuePlatform === 'my') {
|
||||
logs = mpvue.getStorageSync({key: 'logs'}).data || []
|
||||
logs.unshift(Date.now())
|
||||
mpvue.setStorageSync({
|
||||
key: 'logs',
|
||||
data: logs
|
||||
})
|
||||
} else {
|
||||
logs = mpvue.getStorageSync('logs') || []
|
||||
logs.unshift(Date.now())
|
||||
mpvue.setStorageSync('logs', logs)
|
||||
}
|
||||
},
|
||||
log () {
|
||||
console.log(`log at:${Date.now()}`)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 200rpx 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/* this rule will be remove */
|
||||
* {
|
||||
transition: width 2s;
|
||||
-moz-transition: width 2s;
|
||||
-webkit-transition: width 2s;
|
||||
-o-transition: width 2s;
|
||||
}
|
||||
</style>
|
||||
9
src/app.json
Normal file
9
src/app.json
Normal file
@ -0,0 +1,9 @@
|
||||
{
|
||||
"pages": ["pages/details/main", "pages/result/main", "pages/index/main", "pages/logs/main"],
|
||||
"window": {
|
||||
"backgroundTextStyle": "light",
|
||||
"navigationBarBackgroundColor": "#fff",
|
||||
"navigationBarTitleText": "心理测试",
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
}
|
||||
19
src/components/card.vue
Normal file
19
src/components/card.vue
Normal file
@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<div>
|
||||
<p class="card">
|
||||
{{text}}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['text']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.card {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
12
src/components/list.vue
Normal file
12
src/components/list.vue
Normal file
@ -0,0 +1,12 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
3
src/config/index.js
Normal file
3
src/config/index.js
Normal file
@ -0,0 +1,3 @@
|
||||
export default {
|
||||
api: 'http://localhost:2333/api/open/test/text'
|
||||
}
|
||||
8
src/main.js
Normal file
8
src/main.js
Normal file
@ -0,0 +1,8 @@
|
||||
import Vue from 'vue'
|
||||
import App from './App'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
App.mpType = 'app'
|
||||
|
||||
const app = new Vue(App)
|
||||
app.$mount()
|
||||
133
src/pages/details/index.vue
Normal file
133
src/pages/details/index.vue
Normal file
@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<div class="p-details">
|
||||
<div class="title">{{temp.title}}</div>
|
||||
<div class="opts">
|
||||
<div
|
||||
:key="index"
|
||||
@click="next(item.goto)"
|
||||
class="opt"
|
||||
v-for="(item, index) in temp.opts"
|
||||
>{{item.text}}</div>
|
||||
</div>
|
||||
<div @click="viewResult" v-if="isFinished">查看结果</div>
|
||||
<!-- TODO:del -->
|
||||
<div v-if="result.title">{{result.title}}</div>
|
||||
<div v-if="result.desc">{{result.desc}}</div>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal">
|
||||
<div class="mask">
|
||||
<div class="modal-box">对话框</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import config from '../../config'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
_id: '',
|
||||
title: '测试名称',
|
||||
questions: [],
|
||||
analyses: {},
|
||||
temp: {},
|
||||
result: {},
|
||||
isFinished: false,
|
||||
player: null
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this._id = options._id
|
||||
this.getData()
|
||||
},
|
||||
onShow() {
|
||||
const player = wx.getBackgroundAudioManager()
|
||||
this.player = player
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
console.log('get Data')
|
||||
wx.request({
|
||||
url: `${config.api}?_id=${this._id}`, //开发者服务器接口地址",
|
||||
data: 'data', //请求的参数",
|
||||
method: 'GET',
|
||||
dataType: 'json', //如果设为json，会尝试对返回的数据做一次 JSON.parse
|
||||
success: res => {
|
||||
console.log(res)
|
||||
const data = res.data
|
||||
if (data.errcode === 0) {
|
||||
this.questions = data.questions
|
||||
this.analyses = data.analyses
|
||||
this.temp = this.questions[0]
|
||||
// TODO: 背景音乐、背景图片
|
||||
} else {
|
||||
wx.showToast({
|
||||
title: '数据异常', //提示的内容,
|
||||
icon: 'fail', //图标,
|
||||
duration: 2000, //延迟时间,
|
||||
mask: true //显示透明蒙层，防止触摸穿透,
|
||||
})
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
wx.showToast({
|
||||
title: '数据异常', //提示的内容,
|
||||
icon: 'fail', //图标,
|
||||
duration: 2000, //延迟时间,
|
||||
mask: true //显示透明蒙层，防止触摸穿透,
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
next(goto) {
|
||||
if (this.isFinished) return
|
||||
const NumReg = /^\d+/
|
||||
const letterReg = /^[A-Z]+/
|
||||
if (NumReg.test(goto)) {
|
||||
this.temp = this.questions[goto - 1]
|
||||
} else if (letterReg.test(goto)) {
|
||||
this.result = this.analyses[goto]
|
||||
this.isFinished = true
|
||||
|
||||
console.log('结束了')
|
||||
} else {
|
||||
console.error('选项编辑错误！')
|
||||
}
|
||||
|
||||
console.log(goto)
|
||||
},
|
||||
viewResult() {
|
||||
wx.setStorageSync('tempResult', this.result)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
.mask {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
.modal-box {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 200rpx;
|
||||
height: 150rpx;
|
||||
margin: auto;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
5
src/pages/details/main.js
Normal file
5
src/pages/details/main.js
Normal file
@ -0,0 +1,5 @@
|
||||
import Vue from 'vue'
|
||||
import App from './index'
|
||||
|
||||
const app = new Vue(App)
|
||||
app.$mount()
|
||||
3
src/pages/details/main.json
Normal file
3
src/pages/details/main.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"navigationBarTitleText": "心理测试"
|
||||
}
|
||||
262
src/pages/index/index.vue
Normal file
262
src/pages/index/index.vue
Normal file
@ -0,0 +1,262 @@
|
||||
<template>
|
||||
<div class="p-home">
|
||||
<div class="header">
|
||||
<div class="search-box">
|
||||
<image
|
||||
class="search-icon icon-search"
|
||||
lazy-load="false"
|
||||
mode="scaleToFill"
|
||||
src="/static/icon/icon_search.png"
|
||||
/>
|
||||
<input
|
||||
@confirm="search"
|
||||
class="search-ipt"
|
||||
confirm-type="search"
|
||||
placeholder="搜索"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cates">
|
||||
<div class="cate">
|
||||
<div class="cate-icon">
|
||||
<image
|
||||
class="cate-img"
|
||||
lazy-load="false"
|
||||
mode="scaleToFill"
|
||||
src="/static/icon/icon_1.png"
|
||||
/>
|
||||
</div>
|
||||
<div class="cate-name">恶搞</div>
|
||||
</div>
|
||||
<div class="cate">
|
||||
<div class="cate-icon">
|
||||
<image
|
||||
class="cate-img"
|
||||
lazy-load="false"
|
||||
mode="scaleToFill"
|
||||
src="/static/icon/icon_2.png"
|
||||
/>
|
||||
</div>
|
||||
<div class="cate-name">趣味</div>
|
||||
</div>
|
||||
<div class="cate">
|
||||
<div class="cate-icon">
|
||||
<image
|
||||
class="cate-img"
|
||||
lazy-load="false"
|
||||
mode="scaleToFill"
|
||||
src="/static/icon/icon_3.png"
|
||||
/>
|
||||
</div>
|
||||
<div class="cate-name">星座</div>
|
||||
</div>
|
||||
<div class="cate">
|
||||
<div class="cate-icon">
|
||||
<image
|
||||
class="cate-img"
|
||||
lazy-load="false"
|
||||
mode="scaleToFill"
|
||||
src="/static/icon/icon_4.png"
|
||||
/>
|
||||
</div>
|
||||
<div class="cate-name">情感</div>
|
||||
</div>
|
||||
<div class="cate">
|
||||
<div class="cate-icon">
|
||||
<image
|
||||
class="cate-img"
|
||||
lazy-load="false"
|
||||
mode="scaleToFill"
|
||||
src="/static/icon/icon_5.png"
|
||||
/>
|
||||
</div>
|
||||
<div class="cate-name">性格</div>
|
||||
</div>
|
||||
<div class="cate">
|
||||
<div class="cate-icon">
|
||||
<image
|
||||
class="cate-img"
|
||||
lazy-load="false"
|
||||
mode="scaleToFill"
|
||||
src="/static/icon/icon_6.png"
|
||||
/>
|
||||
</div>
|
||||
<div class="cate-name">智商</div>
|
||||
</div>
|
||||
<div class="cate">
|
||||
<div class="cate-icon">
|
||||
<image
|
||||
class="cate-img"
|
||||
lazy-load="false"
|
||||
mode="scaleToFill"
|
||||
src="/static/icon/icon_7.png"
|
||||
/>
|
||||
</div>
|
||||
<div class="cate-name">健康</div>
|
||||
</div>
|
||||
<div class="cate">
|
||||
<div class="cate-icon">
|
||||
<image
|
||||
class="cate-img"
|
||||
lazy-load="false"
|
||||
mode="scaleToFill"
|
||||
src="/static/icon/icon_8.png"
|
||||
/>
|
||||
</div>
|
||||
<div class="cate-name">影视明星</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="list-hd">全部测试</div>
|
||||
<div class="list-bd">
|
||||
<div class="list-item">
|
||||
<div class="l">
|
||||
<image lazy-load="false" class="list-item-img" mode="scaleToFill" src="/static/icon/icon_6.png" />
|
||||
</div>
|
||||
<div class="r">
|
||||
<div class="list-item-title">测试标题？？！！！</div>
|
||||
<div class="list-item-text">xxxxx人在测</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<div class="l">
|
||||
<image lazy-load="false" class="list-item-img" mode="scaleToFill" src="/static/icon/icon_6.png" />
|
||||
</div>
|
||||
<div class="r">
|
||||
<div class="list-item-title">测试标题？？！！！</div>
|
||||
<div class="list-item-text">xxxxx人在测</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<div class="l">
|
||||
<image lazy-load="false" class="list-item-img" mode="scaleToFill" src="/static/icon/icon_6.png" />
|
||||
</div>
|
||||
<div class="r">
|
||||
<div class="list-item-title">测试标题？？！！！</div>
|
||||
<div class="list-item-text">xxxxx人在测</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-item">
|
||||
<div class="l">
|
||||
<image lazy-load="false" class="list-item-img" mode="scaleToFill" src="/static/icon/icon_6.png" />
|
||||
</div>
|
||||
<div class="r">
|
||||
<div class="list-item-title">测试标题？？！！！</div>
|
||||
<div class="list-item-text">xxxxx人在测</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
|
||||
methods: {
|
||||
search() {
|
||||
console.log('search')
|
||||
}
|
||||
},
|
||||
|
||||
created() {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.p-home {
|
||||
padding-top: 32rpx;
|
||||
background-color: pink;
|
||||
|
||||
.header {
|
||||
margin-bottom: 32rpx;
|
||||
.search-box {
|
||||
display: flex;
|
||||
margin: 0 32rpx;
|
||||
.search-icon {
|
||||
box-sizing: border-box;
|
||||
padding: 16rpx;
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 16rpx 0 0 16rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
.search-ipt {
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
height: 72rpx;
|
||||
padding: 16rpx;
|
||||
border-radius: 0 16rpx 16rpx 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cates {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 32rpx;
|
||||
padding-bottom: 0;
|
||||
background-color: #fff;
|
||||
.cate {
|
||||
width: 25%;
|
||||
margin-bottom: 32rpx;
|
||||
text-align: center;
|
||||
.cate-icon {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
margin: 0 auto;
|
||||
.cate-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.cate-name {
|
||||
margin-top: 8rpx;
|
||||
color: #999;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
margin-top: 32rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.list-hd {
|
||||
padding-left: 32rpx;
|
||||
height: 88rpx;
|
||||
color: #999;
|
||||
line-height: 88rpx;
|
||||
font-weight: 700;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.list-bd {
|
||||
.list-item {
|
||||
display: flex;
|
||||
padding: 32rpx 0 32rpx 32rpx;
|
||||
border: 1rpx solid #f0f0f0;
|
||||
.l {
|
||||
width: 220rpx;
|
||||
height: 120rpx;
|
||||
margin-right: 32rpx;
|
||||
.list-item-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
12
src/pages/index/main.js
Normal file
12
src/pages/index/main.js
Normal file
@ -0,0 +1,12 @@
|
||||
import Vue from 'vue'
|
||||
import App from './index'
|
||||
|
||||
// add this to handle exception
|
||||
Vue.config.errorHandler = function (err) {
|
||||
if (console && console.error) {
|
||||
console.error(err)
|
||||
}
|
||||
}
|
||||
|
||||
const app = new Vue(App)
|
||||
app.$mount()
|
||||
1
src/pages/index/main.json
Normal file
1
src/pages/index/main.json
Normal file
@ -0,0 +1 @@
|
||||
{}
|
||||
61
src/pages/logs/index.vue
Normal file
61
src/pages/logs/index.vue
Normal file
@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<div>
|
||||
<swiper v-if="imgUrls.length > 0" indidator-dots="imgUrls.length > 1" >
|
||||
<block v-for="(item, index) in imgUrls" :key="index" >
|
||||
<swiper-item>
|
||||
<image :src="item" mode="scaleToFill"></image>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
|
||||
<ul class="container log-list">
|
||||
<li v-for="(log, index) in logs" :class="{ red: aa }" :key="index" class="log-item">
|
||||
<card :text="(index + 1) + ' . ' + log"></card>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { formatTime } from '@/utils/index'
|
||||
import card from '@/components/card'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
card
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
logs: [],
|
||||
imgUrls: [
|
||||
'http://mss.sankuai.com/v1/mss_51a7233366a4427fa6132a6ce72dbe54/newsPicture/05558951-de60-49fb-b674-dd906c8897a6',
|
||||
'http://mss.sankuai.com/v1/mss_51a7233366a4427fa6132a6ce72dbe54/coursePicture/0fbcfdf7-0040-4692-8f84-78bb21f3395d',
|
||||
'http://mss.sankuai.com/v1/mss_51a7233366a4427fa6132a6ce72dbe54/management-school-picture/7683b32e-4e44-4b2f-9c03-c21f34320870'
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
created () {
|
||||
let logs
|
||||
if (mpvuePlatform === 'my') {
|
||||
logs = mpvue.getStorageSync({key: 'logs'}).data || []
|
||||
} else {
|
||||
logs = mpvue.getStorageSync('logs') || []
|
||||
}
|
||||
this.logs = logs.map(log => formatTime(new Date(log)))
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.log-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.log-item {
|
||||
margin: 10rpx;
|
||||
}
|
||||
</style>
|
||||
5
src/pages/logs/main.js
Normal file
5
src/pages/logs/main.js
Normal file
@ -0,0 +1,5 @@
|
||||
import Vue from 'vue'
|
||||
import App from './index'
|
||||
|
||||
const app = new Vue(App)
|
||||
app.$mount()
|
||||
3
src/pages/logs/main.json
Normal file
3
src/pages/logs/main.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"navigationBarTitleText": "查看启动日志"
|
||||
}
|
||||
90
src/pages/result/index.vue
Normal file
90
src/pages/result/index.vue
Normal file
@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div class="p-result">
|
||||
<div class="title">{{result.title}}</div>
|
||||
<div class="desc">{{result.desc}}</div>
|
||||
<div @click="saveImg">点击生成图片</div>
|
||||
<painter :palette="template" @imgOK="onImgOk" />
|
||||
<button data-id="shareBtn" open-type="share">点击分享</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
result: {},
|
||||
template: {
|
||||
background: '#eee',
|
||||
width: '654rpx',
|
||||
height: '400rpx',
|
||||
borderRadius: '20rpx',
|
||||
views: [
|
||||
{
|
||||
type: 'image',
|
||||
url:
|
||||
'https://qhyxpicoss.kujiale.com/r/2017/12/04/L3D123I45VHNYULVSAEYCV3P3X6888_3200x2400.jpg@!70q',
|
||||
css: {
|
||||
top: '48rpx',
|
||||
right: '48rpx',
|
||||
width: '192rpx',
|
||||
height: '192rpx'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
text: 'borderWidth',
|
||||
css: {
|
||||
bottom: '40rpx',
|
||||
right: '200rpx',
|
||||
color: 'green',
|
||||
borderWidth: '2rpx'
|
||||
}
|
||||
}
|
||||
],
|
||||
imgPath: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
const result = wx.getStorageSync('tempResult')
|
||||
this.result = result
|
||||
},
|
||||
onShareAppMessage(res) {
|
||||
if (res.from === 'button') {
|
||||
// 来自页面内转发按钮
|
||||
console.log(res.target)
|
||||
}
|
||||
return {
|
||||
title: '自定义转发标题',
|
||||
path: '/page/user?id=123'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onImgOk(e) {
|
||||
// console.log(e.details.path)
|
||||
console.log(e.mp.detail.path)
|
||||
this.imgPath = e.mp.detail.path
|
||||
},
|
||||
saveImg() {
|
||||
wx.saveImageToPhotosAlbum({
|
||||
filePath: this.imgPath,
|
||||
success: function() {
|
||||
console.log('成功保存')
|
||||
wx.showToast({
|
||||
title: '保存成功', //提示的内容,
|
||||
icon: 'success', //图标,
|
||||
duration: 2000, //延迟时间,
|
||||
mask: true //显示透明蒙层，防止触摸穿透,
|
||||
})
|
||||
},
|
||||
fail: function(err) {
|
||||
console.log(err)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
5
src/pages/result/main.js
Normal file
5
src/pages/result/main.js
Normal file
@ -0,0 +1,5 @@
|
||||
import Vue from 'vue'
|
||||
import App from './index'
|
||||
|
||||
const app = new Vue(App)
|
||||
app.$mount()
|
||||
6
src/pages/result/main.json
Normal file
6
src/pages/result/main.json
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"navigationBarTitleText": "测试结果",
|
||||
"usingComponents": {
|
||||
"painter": "/static/painter/painter"
|
||||
}
|
||||
}
|
||||
24
src/utils/index.js
Normal file
24
src/utils/index.js
Normal file
@ -0,0 +1,24 @@
|
||||
function formatNumber (n) {
|
||||
const str = n.toString()
|
||||
return str[1] ? str : `0${str}`
|
||||
}
|
||||
|
||||
export function formatTime (date) {
|
||||
const year = date.getFullYear()
|
||||
const month = date.getMonth() + 1
|
||||
const day = date.getDate()
|
||||
|
||||
const hour = date.getHours()
|
||||
const minute = date.getMinutes()
|
||||
const second = date.getSeconds()
|
||||
|
||||
const t1 = [year, month, day].map(formatNumber).join('/')
|
||||
const t2 = [hour, minute, second].map(formatNumber).join(':')
|
||||
|
||||
return `${t1} ${t2}`
|
||||
}
|
||||
|
||||
export default {
|
||||
formatNumber,
|
||||
formatTime
|
||||
}
|
||||
0
static/.gitkeep
Normal file
0
static/.gitkeep
Normal file
BIN
static/icon/icon_1.png
Normal file
BIN
static/icon/icon_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
static/icon/icon_2.png
Normal file
BIN
static/icon/icon_2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
static/icon/icon_3.png
Normal file
BIN
static/icon/icon_3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
static/icon/icon_4.png
Normal file
BIN
static/icon/icon_4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
static/icon/icon_5.png
Normal file
BIN
static/icon/icon_5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
static/icon/icon_6.png
Normal file
BIN
static/icon/icon_6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
static/icon/icon_7.png
Normal file
BIN
static/icon/icon_7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
static/icon/icon_8.png
Normal file
BIN
static/icon/icon_8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
static/icon/icon_search.png
Normal file
BIN
static/icon/icon_search.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
BIN
static/images/user.png
Normal file
BIN
static/images/user.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
228
static/painter/lib/downloader.js
Normal file
228
static/painter/lib/downloader.js
Normal file
@ -0,0 +1,228 @@
|
||||
/**
|
||||
* LRU 文件存储，使用该 downloader 可以让下载的文件存储在本地，下次进入小程序后可以直接使用
|
||||
* 详细设计文档可查看 https://juejin.im/post/5b42d3ede51d4519277b6ce3
|
||||
*/
|
||||
const util = require('./util');
|
||||
|
||||
const SAVED_FILES_KEY = 'savedFiles';
|
||||
const KEY_TOTAL_SIZE = 'totalSize';
|
||||
const KEY_PATH = 'path';
|
||||
const KEY_TIME = 'time';
|
||||
const KEY_SIZE = 'size';
|
||||
|
||||
// 可存储总共为 6M，目前小程序可允许的最大本地存储为 10M
|
||||
let MAX_SPACE_IN_B = 6 * 1024 * 1024;
|
||||
let savedFiles = {};
|
||||
|
||||
export default class Dowloader {
|
||||
constructor() {
|
||||
// app 如果设置了最大存储空间，则使用 app 中的
|
||||
if (getApp().PAINTER_MAX_LRU_SPACE) {
|
||||
MAX_SPACE_IN_B = getApp().PAINTER_MAX_LRU_SPACE;
|
||||
}
|
||||
wx.getStorage({
|
||||
key: SAVED_FILES_KEY,
|
||||
success: function (res) {
|
||||
if (res.data) {
|
||||
savedFiles = res.data;
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 下载文件，会用 lru 方式来缓存文件到本地
|
||||
* @param {String} url 文件的 url
|
||||
*/
|
||||
download(url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (!(url && util.isValidUrl(url))) {
|
||||
resolve(url);
|
||||
return;
|
||||
}
|
||||
const file = getFile(url);
|
||||
|
||||
if (file) {
|
||||
// 检查文件是否正常，不正常需要重新下载
|
||||
wx.getSavedFileInfo({
|
||||
filePath: file[KEY_PATH],
|
||||
success: (res) => {
|
||||
resolve(file[KEY_PATH]);
|
||||
},
|
||||
fail: (error) => {
|
||||
console.error(`the file is broken, redownload it, ${JSON.stringify(error)}`);
|
||||
downloadFile(url).then((path) => {
|
||||
resolve(path);
|
||||
}, () => {
|
||||
reject();
|
||||
});
|
||||
},
|
||||
});
|
||||
} else {
|
||||
downloadFile(url).then((path) => {
|
||||
resolve(path);
|
||||
}, () => {
|
||||
reject();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function downloadFile(url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
wx.downloadFile({
|
||||
url: url,
|
||||
success: function (res) {
|
||||
if (res.statusCode !== 200) {
|
||||
console.error(`downloadFile ${url} failed res.statusCode is not 200`);
|
||||
reject();
|
||||
return;
|
||||
}
|
||||
const { tempFilePath } = res;
|
||||
wx.getFileInfo({
|
||||
filePath: tempFilePath,
|
||||
success: (tmpRes) => {
|
||||
const newFileSize = tmpRes.size;
|
||||
doLru(newFileSize).then(() => {
|
||||
saveFile(url, newFileSize, tempFilePath).then((filePath) => {
|
||||
resolve(filePath);
|
||||
});
|
||||
}, () => {
|
||||
resolve(tempFilePath);
|
||||
});
|
||||
},
|
||||
fail: (error) => {
|
||||
// 文件大小信息获取失败，则此文件也不要进行存储
|
||||
console.error(`getFileInfo ${res.tempFilePath} failed, ${JSON.stringify(error)}`);
|
||||
resolve(res.tempFilePath);
|
||||
},
|
||||
});
|
||||
},
|
||||
fail: function (error) {
|
||||
console.error(`downloadFile failed, ${JSON.stringify(error)} `);
|
||||
reject();
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function saveFile(key, newFileSize, tempFilePath) {
|
||||
return new Promise((resolve, reject) => {
|
||||
wx.saveFile({
|
||||
tempFilePath: tempFilePath,
|
||||
success: (fileRes) => {
|
||||
const totalSize = savedFiles[KEY_TOTAL_SIZE] ? savedFiles[KEY_TOTAL_SIZE] : 0;
|
||||
savedFiles[key] = {};
|
||||
savedFiles[key][KEY_PATH] = fileRes.savedFilePath;
|
||||
savedFiles[key][KEY_TIME] = new Date().getTime();
|
||||
savedFiles[key][KEY_SIZE] = newFileSize;
|
||||
savedFiles['totalSize'] = newFileSize + totalSize;
|
||||
wx.setStorage({
|
||||
key: SAVED_FILES_KEY,
|
||||
data: savedFiles,
|
||||
});
|
||||
resolve(fileRes.savedFilePath);
|
||||
},
|
||||
fail: (error) => {
|
||||
console.error(`saveFile ${key} failed, then we delete all files, ${JSON.stringify(error)}`);
|
||||
// 由于 saveFile 成功后，res.tempFilePath 处的文件会被移除，所以在存储未成功时，我们还是继续使用临时文件
|
||||
resolve(tempFilePath);
|
||||
// 如果出现错误，就直接情况本地的所有文件，因为你不知道是不是因为哪次lru的某个文件未删除成功
|
||||
reset();
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 清空所有下载相关内容
|
||||
*/
|
||||
function reset() {
|
||||
wx.removeStorage({
|
||||
key: SAVED_FILES_KEY,
|
||||
success: () => {
|
||||
wx.getSavedFileList({
|
||||
success: (listRes) => {
|
||||
removeFiles(listRes.fileList);
|
||||
},
|
||||
fail: (getError) => {
|
||||
console.error(`getSavedFileList failed, ${JSON.stringify(getError)}`);
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function doLru(size) {
|
||||
return new Promise((resolve, reject) => {
|
||||
let totalSize = savedFiles[KEY_TOTAL_SIZE] ? savedFiles[KEY_TOTAL_SIZE] : 0;
|
||||
|
||||
if (size + totalSize <= MAX_SPACE_IN_B) {
|
||||
resolve();
|
||||
return;
|
||||
}
|
||||
// 如果加上新文件后大小超过最大限制，则进行 lru
|
||||
const pathsShouldDelete = [];
|
||||
// 按照最后一次的访问时间，从小到大排序
|
||||
const allFiles = JSON.parse(JSON.stringify(savedFiles));
|
||||
delete allFiles[KEY_TOTAL_SIZE];
|
||||
const sortedKeys = Object.keys(allFiles).sort((a, b) => {
|
||||
return allFiles[a][KEY_TIME] - allFiles[b][KEY_TIME];
|
||||
});
|
||||
|
||||
for (const sortedKey of sortedKeys) {
|
||||
totalSize -= savedFiles[sortedKey].size;
|
||||
pathsShouldDelete.push(savedFiles[sortedKey][KEY_PATH]);
|
||||
delete savedFiles[sortedKey];
|
||||
if (totalSize + size < MAX_SPACE_IN_B) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
savedFiles['totalSize'] = totalSize;
|
||||
|
||||
wx.setStorage({
|
||||
key: SAVED_FILES_KEY,
|
||||
data: savedFiles,
|
||||
success: () => {
|
||||
// 保证 storage 中不会存在不存在的文件数据
|
||||
if (pathsShouldDelete.length > 0) {
|
||||
removeFiles(pathsShouldDelete);
|
||||
}
|
||||
resolve();
|
||||
},
|
||||
fail: (error) => {
|
||||
console.error(`doLru setStorage failed, ${JSON.stringify(error)}`);
|
||||
reject();
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function removeFiles(pathsShouldDelete) {
|
||||
for (const pathDel of pathsShouldDelete) {
|
||||
let delPath = pathDel;
|
||||
if (typeof pathDel === 'object') {
|
||||
delPath = pathDel.filePath;
|
||||
}
|
||||
wx.removeSavedFile({
|
||||
filePath: delPath,
|
||||
fail: (error) => {
|
||||
console.error(`removeSavedFile ${pathDel} failed, ${JSON.stringify(error)}`);
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function getFile(key) {
|
||||
if (!savedFiles[key]) {
|
||||
return;
|
||||
}
|
||||
savedFiles[key]['time'] = new Date().getTime();
|
||||
wx.setStorage({
|
||||
key: SAVED_FILES_KEY,
|
||||
data: savedFiles,
|
||||
});
|
||||
return savedFiles[key];
|
||||
}
|
||||
102
static/painter/lib/gradient.js
Normal file
102
static/painter/lib/gradient.js
Normal file
@ -0,0 +1,102 @@
|
||||
/* eslint-disable */
|
||||
// 当ctx传入当前文件，const grd = ctx.createCircularGradient() 和
|
||||
// const grd = this.ctx.createLinearGradient() 无效，因此只能分开处理
|
||||
// 先分析，在外部创建grd，再传入使用就可以
|
||||
|
||||
!(function () {
|
||||
|
||||
var api = {
|
||||
isGradient: function(bg) {
|
||||
if (bg && (bg.startsWith('linear') || bg.startsWith('radial'))) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
doGradient: function(bg, width, height, ctx) {
|
||||
if (bg.startsWith('linear')) {
|
||||
linearEffect(width, height, bg, ctx);
|
||||
} else if (bg.startsWith('radial')) {
|
||||
radialEffect(width, height, bg, ctx);
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
function analizeGrad(string) {
|
||||
const colorPercents = string.substring(0, string.length - 1).split("%,");
|
||||
const colors = [];
|
||||
const percents = [];
|
||||
for (let colorPercent of colorPercents) {
|
||||
colors.push(colorPercent.substring(0, colorPercent.lastIndexOf(" ")).trim());
|
||||
percents.push(colorPercent.substring(colorPercent.lastIndexOf(" "), colorPercent.length) / 100);
|
||||
}
|
||||
return {colors: colors, percents: percents};
|
||||
}
|
||||
|
||||
function radialEffect(width, height, bg, ctx) {
|
||||
const colorPer = analizeGrad(bg.match(/radial-gradient\((.+)\)/)[1]);
|
||||
const grd = ctx.createCircularGradient(0, 0, width < height ? height / 2 : width / 2);
|
||||
for (let i = 0; i < colorPer.colors.length; i++) {
|
||||
grd.addColorStop(colorPer.percents[i], colorPer.colors[i]);
|
||||
}
|
||||
ctx.fillStyle = grd;
|
||||
//ctx.fillRect(-(width / 2), -(height / 2), width, height);
|
||||
}
|
||||
|
||||
function analizeLinear(bg, width, height) {
|
||||
const direction = bg.match(/([-]?\d{1,3})deg/);
|
||||
const dir = direction && direction[1] ? parseFloat(direction[1]) : 0;
|
||||
let coordinate;
|
||||
switch (dir) {
|
||||
case 0: coordinate = [0, -height / 2, 0, height / 2]; break;
|
||||
case 90: coordinate = [width / 2, 0, -width / 2, 0]; break;
|
||||
case -90: coordinate = [-width / 2, 0, width / 2, 0]; break;
|
||||
case 180: coordinate = [0, height / 2, 0, -height / 2]; break;
|
||||
case -180: coordinate = [0, -height / 2, 0, height / 2]; break;
|
||||
default:
|
||||
let x1 = 0;
|
||||
let y1 = 0;
|
||||
let x2 = 0;
|
||||
let y2 = 0;
|
||||
if (direction[1] > 0 && direction[1] < 90) {
|
||||
x1 = (width / 2) - ((width / 2) * Math.tan((90 - direction[1]) * Math.PI * 2 / 360) - height / 2) * Math.sin(2 * (90 - direction[1]) * Math.PI * 2 / 360) / 2;
|
||||
y2 = Math.tan((90 - direction[1]) * Math.PI * 2 / 360) * x1;
|
||||
x2 = -x1;
|
||||
y1 = -y2;
|
||||
} else if (direction[1] > -180 && direction[1] < -90) {
|
||||
x1 = -(width / 2) + ((width / 2) * Math.tan((90 - direction[1]) * Math.PI * 2 / 360) - height / 2) * Math.sin(2 * (90 - direction[1]) * Math.PI * 2 / 360) / 2;
|
||||
y2 = Math.tan((90 - direction[1]) * Math.PI * 2 / 360) * x1;
|
||||
x2 = -x1;
|
||||
y1 = -y2;
|
||||
} else if (direction[1] > 90 && direction[1] < 180) {
|
||||
x1 = (width / 2) + (-(width / 2) * Math.tan((90 - direction[1]) * Math.PI * 2 / 360) - height / 2) * Math.sin(2 * (90 - direction[1]) * Math.PI * 2 / 360) / 2;
|
||||
y2 = Math.tan((90 - direction[1]) * Math.PI * 2 / 360) * x1;
|
||||
x2 = -x1;
|
||||
y1 = -y2;
|
||||
} else {
|
||||
x1 = -(width / 2) - (-(width / 2) * Math.tan((90 - direction[1]) * Math.PI * 2 / 360) - height / 2) * Math.sin(2 * (90 - direction[1]) * Math.PI * 2 / 360) / 2;
|
||||
y2 = Math.tan((90 - direction[1]) * Math.PI * 2 / 360) * x1;
|
||||
x2 = -x1;
|
||||
y1 = -y2;
|
||||
}
|
||||
coordinate = [x1, y1, x2, y2];
|
||||
break;
|
||||
}
|
||||
return coordinate;
|
||||
}
|
||||
|
||||
function linearEffect(width, height, bg, ctx) {
|
||||
const param = analizeLinear(bg, width, height);
|
||||
const grd = ctx.createLinearGradient(param[0], param[1], param[2], param[3]);
|
||||
const content = bg.match(/linear-gradient\((.+)\)/)[1];
|
||||
const colorPer = analizeGrad(content.substring(content.indexOf(',') + 1));
|
||||
for (let i = 0; i < colorPer.colors.length; i++) {
|
||||
grd.addColorStop(colorPer.percents[i], colorPer.colors[i]);
|
||||
}
|
||||
ctx.fillStyle = grd
|
||||
//ctx.fillRect(-(width / 2), -(height / 2), width, height);
|
||||
}
|
||||
|
||||
module.exports = { api }
|
||||
|
||||
})();
|
||||
549
static/painter/lib/pen.js
Normal file
549
static/painter/lib/pen.js
Normal file
@ -0,0 +1,549 @@
|
||||
const QR = require('./qrcode.js');
|
||||
const GD = require('./gradient.js');
|
||||
|
||||
export default class Painter {
|
||||
constructor(ctx, data) {
|
||||
this.ctx = ctx;
|
||||
this.data = data;
|
||||
this.globalWidth = {};
|
||||
this.globalHeight = {};
|
||||
}
|
||||
|
||||
paint(callback) {
|
||||
this.style = {
|
||||
width: this.data.width.toPx(),
|
||||
height: this.data.height.toPx(),
|
||||
};
|
||||
this._background();
|
||||
for (const view of this.data.views) {
|
||||
this._drawAbsolute(view);
|
||||
}
|
||||
this.ctx.draw(false, () => {
|
||||
callback();
|
||||
});
|
||||
}
|
||||
|
||||
_background() {
|
||||
this.ctx.save();
|
||||
const {
|
||||
width,
|
||||
height,
|
||||
} = this.style;
|
||||
const bg = this.data.background;
|
||||
this.ctx.translate(width / 2, height / 2);
|
||||
|
||||
this._doClip(this.data.borderRadius, width, height);
|
||||
if (!bg) {
|
||||
// 如果未设置背景，则默认使用白色
|
||||
this.ctx.fillStyle = '#fff';
|
||||
this.ctx.fillRect(-(width / 2), -(height / 2), width, height);
|
||||
} else if (bg.startsWith('#') || bg.startsWith('rgba') || bg.toLowerCase() === 'transparent') {
|
||||
// 背景填充颜色
|
||||
this.ctx.fillStyle = bg;
|
||||
this.ctx.fillRect(-(width / 2), -(height / 2), width, height);
|
||||
} else if (GD.api.isGradient(bg)) {
|
||||
GD.api.doGradient(bg, width, height, this.ctx);
|
||||
this.ctx.fillRect(-(width / 2), -(height / 2), width, height);
|
||||
} else {
|
||||
// 背景填充图片
|
||||
this.ctx.drawImage(bg, -(width / 2), -(height / 2), width, height);
|
||||
}
|
||||
this.ctx.restore();
|
||||
}
|
||||
|
||||
_drawAbsolute(view) {
|
||||
// 证明 css 为数组形式，需要合并
|
||||
if (view.css && view.css.length) {
|
||||
/* eslint-disable no-param-reassign */
|
||||
view.css = Object.assign(...view.css);
|
||||
}
|
||||
switch (view.type) {
|
||||
case 'image':
|
||||
this._drawAbsImage(view);
|
||||
break;
|
||||
case 'text':
|
||||
this._fillAbsText(view);
|
||||
break;
|
||||
case 'rect':
|
||||
this._drawAbsRect(view);
|
||||
break;
|
||||
case 'qrcode':
|
||||
this._drawQRCode(view);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据 borderRadius 进行裁减
|
||||
*/
|
||||
_doClip(borderRadius, width, height) {
|
||||
if (borderRadius && width && height) {
|
||||
const r = Math.min(borderRadius.toPx(), width / 2, height / 2);
|
||||
// 防止在某些机型上周边有黑框现象，此处如果直接设置 fillStyle 为透明，在 Android 机型上会导致被裁减的图片也变为透明， iOS 和 IDE 上不会
|
||||
// globalAlpha 在 1.9.90 起支持，低版本下无效，但把 fillStyle 设为了 white，相对默认的 black 要好点
|
||||
this.ctx.globalAlpha = 0;
|
||||
this.ctx.fillStyle = 'white';
|
||||
this.ctx.beginPath();
|
||||
this.ctx.arc(-width / 2 + r, -height / 2 + r, r, 1 * Math.PI, 1.5 * Math.PI);
|
||||
this.ctx.lineTo(width / 2 - r, -height / 2);
|
||||
this.ctx.arc(width / 2 - r, -height / 2 + r, r, 1.5 * Math.PI, 2 * Math.PI);
|
||||
this.ctx.lineTo(width / 2, height / 2 - r);
|
||||
this.ctx.arc(width / 2 - r, height / 2 - r, r, 0, 0.5 * Math.PI);
|
||||
this.ctx.lineTo(-width / 2 + r, height / 2);
|
||||
this.ctx.arc(-width / 2 + r, height / 2 - r, r, 0.5 * Math.PI, 1 * Math.PI);
|
||||
this.ctx.closePath();
|
||||
this.ctx.fill();
|
||||
// 在 ios 的 6.6.6 版本上 clip 有 bug，禁掉此类型上的 clip，也就意味着，在此版本微信的 ios 设备下无法使用 border 属性
|
||||
if (!(getApp().systemInfo &&
|
||||
getApp().systemInfo.version <= '6.6.6' &&
|
||||
getApp().systemInfo.platform === 'ios')) {
|
||||
this.ctx.clip();
|
||||
}
|
||||
this.ctx.globalAlpha = 1;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 画边框
|
||||
*/
|
||||
_doBorder(view, width, height) {
|
||||
if (!view.css) {
|
||||
return;
|
||||
}
|
||||
const {
|
||||
borderRadius,
|
||||
borderWidth,
|
||||
borderColor,
|
||||
} = view.css;
|
||||
if (!borderWidth) {
|
||||
return;
|
||||
}
|
||||
this.ctx.save();
|
||||
this._preProcess(view, true);
|
||||
let r;
|
||||
if (borderRadius) {
|
||||
r = Math.min(borderRadius.toPx(), width / 2, height / 2);
|
||||
} else {
|
||||
r = 0;
|
||||
}
|
||||
const lineWidth = borderWidth.toPx();
|
||||
this.ctx.lineWidth = lineWidth;
|
||||
this.ctx.strokeStyle = (borderColor || 'black');
|
||||
this.ctx.beginPath();
|
||||
this.ctx.arc(-width / 2 + r, -height / 2 + r, r + lineWidth / 2, 1 * Math.PI, 1.5 * Math.PI);
|
||||
this.ctx.lineTo(width / 2 - r, -height / 2 - lineWidth / 2);
|
||||
this.ctx.arc(width / 2 - r, -height / 2 + r, r + lineWidth / 2, 1.5 * Math.PI, 2 * Math.PI);
|
||||
this.ctx.lineTo(width / 2 + lineWidth / 2, height / 2 - r);
|
||||
this.ctx.arc(width / 2 - r, height / 2 - r, r + lineWidth / 2, 0, 0.5 * Math.PI);
|
||||
this.ctx.lineTo(-width / 2 + r, height / 2 + lineWidth / 2);
|
||||
this.ctx.arc(-width / 2 + r, height / 2 - r, r + lineWidth / 2, 0.5 * Math.PI, 1 * Math.PI);
|
||||
this.ctx.closePath();
|
||||
this.ctx.stroke();
|
||||
this.ctx.restore();
|
||||
}
|
||||
|
||||
_preProcess(view, notClip) {
|
||||
let width = 0;
|
||||
let height;
|
||||
let extra;
|
||||
switch (view.type) {
|
||||
case 'text': {
|
||||
const textArray = view.text.split('\n');
|
||||
// 处理多个连续的'\n'
|
||||
for (let i = 0; i < textArray.length; ++i) {
|
||||
if (textArray[i] === '') {
|
||||
textArray[i] = ' ';
|
||||
}
|
||||
}
|
||||
const fontWeight = view.css.fontWeight === 'bold' ? 'bold' : 'normal';
|
||||
view.css.fontSize = view.css.fontSize ? view.css.fontSize : '20rpx';
|
||||
this.ctx.font = `normal ${fontWeight} ${view.css.fontSize.toPx()}px ${view.css.fontFamily ? view.css.fontFamily : 'sans-serif'}`;
|
||||
// this.ctx.setFontSize(view.css.fontSize.toPx());
|
||||
// 计算行数
|
||||
let lines = 0;
|
||||
const linesArray = [];
|
||||
for (let i = 0; i < textArray.length; ++i) {
|
||||
const textLength = this.ctx.measureText(textArray[i]).width;
|
||||
const partWidth = view.css.width ? view.css.width.toPx() : textLength;
|
||||
const calLines = Math.ceil(textLength / partWidth);
|
||||
width = partWidth > width ? partWidth : width;
|
||||
lines += calLines;
|
||||
linesArray[i] = calLines;
|
||||
}
|
||||
lines = view.css.maxLines < lines ? view.css.maxLines : lines;
|
||||
const lineHeight = view.css.lineHeight ? view.css.lineHeight.toPx() : view.css.fontSize.toPx();
|
||||
height = lineHeight * lines;
|
||||
extra = {
|
||||
lines: lines,
|
||||
lineHeight: lineHeight,
|
||||
textArray: textArray,
|
||||
linesArray: linesArray,
|
||||
};
|
||||
break;
|
||||
}
|
||||
case 'image': {
|
||||
// image的长宽设置成auto的逻辑处理
|
||||
const ratio = getApp().systemInfo.pixelRatio ? getApp().systemInfo.pixelRatio : 2;
|
||||
// 有css却未设置width或height，则默认为auto
|
||||
if (view.css) {
|
||||
if (!view.css.width) {
|
||||
view.css.width = 'auto';
|
||||
}
|
||||
if (!view.css.height) {
|
||||
view.css.height = 'auto';
|
||||
}
|
||||
}
|
||||
if (!view.css || (view.css.width === 'auto' && view.css.height === 'auto')) {
|
||||
width = Math.round(view.sWidth / ratio);
|
||||
height = Math.round(view.sHeight / ratio);
|
||||
} else if (view.css.width === 'auto') {
|
||||
height = view.css.height.toPx();
|
||||
width = view.sWidth / view.sHeight * height;
|
||||
} else if (view.css.height === 'auto') {
|
||||
width = view.css.width.toPx();
|
||||
height = view.sHeight / view.sWidth * width;
|
||||
} else {
|
||||
width = view.css.width.toPx();
|
||||
height = view.css.height.toPx();
|
||||
}
|
||||
break;
|
||||
}
|
||||
default:
|
||||
if (!(view.css.width && view.css.height)) {
|
||||
console.error('You should set width and height');
|
||||
return;
|
||||
}
|
||||
width = view.css.width.toPx();
|
||||
height = view.css.height.toPx();
|
||||
break;
|
||||
}
|
||||
let x;
|
||||
if (view.css && view.css.right) {
|
||||
if (typeof view.css.right === 'string') {
|
||||
x = this.style.width - view.css.right.toPx(true);
|
||||
} else {
|
||||
// 可以用数组方式，把文字长度计算进去
|
||||
// [right, 文字id, 乘数（默认 1）]
|
||||
const rights = view.css.right;
|
||||
x = this.style.width - rights[0].toPx(true) - this.globalWidth[rights[1]] * (rights[2] || 1);
|
||||
}
|
||||
} else if (view.css && view.css.left) {
|
||||
if (typeof view.css.left === 'string') {
|
||||
x = view.css.left.toPx(true);
|
||||
} else {
|
||||
const lefts = view.css.left;
|
||||
x = lefts[0].toPx(true) + this.globalWidth[lefts[1]] * (lefts[2] || 1);
|
||||
}
|
||||
} else {
|
||||
x = 0;
|
||||
}
|
||||
//const y = view.css && view.css.bottom ? this.style.height - height - view.css.bottom.toPx(true) : (view.css && view.css.top ? view.css.top.toPx(true) : 0);
|
||||
let y;
|
||||
if (view.css && view.css.bottom) {
|
||||
y = this.style.height - height - view.css.bottom.toPx(true);
|
||||
} else {
|
||||
if (view.css && view.css.top) {
|
||||
if (typeof view.css.top === 'string') {
|
||||
y = view.css.top.toPx(true);
|
||||
} else {
|
||||
const tops = view.css.top;
|
||||
y = tops[0].toPx(true) + this.globalHeight[tops[1]] * (tops[2] || 1);
|
||||
}
|
||||
} else {
|
||||
y = 0
|
||||
}
|
||||
}
|
||||
|
||||
const angle = view.css && view.css.rotate ? this._getAngle(view.css.rotate) : 0;
|
||||
// 当设置了 right 时，默认 align 用 right，反之用 left
|
||||
const align = view.css && view.css.align ? view.css.align : (view.css && view.css.right ? 'right' : 'left');
|
||||
switch (align) {
|
||||
case 'center':
|
||||
this.ctx.translate(x, y + height / 2);
|
||||
break;
|
||||
case 'right':
|
||||
this.ctx.translate(x - width / 2, y + height / 2);
|
||||
break;
|
||||
default:
|
||||
this.ctx.translate(x + width / 2, y + height / 2);
|
||||
break;
|
||||
}
|
||||
this.ctx.rotate(angle);
|
||||
if (!notClip && view.css && view.css.borderRadius && view.type !== 'rect') {
|
||||
this._doClip(view.css.borderRadius, width, height);
|
||||
}
|
||||
this._doShadow(view);
|
||||
if (view.id) {
|
||||
this.globalWidth[view.id] = width;
|
||||
this.globalHeight[view.id] = height;
|
||||
}
|
||||
return {
|
||||
width: width,
|
||||
height: height,
|
||||
x: x,
|
||||
y: y,
|
||||
extra: extra,
|
||||
};
|
||||
}
|
||||
|
||||
// 画文字的背景图片
|
||||
_doBackground(view) {
|
||||
this.ctx.save();
|
||||
const {
|
||||
width: rawWidth,
|
||||
height: rawHeight,
|
||||
} = this._preProcess(view, true);
|
||||
|
||||
const {
|
||||
background,
|
||||
padding,
|
||||
} = view.css;
|
||||
let pd = [0, 0, 0, 0];
|
||||
if (padding) {
|
||||
const pdg = padding.split(/\s+/);
|
||||
if (pdg.length === 1) {
|
||||
const x = pdg[0].toPx();
|
||||
pd = [x, x, x, x];
|
||||
}
|
||||
if (pdg.length === 2) {
|
||||
const x = pdg[0].toPx();
|
||||
const y = pdg[1].toPx();
|
||||
pd = [x, y, x, y];
|
||||
}
|
||||
if (pdg.length === 3) {
|
||||
const x = pdg[0].toPx();
|
||||
const y = pdg[1].toPx();
|
||||
const z = pdg[2].toPx();
|
||||
pd = [x, y, z, y];
|
||||
}
|
||||
if (pdg.length === 4) {
|
||||
const x = pdg[0].toPx();
|
||||
const y = pdg[1].toPx();
|
||||
const z = pdg[2].toPx();
|
||||
const a = pdg[3].toPx();
|
||||
pd = [x, y, z, a];
|
||||
}
|
||||
}
|
||||
const width = rawWidth + pd[1] + pd[3];
|
||||
const height = rawHeight + pd[0] + pd[2];
|
||||
this._doClip(view.css.borderRadius, width, height)
|
||||
if (GD.api.isGradient(background)) {
|
||||
GD.api.doGradient(background, width, height, this.ctx);
|
||||
} else {
|
||||
this.ctx.fillStyle = background;
|
||||
}
|
||||
this.ctx.fillRect(-(width / 2), -(height / 2), width, height);
|
||||
|
||||
this.ctx.restore();
|
||||
}
|
||||
|
||||
_drawQRCode(view) {
|
||||
this.ctx.save();
|
||||
const {
|
||||
width,
|
||||
height,
|
||||
} = this._preProcess(view);
|
||||
QR.api.draw(view.content, this.ctx, -width / 2, -height / 2, width, height, view.css.background, view.css.color);
|
||||
this.ctx.restore();
|
||||
this._doBorder(view, width, height);
|
||||
}
|
||||
|
||||
_drawAbsImage(view) {
|
||||
if (!view.url) {
|
||||
return;
|
||||
}
|
||||
this.ctx.save();
|
||||
const {
|
||||
width,
|
||||
height,
|
||||
} = this._preProcess(view);
|
||||
// 获得缩放到图片大小级别的裁减框
|
||||
let rWidth = view.sWidth;
|
||||
let rHeight = view.sHeight;
|
||||
let startX = 0;
|
||||
let startY = 0;
|
||||
// 绘画区域比例
|
||||
const cp = width / height;
|
||||
// 原图比例
|
||||
const op = view.sWidth / view.sHeight;
|
||||
if (cp >= op) {
|
||||
rHeight = rWidth / cp;
|
||||
startY = Math.round((view.sHeight - rHeight) / 2);
|
||||
} else {
|
||||
rWidth = rHeight * cp;
|
||||
startX = Math.round((view.sWidth - rWidth) / 2);
|
||||
}
|
||||
if (view.css && view.css.mode === 'scaleToFill') {
|
||||
this.ctx.drawImage(view.url, -(width / 2), -(height / 2), width, height);
|
||||
} else {
|
||||
this.ctx.drawImage(view.url, startX, startY, rWidth, rHeight, -(width / 2), -(height / 2), width, height);
|
||||
}
|
||||
this.ctx.restore();
|
||||
this._doBorder(view, width, height);
|
||||
}
|
||||
|
||||
_fillAbsText(view) {
|
||||
if (!view.text) {
|
||||
return;
|
||||
}
|
||||
if (view.css.background) {
|
||||
// 生成背景
|
||||
this._doBackground(view);
|
||||
}
|
||||
this.ctx.save();
|
||||
const {
|
||||
width,
|
||||
height,
|
||||
extra,
|
||||
} = this._preProcess(view, view.css.background && view.css.borderRadius);
|
||||
|
||||
this.ctx.fillStyle = (view.css.color || 'black');
|
||||
const {
|
||||
lines,
|
||||
lineHeight,
|
||||
textArray,
|
||||
linesArray,
|
||||
} = extra;
|
||||
// 如果设置了id，则保留 text 的长度
|
||||
if (view.id) {
|
||||
let textWidth = 0;
|
||||
for (let i = 0; i < textArray.length; ++i) {
|
||||
textWidth = this.ctx.measureText(textArray[i]).width > textWidth ? this.ctx.measureText(textArray[i]).width : textWidth;
|
||||
}
|
||||
this.globalWidth[view.id] = width ? (textWidth < width ? textWidth : width) : textWidth;
|
||||
}
|
||||
let lineIndex = 0;
|
||||
for (let j = 0; j < textArray.length; ++j) {
|
||||
const preLineLength = Math.round(textArray[j].length / linesArray[j]);
|
||||
let start = 0;
|
||||
let alreadyCount = 0;
|
||||
for (let i = 0; i < linesArray[j]; ++i) {
|
||||
// 绘制行数大于最大行数，则直接跳出循环
|
||||
if (lineIndex >= lines) {
|
||||
break;
|
||||
}
|
||||
alreadyCount = preLineLength;
|
||||
let text = textArray[j].substr(start, alreadyCount);
|
||||
let measuredWith = this.ctx.measureText(text).width;
|
||||
// 如果测量大小小于width一个字符的大小，则进行补齐，如果测量大小超出 width，则进行减除
|
||||
// 如果已经到文本末尾，也不要进行该循环
|
||||
while ((start + alreadyCount <= textArray[j].length) && (width - measuredWith > view.css.fontSize.toPx() || measuredWith > width)) {
|
||||
if (measuredWith < width) {
|
||||
text = textArray[j].substr(start, ++alreadyCount);
|
||||
} else {
|
||||
if (text.length <= 1) {
|
||||
// 如果只有一个字符时，直接跳出循环
|
||||
break;
|
||||
}
|
||||
text = textArray[j].substr(start, --alreadyCount);
|
||||
}
|
||||
measuredWith = this.ctx.measureText(text).width;
|
||||
}
|
||||
start += text.length;
|
||||
// 如果是最后一行了，发现还有未绘制完的内容，则加...
|
||||
if (lineIndex === lines - 1 && (j < textArray.length - 1 || start < textArray[j].length)) {
|
||||
while (this.ctx.measureText(`${text}...`).width > width) {
|
||||
if (text.length <= 1) {
|
||||
// 如果只有一个字符时，直接跳出循环
|
||||
break;
|
||||
}
|
||||
text = text.substring(0, text.length - 1);
|
||||
}
|
||||
text += '...';
|
||||
measuredWith = this.ctx.measureText(text).width;
|
||||
}
|
||||
this.ctx.setTextAlign(view.css.textAlign ? view.css.textAlign : 'left');
|
||||
let x;
|
||||
switch (view.css.textAlign) {
|
||||
case 'center':
|
||||
x = 0;
|
||||
break;
|
||||
case 'right':
|
||||
x = (width / 2);
|
||||
break;
|
||||
default:
|
||||
x = -(width / 2);
|
||||
break;
|
||||
}
|
||||
const y = -(height / 2) + (lineIndex === 0 ? view.css.fontSize.toPx() : (view.css.fontSize.toPx() + lineIndex * lineHeight));
|
||||
lineIndex++;
|
||||
if (view.css.textStyle === 'stroke') {
|
||||
this.ctx.strokeText(text, x, y, measuredWith);
|
||||
} else {
|
||||
this.ctx.fillText(text, x, y, measuredWith);
|
||||
}
|
||||
const fontSize = view.css.fontSize.toPx();
|
||||
if (view.css.textDecoration) {
|
||||
this.ctx.beginPath();
|
||||
if (/\bunderline\b/.test(view.css.textDecoration)) {
|
||||
this.ctx.moveTo(x, y);
|
||||
this.ctx.lineTo(x + measuredWith, y);
|
||||
}
|
||||
if (/\boverline\b/.test(view.css.textDecoration)) {
|
||||
this.ctx.moveTo(x, y - fontSize);
|
||||
this.ctx.lineTo(x + measuredWith, y - fontSize);
|
||||
}
|
||||
if (/\bline-through\b/.test(view.css.textDecoration)) {
|
||||
this.ctx.moveTo(x, y - fontSize / 3);
|
||||
this.ctx.lineTo(x + measuredWith, y - fontSize / 3);
|
||||
}
|
||||
this.ctx.closePath();
|
||||
this.ctx.strokeStyle = view.css.color;
|
||||
this.ctx.stroke();
|
||||
}
|
||||
}
|
||||
}
|
||||
this.ctx.restore();
|
||||
this._doBorder(view, width, height);
|
||||
}
|
||||
|
||||
_drawAbsRect(view) {
|
||||
this.ctx.save();
|
||||
const {
|
||||
width,
|
||||
height,
|
||||
} = this._preProcess(view);
|
||||
if (GD.api.isGradient(view.css.color)) {
|
||||
GD.api.doGradient(view.css.color, width, height, this.ctx);
|
||||
} else {
|
||||
this.ctx.fillStyle = view.css.color;
|
||||
}
|
||||
const borderRadius = view.css.borderRadius
|
||||
const r = borderRadius ? Math.min(borderRadius.toPx(), width / 2, height / 2) : 0;
|
||||
this.ctx.beginPath();
|
||||
this.ctx.arc(-width / 2 + r, -height / 2 + r, r, 1 * Math.PI, 1.5 * Math.PI); //左上角圆弧
|
||||
this.ctx.lineTo(width / 2 - r, -height / 2);
|
||||
this.ctx.arc(width / 2 - r, -height / 2 + r, r, 1.5 * Math.PI, 2 * Math.PI); // 右上角圆弧
|
||||
this.ctx.lineTo(width / 2, height / 2 - r);
|
||||
this.ctx.arc(width / 2 - r, height / 2 - r, r, 0, 0.5 * Math.PI); // 右下角圆弧
|
||||
this.ctx.lineTo(-width / 2 + r, height / 2);
|
||||
this.ctx.arc(-width / 2 + r, height / 2 - r, r, 0.5 * Math.PI, 1 * Math.PI); // 左下角圆弧
|
||||
this.ctx.closePath();
|
||||
this.ctx.fill();
|
||||
this.ctx.restore();
|
||||
this._doBorder(view, width, height);
|
||||
}
|
||||
|
||||
// shadow 支持 (x, y, blur, color), 不支持 spread
|
||||
// shadow:0px 0px 10px rgba(0,0,0,0.1);
|
||||
_doShadow(view) {
|
||||
if (!view.css || !view.css.shadow) {
|
||||
return;
|
||||
}
|
||||
const box = view.css.shadow.replace(/,\s+/g, ',').split(' ');
|
||||
if (box.length > 4) {
|
||||
console.error('shadow don\'t spread option');
|
||||
return;
|
||||
}
|
||||
this.ctx.shadowOffsetX = parseInt(box[0], 10);
|
||||
this.ctx.shadowOffsetY = parseInt(box[1], 10);
|
||||
this.ctx.shadowBlur = parseInt(box[2], 10);
|
||||
this.ctx.shadowColor = box[3];
|
||||
}
|
||||
|
||||
_getAngle(angle) {
|
||||
return Number(angle) * Math.PI / 180;
|
||||
}
|
||||
}
|
||||
784
static/painter/lib/qrcode.js
Normal file
784
static/painter/lib/qrcode.js
Normal file
@ -0,0 +1,784 @@
|
||||
/* eslint-disable */
|
||||
!(function () {
|
||||
|
||||
// alignment pattern
|
||||
var adelta = [
|
||||
0, 11, 15, 19, 23, 27, 31,
|
||||
16, 18, 20, 22, 24, 26, 28, 20, 22, 24, 24, 26, 28, 28, 22, 24, 24,
|
||||
26, 26, 28, 28, 24, 24, 26, 26, 26, 28, 28, 24, 26, 26, 26, 28, 28
|
||||
];
|
||||
|
||||
// version block
|
||||
var vpat = [
|
||||
0xc94, 0x5bc, 0xa99, 0x4d3, 0xbf6, 0x762, 0x847, 0x60d,
|
||||
0x928, 0xb78, 0x45d, 0xa17, 0x532, 0x9a6, 0x683, 0x8c9,
|
||||
0x7ec, 0xec4, 0x1e1, 0xfab, 0x08e, 0xc1a, 0x33f, 0xd75,
|
||||
0x250, 0x9d5, 0x6f0, 0x8ba, 0x79f, 0xb0b, 0x42e, 0xa64,
|
||||
0x541, 0xc69
|
||||
];
|
||||
|
||||
// final format bits with mask: level << 3 | mask
|
||||
var fmtword = [
|
||||
0x77c4, 0x72f3, 0x7daa, 0x789d, 0x662f, 0x6318, 0x6c41, 0x6976, //L
|
||||
0x5412, 0x5125, 0x5e7c, 0x5b4b, 0x45f9, 0x40ce, 0x4f97, 0x4aa0, //M
|
||||
0x355f, 0x3068, 0x3f31, 0x3a06, 0x24b4, 0x2183, 0x2eda, 0x2bed, //Q
|
||||
0x1689, 0x13be, 0x1ce7, 0x19d0, 0x0762, 0x0255, 0x0d0c, 0x083b //H
|
||||
];
|
||||
|
||||
// 4 per version: number of blocks 1,2; data width; ecc width
|
||||
var eccblocks = [
|
||||
1, 0, 19, 7, 1, 0, 16, 10, 1, 0, 13, 13, 1, 0, 9, 17,
|
||||
1, 0, 34, 10, 1, 0, 28, 16, 1, 0, 22, 22, 1, 0, 16, 28,
|
||||
1, 0, 55, 15, 1, 0, 44, 26, 2, 0, 17, 18, 2, 0, 13, 22,
|
||||
1, 0, 80, 20, 2, 0, 32, 18, 2, 0, 24, 26, 4, 0, 9, 16,
|
||||
1, 0, 108, 26, 2, 0, 43, 24, 2, 2, 15, 18, 2, 2, 11, 22,
|
||||
2, 0, 68, 18, 4, 0, 27, 16, 4, 0, 19, 24, 4, 0, 15, 28,
|
||||
2, 0, 78, 20, 4, 0, 31, 18, 2, 4, 14, 18, 4, 1, 13, 26,
|
||||
2, 0, 97, 24, 2, 2, 38, 22, 4, 2, 18, 22, 4, 2, 14, 26,
|
||||
2, 0, 116, 30, 3, 2, 36, 22, 4, 4, 16, 20, 4, 4, 12, 24,
|
||||
2, 2, 68, 18, 4, 1, 43, 26, 6, 2, 19, 24, 6, 2, 15, 28,
|
||||
4, 0, 81, 20, 1, 4, 50, 30, 4, 4, 22, 28, 3, 8, 12, 24,
|
||||
2, 2, 92, 24, 6, 2, 36, 22, 4, 6, 20, 26, 7, 4, 14, 28,
|
||||
4, 0, 107, 26, 8, 1, 37, 22, 8, 4, 20, 24, 12, 4, 11, 22,
|
||||
3, 1, 115, 30, 4, 5, 40, 24, 11, 5, 16, 20, 11, 5, 12, 24,
|
||||
5, 1, 87, 22, 5, 5, 41, 24, 5, 7, 24, 30, 11, 7, 12, 24,
|
||||
5, 1, 98, 24, 7, 3, 45, 28, 15, 2, 19, 24, 3, 13, 15, 30,
|
||||
1, 5, 107, 28, 10, 1, 46, 28, 1, 15, 22, 28, 2, 17, 14, 28,
|
||||
5, 1, 120, 30, 9, 4, 43, 26, 17, 1, 22, 28, 2, 19, 14, 28,
|
||||
3, 4, 113, 28, 3, 11, 44, 26, 17, 4, 21, 26, 9, 16, 13, 26,
|
||||
3, 5, 107, 28, 3, 13, 41, 26, 15, 5, 24, 30, 15, 10, 15, 28,
|
||||
4, 4, 116, 28, 17, 0, 42, 26, 17, 6, 22, 28, 19, 6, 16, 30,
|
||||
2, 7, 111, 28, 17, 0, 46, 28, 7, 16, 24, 30, 34, 0, 13, 24,
|
||||
4, 5, 121, 30, 4, 14, 47, 28, 11, 14, 24, 30, 16, 14, 15, 30,
|
||||
6, 4, 117, 30, 6, 14, 45, 28, 11, 16, 24, 30, 30, 2, 16, 30,
|
||||
8, 4, 106, 26, 8, 13, 47, 28, 7, 22, 24, 30, 22, 13, 15, 30,
|
||||
10, 2, 114, 28, 19, 4, 46, 28, 28, 6, 22, 28, 33, 4, 16, 30,
|
||||
8, 4, 122, 30, 22, 3, 45, 28, 8, 26, 23, 30, 12, 28, 15, 30,
|
||||
3, 10, 117, 30, 3, 23, 45, 28, 4, 31, 24, 30, 11, 31, 15, 30,
|
||||
7, 7, 116, 30, 21, 7, 45, 28, 1, 37, 23, 30, 19, 26, 15, 30,
|
||||
5, 10, 115, 30, 19, 10, 47, 28, 15, 25, 24, 30, 23, 25, 15, 30,
|
||||
13, 3, 115, 30, 2, 29, 46, 28, 42, 1, 24, 30, 23, 28, 15, 30,
|
||||
17, 0, 115, 30, 10, 23, 46, 28, 10, 35, 24, 30, 19, 35, 15, 30,
|
||||
17, 1, 115, 30, 14, 21, 46, 28, 29, 19, 24, 30, 11, 46, 15, 30,
|
||||
13, 6, 115, 30, 14, 23, 46, 28, 44, 7, 24, 30, 59, 1, 16, 30,
|
||||
12, 7, 121, 30, 12, 26, 47, 28, 39, 14, 24, 30, 22, 41, 15, 30,
|
||||
6, 14, 121, 30, 6, 34, 47, 28, 46, 10, 24, 30, 2, 64, 15, 30,
|
||||
17, 4, 122, 30, 29, 14, 46, 28, 49, 10, 24, 30, 24, 46, 15, 30,
|
||||
4, 18, 122, 30, 13, 32, 46, 28, 48, 14, 24, 30, 42, 32, 15, 30,
|
||||
20, 4, 117, 30, 40, 7, 47, 28, 43, 22, 24, 30, 10, 67, 15, 30,
|
||||
19, 6, 118, 30, 18, 31, 47, 28, 34, 34, 24, 30, 20, 61, 15, 30
|
||||
];
|
||||
|
||||
// Galois field log table
|
||||
var glog = [
|
||||
0xff, 0x00, 0x01, 0x19, 0x02, 0x32, 0x1a, 0xc6, 0x03, 0xdf, 0x33, 0xee, 0x1b, 0x68, 0xc7, 0x4b,
|
||||
0x04, 0x64, 0xe0, 0x0e, 0x34, 0x8d, 0xef, 0x81, 0x1c, 0xc1, 0x69, 0xf8, 0xc8, 0x08, 0x4c, 0x71,
|
||||
0x05, 0x8a, 0x65, 0x2f, 0xe1, 0x24, 0x0f, 0x21, 0x35, 0x93, 0x8e, 0xda, 0xf0, 0x12, 0x82, 0x45,
|
||||
0x1d, 0xb5, 0xc2, 0x7d, 0x6a, 0x27, 0xf9, 0xb9, 0xc9, 0x9a, 0x09, 0x78, 0x4d, 0xe4, 0x72, 0xa6,
|
||||
0x06, 0xbf, 0x8b, 0x62, 0x66, 0xdd, 0x30, 0xfd, 0xe2, 0x98, 0x25, 0xb3, 0x10, 0x91, 0x22, 0x88,
|
||||
0x36, 0xd0, 0x94, 0xce, 0x8f, 0x96, 0xdb, 0xbd, 0xf1, 0xd2, 0x13, 0x5c, 0x83, 0x38, 0x46, 0x40,
|
||||
0x1e, 0x42, 0xb6, 0xa3, 0xc3, 0x48, 0x7e, 0x6e, 0x6b, 0x3a, 0x28, 0x54, 0xfa, 0x85, 0xba, 0x3d,
|
||||
0xca, 0x5e, 0x9b, 0x9f, 0x0a, 0x15, 0x79, 0x2b, 0x4e, 0xd4, 0xe5, 0xac, 0x73, 0xf3, 0xa7, 0x57,
|
||||
0x07, 0x70, 0xc0, 0xf7, 0x8c, 0x80, 0x63, 0x0d, 0x67, 0x4a, 0xde, 0xed, 0x31, 0xc5, 0xfe, 0x18,
|
||||
0xe3, 0xa5, 0x99, 0x77, 0x26, 0xb8, 0xb4, 0x7c, 0x11, 0x44, 0x92, 0xd9, 0x23, 0x20, 0x89, 0x2e,
|
||||
0x37, 0x3f, 0xd1, 0x5b, 0x95, 0xbc, 0xcf, 0xcd, 0x90, 0x87, 0x97, 0xb2, 0xdc, 0xfc, 0xbe, 0x61,
|
||||
0xf2, 0x56, 0xd3, 0xab, 0x14, 0x2a, 0x5d, 0x9e, 0x84, 0x3c, 0x39, 0x53, 0x47, 0x6d, 0x41, 0xa2,
|
||||
0x1f, 0x2d, 0x43, 0xd8, 0xb7, 0x7b, 0xa4, 0x76, 0xc4, 0x17, 0x49, 0xec, 0x7f, 0x0c, 0x6f, 0xf6,
|
||||
0x6c, 0xa1, 0x3b, 0x52, 0x29, 0x9d, 0x55, 0xaa, 0xfb, 0x60, 0x86, 0xb1, 0xbb, 0xcc, 0x3e, 0x5a,
|
||||
0xcb, 0x59, 0x5f, 0xb0, 0x9c, 0xa9, 0xa0, 0x51, 0x0b, 0xf5, 0x16, 0xeb, 0x7a, 0x75, 0x2c, 0xd7,
|
||||
0x4f, 0xae, 0xd5, 0xe9, 0xe6, 0xe7, 0xad, 0xe8, 0x74, 0xd6, 0xf4, 0xea, 0xa8, 0x50, 0x58, 0xaf
|
||||
];
|
||||
|
||||
// Galios field exponent table
|
||||
var gexp = [
|
||||
0x01, 0x02, 0x04, 0x08, 0x10, 0x20, 0x40, 0x80, 0x1d, 0x3a, 0x74, 0xe8, 0xcd, 0x87, 0x13, 0x26,
|
||||
0x4c, 0x98, 0x2d, 0x5a, 0xb4, 0x75, 0xea, 0xc9, 0x8f, 0x03, 0x06, 0x0c, 0x18, 0x30, 0x60, 0xc0,
|
||||
0x9d, 0x27, 0x4e, 0x9c, 0x25, 0x4a, 0x94, 0x35, 0x6a, 0xd4, 0xb5, 0x77, 0xee, 0xc1, 0x9f, 0x23,
|
||||
0x46, 0x8c, 0x05, 0x0a, 0x14, 0x28, 0x50, 0xa0, 0x5d, 0xba, 0x69, 0xd2, 0xb9, 0x6f, 0xde, 0xa1,
|
||||
0x5f, 0xbe, 0x61, 0xc2, 0x99, 0x2f, 0x5e, 0xbc, 0x65, 0xca, 0x89, 0x0f, 0x1e, 0x3c, 0x78, 0xf0,
|
||||
0xfd, 0xe7, 0xd3, 0xbb, 0x6b, 0xd6, 0xb1, 0x7f, 0xfe, 0xe1, 0xdf, 0xa3, 0x5b, 0xb6, 0x71, 0xe2,
|
||||
0xd9, 0xaf, 0x43, 0x86, 0x11, 0x22, 0x44, 0x88, 0x0d, 0x1a, 0x34, 0x68, 0xd0, 0xbd, 0x67, 0xce,
|
||||
0x81, 0x1f, 0x3e, 0x7c, 0xf8, 0xed, 0xc7, 0x93, 0x3b, 0x76, 0xec, 0xc5, 0x97, 0x33, 0x66, 0xcc,
|
||||
0x85, 0x17, 0x2e, 0x5c, 0xb8, 0x6d, 0xda, 0xa9, 0x4f, 0x9e, 0x21, 0x42, 0x84, 0x15, 0x2a, 0x54,
|
||||
0xa8, 0x4d, 0x9a, 0x29, 0x52, 0xa4, 0x55, 0xaa, 0x49, 0x92, 0x39, 0x72, 0xe4, 0xd5, 0xb7, 0x73,
|
||||
0xe6, 0xd1, 0xbf, 0x63, 0xc6, 0x91, 0x3f, 0x7e, 0xfc, 0xe5, 0xd7, 0xb3, 0x7b, 0xf6, 0xf1, 0xff,
|
||||
0xe3, 0xdb, 0xab, 0x4b, 0x96, 0x31, 0x62, 0xc4, 0x95, 0x37, 0x6e, 0xdc, 0xa5, 0x57, 0xae, 0x41,
|
||||
0x82, 0x19, 0x32, 0x64, 0xc8, 0x8d, 0x07, 0x0e, 0x1c, 0x38, 0x70, 0xe0, 0xdd, 0xa7, 0x53, 0xa6,
|
||||
0x51, 0xa2, 0x59, 0xb2, 0x79, 0xf2, 0xf9, 0xef, 0xc3, 0x9b, 0x2b, 0x56, 0xac, 0x45, 0x8a, 0x09,
|
||||
0x12, 0x24, 0x48, 0x90, 0x3d, 0x7a, 0xf4, 0xf5, 0xf7, 0xf3, 0xfb, 0xeb, 0xcb, 0x8b, 0x0b, 0x16,
|
||||
0x2c, 0x58, 0xb0, 0x7d, 0xfa, 0xe9, 0xcf, 0x83, 0x1b, 0x36, 0x6c, 0xd8, 0xad, 0x47, 0x8e, 0x00
|
||||
];
|
||||
|
||||
// Working buffers:
|
||||
// data input and ecc append, image working buffer, fixed part of image, run lengths for badness
|
||||
var strinbuf = [], eccbuf = [], qrframe = [], framask = [], rlens = [];
|
||||
// Control values - width is based on version, last 4 are from table.
|
||||
var version, width, neccblk1, neccblk2, datablkw, eccblkwid;
|
||||
var ecclevel = 2;
|
||||
// set bit to indicate cell in qrframe is immutable. symmetric around diagonal
|
||||
function setmask(x, y) {
|
||||
var bt;
|
||||
if (x > y) {
|
||||
bt = x;
|
||||
x = y;
|
||||
y = bt;
|
||||
}
|
||||
// y*y = 1+3+5...
|
||||
bt = y;
|
||||
bt *= y;
|
||||
bt += y;
|
||||
bt >>= 1;
|
||||
bt += x;
|
||||
framask[bt] = 1;
|
||||
}
|
||||
|
||||
// enter alignment pattern - black to qrframe, white to mask (later black frame merged to mask)
|
||||
function putalign(x, y) {
|
||||
var j;
|
||||
|
||||
qrframe[x + width * y] = 1;
|
||||
for (j = -2; j < 2; j++) {
|
||||
qrframe[(x + j) + width * (y - 2)] = 1;
|
||||
qrframe[(x - 2) + width * (y + j + 1)] = 1;
|
||||
qrframe[(x + 2) + width * (y + j)] = 1;
|
||||
qrframe[(x + j + 1) + width * (y + 2)] = 1;
|
||||
}
|
||||
for (j = 0; j < 2; j++) {
|
||||
setmask(x - 1, y + j);
|
||||
setmask(x + 1, y - j);
|
||||
setmask(x - j, y - 1);
|
||||
setmask(x + j, y + 1);
|
||||
}
|
||||
}
|
||||
|
||||
//========================================================================
|
||||
// Reed Solomon error correction
|
||||
// exponentiation mod N
|
||||
function modnn(x) {
|
||||
while (x >= 255) {
|
||||
x -= 255;
|
||||
x = (x >> 8) + (x & 255);
|
||||
}
|
||||
return x;
|
||||
}
|
||||
|
||||
var genpoly = [];
|
||||
|
||||
// Calculate and append ECC data to data block. Block is in strinbuf, indexes to buffers given.
|
||||
function appendrs(data, dlen, ecbuf, eclen) {
|
||||
var i, j, fb;
|
||||
|
||||
for (i = 0; i < eclen; i++)
|
||||
strinbuf[ecbuf + i] = 0;
|
||||
for (i = 0; i < dlen; i++) {
|
||||
fb = glog[strinbuf[data + i] ^ strinbuf[ecbuf]];
|
||||
if (fb != 255) /* fb term is non-zero */
|
||||
for (j = 1; j < eclen; j++)
|
||||
strinbuf[ecbuf + j - 1] = strinbuf[ecbuf + j] ^ gexp[modnn(fb + genpoly[eclen - j])];
|
||||
else
|
||||
for (j = ecbuf; j < ecbuf + eclen; j++)
|
||||
strinbuf[j] = strinbuf[j + 1];
|
||||
strinbuf[ecbuf + eclen - 1] = fb == 255 ? 0 : gexp[modnn(fb + genpoly[0])];
|
||||
}
|
||||
}
|
||||
|
||||
//========================================================================
|
||||
// Frame data insert following the path rules
|
||||
|
||||
// check mask - since symmetrical use half.
|
||||
function ismasked(x, y) {
|
||||
var bt;
|
||||
if (x > y) {
|
||||
bt = x;
|
||||
x = y;
|
||||
y = bt;
|
||||
}
|
||||
bt = y;
|
||||
bt += y * y;
|
||||
bt >>= 1;
|
||||
bt += x;
|
||||
return framask[bt];
|
||||
}
|
||||
|
||||
//========================================================================
|
||||
// Apply the selected mask out of the 8.
|
||||
function applymask(m) {
|
||||
var x, y, r3x, r3y;
|
||||
|
||||
switch (m) {
|
||||
case 0:
|
||||
for (y = 0; y < width; y++)
|
||||
for (x = 0; x < width; x++)
|
||||
if (!((x + y) & 1) && !ismasked(x, y))
|
||||
qrframe[x + y * width] ^= 1;
|
||||
break;
|
||||
case 1:
|
||||
for (y = 0; y < width; y++)
|
||||
for (x = 0; x < width; x++)
|
||||
if (!(y & 1) && !ismasked(x, y))
|
||||
qrframe[x + y * width] ^= 1;
|
||||
break;
|
||||
case 2:
|
||||
for (y = 0; y < width; y++)
|
||||
for (r3x = 0, x = 0; x < width; x++ , r3x++) {
|
||||
if (r3x == 3)
|
||||
r3x = 0;
|
||||
if (!r3x && !ismasked(x, y))
|
||||
qrframe[x + y * width] ^= 1;
|
||||
}
|
||||
break;
|
||||
case 3:
|
||||
for (r3y = 0, y = 0; y < width; y++ , r3y++) {
|
||||
if (r3y == 3)
|
||||
r3y = 0;
|
||||
for (r3x = r3y, x = 0; x < width; x++ , r3x++) {
|
||||
if (r3x == 3)
|
||||
r3x = 0;
|
||||
if (!r3x && !ismasked(x, y))
|
||||
qrframe[x + y * width] ^= 1;
|
||||
}
|
||||
}
|
||||
break;
|
||||
case 4:
|
||||
for (y = 0; y < width; y++)
|
||||
for (r3x = 0, r3y = ((y >> 1) & 1), x = 0; x < width; x++ , r3x++) {
|
||||
if (r3x == 3) {
|
||||
r3x = 0;
|
||||
r3y = !r3y;
|
||||
}
|
||||
if (!r3y && !ismasked(x, y))
|
||||
qrframe[x + y * width] ^= 1;
|
||||
}
|
||||
break;
|
||||
case 5:
|
||||
for (r3y = 0, y = 0; y < width; y++ , r3y++) {
|
||||
if (r3y == 3)
|
||||
r3y = 0;
|
||||
for (r3x = 0, x = 0; x < width; x++ , r3x++) {
|
||||
if (r3x == 3)
|
||||
r3x = 0;
|
||||
if (!((x & y & 1) + !(!r3x | !r3y)) && !ismasked(x, y))
|
||||
qrframe[x + y * width] ^= 1;
|
||||
}
|
||||
}
|
||||
break;
|
||||
case 6:
|
||||
for (r3y = 0, y = 0; y < width; y++ , r3y++) {
|
||||
if (r3y == 3)
|
||||
r3y = 0;
|
||||
for (r3x = 0, x = 0; x < width; x++ , r3x++) {
|
||||
if (r3x == 3)
|
||||
r3x = 0;
|
||||
if (!(((x & y & 1) + (r3x && (r3x == r3y))) & 1) && !ismasked(x, y))
|
||||
qrframe[x + y * width] ^= 1;
|
||||
}
|
||||
}
|
||||
break;
|
||||
case 7:
|
||||
for (r3y = 0, y = 0; y < width; y++ , r3y++) {
|
||||
if (r3y == 3)
|
||||
r3y = 0;
|
||||
for (r3x = 0, x = 0; x < width; x++ , r3x++) {
|
||||
if (r3x == 3)
|
||||
r3x = 0;
|
||||
if (!(((r3x && (r3x == r3y)) + ((x + y) & 1)) & 1) && !ismasked(x, y))
|
||||
qrframe[x + y * width] ^= 1;
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Badness coefficients.
|
||||
var N1 = 3, N2 = 3, N3 = 40, N4 = 10;
|
||||
|
||||
// Using the table of the length of each run, calculate the amount of bad image
|
||||
// - long runs or those that look like finders; called twice, once each for X and Y
|
||||
function badruns(length) {
|
||||
var i;
|
||||
var runsbad = 0;
|
||||
for (i = 0; i <= length; i++)
|
||||
if (rlens[i] >= 5)
|
||||
runsbad += N1 + rlens[i] - 5;
|
||||
// BwBBBwB as in finder
|
||||
for (i = 3; i < length - 1; i += 2)
|
||||
if (rlens[i - 2] == rlens[i + 2]
|
||||
&& rlens[i + 2] == rlens[i - 1]
|
||||
&& rlens[i - 1] == rlens[i + 1]
|
||||
&& rlens[i - 1] * 3 == rlens[i]
|
||||
// white around the black pattern? Not part of spec
|
||||
&& (rlens[i - 3] == 0 // beginning
|
||||
|| i + 3 > length // end
|
||||
|| rlens[i - 3] * 3 >= rlens[i] * 4 || rlens[i + 3] * 3 >= rlens[i] * 4)
|
||||
)
|
||||
runsbad += N3;
|
||||
return runsbad;
|
||||
}
|
||||
|
||||
// Calculate how bad the masked image is - blocks, imbalance, runs, or finders.
|
||||
function badcheck() {
|
||||
var x, y, h, b, b1;
|
||||
var thisbad = 0;
|
||||
var bw = 0;
|
||||
|
||||
// blocks of same color.
|
||||
for (y = 0; y < width - 1; y++)
|
||||
for (x = 0; x < width - 1; x++)
|
||||
if ((qrframe[x + width * y] && qrframe[(x + 1) + width * y]
|
||||
&& qrframe[x + width * (y + 1)] && qrframe[(x + 1) + width * (y + 1)]) // all black
|
||||
|| !(qrframe[x + width * y] || qrframe[(x + 1) + width * y]
|
||||
|| qrframe[x + width * (y + 1)] || qrframe[(x + 1) + width * (y + 1)])) // all white
|
||||
thisbad += N2;
|
||||
|
||||
// X runs
|
||||
for (y = 0; y < width; y++) {
|
||||
rlens[0] = 0;
|
||||
for (h = b = x = 0; x < width; x++) {
|
||||
if ((b1 = qrframe[x + width * y]) == b)
|
||||
rlens[h]++;
|
||||
else
|
||||
rlens[++h] = 1;
|
||||
b = b1;
|
||||
bw += b ? 1 : -1;
|
||||
}
|
||||
thisbad += badruns(h);
|
||||
}
|
||||
|
||||
// black/white imbalance
|
||||
if (bw < 0)
|
||||
bw = -bw;
|
||||
|
||||
var big = bw;
|
||||
var count = 0;
|
||||
big += big << 2;
|
||||
big <<= 1;
|
||||
while (big > width * width)
|
||||
big -= width * width, count++;
|
||||
thisbad += count * N4;
|
||||
|
||||
// Y runs
|
||||
for (x = 0; x < width; x++) {
|
||||
rlens[0] = 0;
|
||||
for (h = b = y = 0; y < width; y++) {
|
||||
if ((b1 = qrframe[x + width * y]) == b)
|
||||
rlens[h]++;
|
||||
else
|
||||
rlens[++h] = 1;
|
||||
b = b1;
|
||||
}
|
||||
thisbad += badruns(h);
|
||||
}
|
||||
return thisbad;
|
||||
}
|
||||
|
||||
function genframe(instring) {
|
||||
var x, y, k, t, v, i, j, m;
|
||||
|
||||
// find the smallest version that fits the string
|
||||
t = instring.length;
|
||||
version = 0;
|
||||
do {
|
||||
version++;
|
||||
k = (ecclevel - 1) * 4 + (version - 1) * 16;
|
||||
neccblk1 = eccblocks[k++];
|
||||
neccblk2 = eccblocks[k++];
|
||||
datablkw = eccblocks[k++];
|
||||
eccblkwid = eccblocks[k];
|
||||
k = datablkw * (neccblk1 + neccblk2) + neccblk2 - 3 + (version <= 9);
|
||||
if (t <= k)
|
||||
break;
|
||||
} while (version < 40);
|
||||
|
||||
// FIXME - insure that it fits insted of being truncated
|
||||
width = 17 + 4 * version;
|
||||
|
||||
// allocate, clear and setup data structures
|
||||
v = datablkw + (datablkw + eccblkwid) * (neccblk1 + neccblk2) + neccblk2;
|
||||
for (t = 0; t < v; t++)
|
||||
eccbuf[t] = 0;
|
||||
strinbuf = instring.slice(0);
|
||||
|
||||
for (t = 0; t < width * width; t++)
|
||||
qrframe[t] = 0;
|
||||
|
||||
for (t = 0; t < (width * (width + 1) + 1) / 2; t++)
|
||||
framask[t] = 0;
|
||||
|
||||
// insert finders - black to frame, white to mask
|
||||
for (t = 0; t < 3; t++) {
|
||||
k = 0;
|
||||
y = 0;
|
||||
if (t == 1)
|
||||
k = (width - 7);
|
||||
if (t == 2)
|
||||
y = (width - 7);
|
||||
qrframe[(y + 3) + width * (k + 3)] = 1;
|
||||
for (x = 0; x < 6; x++) {
|
||||
qrframe[(y + x) + width * k] = 1;
|
||||
qrframe[y + width * (k + x + 1)] = 1;
|
||||
qrframe[(y + 6) + width * (k + x)] = 1;
|
||||
qrframe[(y + x + 1) + width * (k + 6)] = 1;
|
||||
}
|
||||
for (x = 1; x < 5; x++) {
|
||||
setmask(y + x, k + 1);
|
||||
setmask(y + 1, k + x + 1);
|
||||
setmask(y + 5, k + x);
|
||||
setmask(y + x + 1, k + 5);
|
||||
}
|
||||
for (x = 2; x < 4; x++) {
|
||||
qrframe[(y + x) + width * (k + 2)] = 1;
|
||||
qrframe[(y + 2) + width * (k + x + 1)] = 1;
|
||||
qrframe[(y + 4) + width * (k + x)] = 1;
|
||||
qrframe[(y + x + 1) + width * (k + 4)] = 1;
|
||||
}
|
||||
}
|
||||
|
||||
// alignment blocks
|
||||
if (version > 1) {
|
||||
t = adelta[version];
|
||||
y = width - 7;
|
||||
for (; ;) {
|
||||
x = width - 7;
|
||||
while (x > t - 3) {
|
||||
putalign(x, y);
|
||||
if (x < t)
|
||||
break;
|
||||
x -= t;
|
||||
}
|
||||
if (y <= t + 9)
|
||||
break;
|
||||
y -= t;
|
||||
putalign(6, y);
|
||||
putalign(y, 6);
|
||||
}
|
||||
}
|
||||
|
||||
// single black
|
||||
qrframe[8 + width * (width - 8)] = 1;
|
||||
|
||||
// timing gap - mask only
|
||||
for (y = 0; y < 7; y++) {
|
||||
setmask(7, y);
|
||||
setmask(width - 8, y);
|
||||
setmask(7, y + width - 7);
|
||||
}
|
||||
for (x = 0; x < 8; x++) {
|
||||
setmask(x, 7);
|
||||
setmask(x + width - 8, 7);
|
||||
setmask(x, width - 8);
|
||||
}
|
||||
|
||||
// reserve mask-format area
|
||||
for (x = 0; x < 9; x++)
|
||||
setmask(x, 8);
|
||||
for (x = 0; x < 8; x++) {
|
||||
setmask(x + width - 8, 8);
|
||||
setmask(8, x);
|
||||
}
|
||||
for (y = 0; y < 7; y++)
|
||||
setmask(8, y + width - 7);
|
||||
|
||||
// timing row/col
|
||||
for (x = 0; x < width - 14; x++)
|
||||
if (x & 1) {
|
||||
setmask(8 + x, 6);
|
||||
setmask(6, 8 + x);
|
||||
}
|
||||
else {
|
||||
qrframe[(8 + x) + width * 6] = 1;
|
||||
qrframe[6 + width * (8 + x)] = 1;
|
||||
}
|
||||
|
||||
// version block
|
||||
if (version > 6) {
|
||||
t = vpat[version - 7];
|
||||
k = 17;
|
||||
for (x = 0; x < 6; x++)
|
||||
for (y = 0; y < 3; y++ , k--)
|
||||
if (1 & (k > 11 ? version >> (k - 12) : t >> k)) {
|
||||
qrframe[(5 - x) + width * (2 - y + width - 11)] = 1;
|
||||
qrframe[(2 - y + width - 11) + width * (5 - x)] = 1;
|
||||
}
|
||||
else {
|
||||
setmask(5 - x, 2 - y + width - 11);
|
||||
setmask(2 - y + width - 11, 5 - x);
|
||||
}
|
||||
}
|
||||
|
||||
// sync mask bits - only set above for white spaces, so add in black bits
|
||||
for (y = 0; y < width; y++)
|
||||
for (x = 0; x <= y; x++)
|
||||
if (qrframe[x + width * y])
|
||||
setmask(x, y);
|
||||
|
||||
// convert string to bitstream
|
||||
// 8 bit data to QR-coded 8 bit data (numeric or alphanum, or kanji not supported)
|
||||
v = strinbuf.length;
|
||||
|
||||
// string to array
|
||||
for (i = 0; i < v; i++)
|
||||
eccbuf[i] = strinbuf.charCodeAt(i);
|
||||
strinbuf = eccbuf.slice(0);
|
||||
|
||||
// calculate max string length
|
||||
x = datablkw * (neccblk1 + neccblk2) + neccblk2;
|
||||
if (v >= x - 2) {
|
||||
v = x - 2;
|
||||
if (version > 9)
|
||||
v--;
|
||||
}
|
||||
|
||||
// shift and repack to insert length prefix
|
||||
i = v;
|
||||
if (version > 9) {
|
||||
strinbuf[i + 2] = 0;
|
||||
strinbuf[i + 3] = 0;
|
||||
while (i--) {
|
||||
t = strinbuf[i];
|
||||
strinbuf[i + 3] |= 255 & (t << 4);
|
||||
strinbuf[i + 2] = t >> 4;
|
||||
}
|
||||
strinbuf[2] |= 255 & (v << 4);
|
||||
strinbuf[1] = v >> 4;
|
||||
strinbuf[0] = 0x40 | (v >> 12);
|
||||
}
|
||||
else {
|
||||
strinbuf[i + 1] = 0;
|
||||
strinbuf[i + 2] = 0;
|
||||
while (i--) {
|
||||
t = strinbuf[i];
|
||||
strinbuf[i + 2] |= 255 & (t << 4);
|
||||
strinbuf[i + 1] = t >> 4;
|
||||
}
|
||||
strinbuf[1] |= 255 & (v << 4);
|
||||
strinbuf[0] = 0x40 | (v >> 4);
|
||||
}
|
||||
// fill to end with pad pattern
|
||||
i = v + 3 - (version < 10);
|
||||
while (i < x) {
|
||||
strinbuf[i++] = 0xec;
|
||||
// buffer has room if (i == x) break;
|
||||
strinbuf[i++] = 0x11;
|
||||
}
|
||||
|
||||
// calculate and append ECC
|
||||
|
||||
// calculate generator polynomial
|
||||
genpoly[0] = 1;
|
||||
for (i = 0; i < eccblkwid; i++) {
|
||||
genpoly[i + 1] = 1;
|
||||
for (j = i; j > 0; j--)
|
||||
genpoly[j] = genpoly[j]
|
||||
? genpoly[j - 1] ^ gexp[modnn(glog[genpoly[j]] + i)] : genpoly[j - 1];
|
||||
genpoly[0] = gexp[modnn(glog[genpoly[0]] + i)];
|
||||
}
|
||||
for (i = 0; i <= eccblkwid; i++)
|
||||
genpoly[i] = glog[genpoly[i]]; // use logs for genpoly[] to save calc step
|
||||
|
||||
// append ecc to data buffer
|
||||
k = x;
|
||||
y = 0;
|
||||
for (i = 0; i < neccblk1; i++) {
|
||||
appendrs(y, datablkw, k, eccblkwid);
|
||||
y += datablkw;
|
||||
k += eccblkwid;
|
||||
}
|
||||
for (i = 0; i < neccblk2; i++) {
|
||||
appendrs(y, datablkw + 1, k, eccblkwid);
|
||||
y += datablkw + 1;
|
||||
k += eccblkwid;
|
||||
}
|
||||
// interleave blocks
|
||||
y = 0;
|
||||
for (i = 0; i < datablkw; i++) {
|
||||
for (j = 0; j < neccblk1; j++)
|
||||
eccbuf[y++] = strinbuf[i + j * datablkw];
|
||||
for (j = 0; j < neccblk2; j++)
|
||||
eccbuf[y++] = strinbuf[(neccblk1 * datablkw) + i + (j * (datablkw + 1))];
|
||||
}
|
||||
for (j = 0; j < neccblk2; j++)
|
||||
eccbuf[y++] = strinbuf[(neccblk1 * datablkw) + i + (j * (datablkw + 1))];
|
||||
for (i = 0; i < eccblkwid; i++)
|
||||
for (j = 0; j < neccblk1 + neccblk2; j++)
|
||||
eccbuf[y++] = strinbuf[x + i + j * eccblkwid];
|
||||
strinbuf = eccbuf;
|
||||
|
||||
// pack bits into frame avoiding masked area.
|
||||
x = y = width - 1;
|
||||
k = v = 1; // up, minus
|
||||
/* inteleaved data and ecc codes */
|
||||
m = (datablkw + eccblkwid) * (neccblk1 + neccblk2) + neccblk2;
|
||||
for (i = 0; i < m; i++) {
|
||||
t = strinbuf[i];
|
||||
for (j = 0; j < 8; j++ , t <<= 1) {
|
||||
if (0x80 & t)
|
||||
qrframe[x + width * y] = 1;
|
||||
do { // find next fill position
|
||||
if (v)
|
||||
x--;
|
||||
else {
|
||||
x++;
|
||||
if (k) {
|
||||
if (y != 0)
|
||||
y--;
|
||||
else {
|
||||
x -= 2;
|
||||
k = !k;
|
||||
if (x == 6) {
|
||||
x--;
|
||||
y = 9;
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (y != width - 1)
|
||||
y++;
|
||||
else {
|
||||
x -= 2;
|
||||
k = !k;
|
||||
if (x == 6) {
|
||||
x--;
|
||||
y -= 8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
v = !v;
|
||||
} while (ismasked(x, y));
|
||||
}
|
||||
}
|
||||
|
||||
// save pre-mask copy of frame
|
||||
strinbuf = qrframe.slice(0);
|
||||
t = 0; // best
|
||||
y = 30000; // demerit
|
||||
// for instead of while since in original arduino code
|
||||
// if an early mask was "good enough" it wouldn't try for a better one
|
||||
// since they get more complex and take longer.
|
||||
for (k = 0; k < 8; k++) {
|
||||
applymask(k); // returns black-white imbalance
|
||||
x = badcheck();
|
||||
if (x < y) { // current mask better than previous best?
|
||||
y = x;
|
||||
t = k;
|
||||
}
|
||||
if (t == 7)
|
||||
break; // don't increment i to a void redoing mask
|
||||
qrframe = strinbuf.slice(0); // reset for next pass
|
||||
}
|
||||
if (t != k) // redo best mask - none good enough, last wasn't t
|
||||
applymask(t);
|
||||
|
||||
// add in final mask/ecclevel bytes
|
||||
y = fmtword[t + ((ecclevel - 1) << 3)];
|
||||
// low byte
|
||||
for (k = 0; k < 8; k++ , y >>= 1)
|
||||
if (y & 1) {
|
||||
qrframe[(width - 1 - k) + width * 8] = 1;
|
||||
if (k < 6)
|
||||
qrframe[8 + width * k] = 1;
|
||||
else
|
||||
qrframe[8 + width * (k + 1)] = 1;
|
||||
}
|
||||
// high byte
|
||||
for (k = 0; k < 7; k++ , y >>= 1)
|
||||
if (y & 1) {
|
||||
qrframe[8 + width * (width - 7 + k)] = 1;
|
||||
if (k)
|
||||
qrframe[(6 - k) + width * 8] = 1;
|
||||
else
|
||||
qrframe[7 + width * 8] = 1;
|
||||
}
|
||||
return qrframe;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
var _canvas = null;
|
||||
|
||||
var api = {
|
||||
|
||||
get ecclevel() {
|
||||
return ecclevel;
|
||||
},
|
||||
|
||||
set ecclevel(val) {
|
||||
ecclevel = val;
|
||||
},
|
||||
|
||||
get size() {
|
||||
return _size;
|
||||
},
|
||||
|
||||
set size(val) {
|
||||
_size = val
|
||||
},
|
||||
|
||||
get canvas() {
|
||||
return _canvas;
|
||||
},
|
||||
|
||||
set canvas(el) {
|
||||
_canvas = el;
|
||||
},
|
||||
|
||||
getFrame: function (string) {
|
||||
return genframe(string);
|
||||
},
|
||||
//这里的utf16to8(str)是对Text中的字符串进行转码，让其支持中文
|
||||
utf16to8: function (str) {
|
||||
var out, i, len, c;
|
||||
|
||||
out = "";
|
||||
len = str.length;
|
||||
for (i = 0; i < len; i++) {
|
||||
c = str.charCodeAt(i);
|
||||
if ((c >= 0x0001) && (c <= 0x007F)) {
|
||||
out += str.charAt(i);
|
||||
} else if (c > 0x07FF) {
|
||||
out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
|
||||
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
|
||||
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
|
||||
} else {
|
||||
out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
|
||||
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
|
||||
}
|
||||
}
|
||||
return out;
|
||||
},
|
||||
/**
|
||||
* 新增$this参数，传入组件的this,兼容在组件中生成
|
||||
* @param bg 目前只能设置颜色值
|
||||
*/
|
||||
draw: function (str, ctx, startX, startY, cavW, cavH, bg, color, $this, ecc) {
|
||||
var that = this;
|
||||
ecclevel = ecc || ecclevel;
|
||||
if (!ctx) {
|
||||
console.warn('No canvas provided to draw QR code in!')
|
||||
return;
|
||||
}
|
||||
var size = Math.min(cavW, cavH);
|
||||
str = that.utf16to8(str);//增加中文显示
|
||||
|
||||
var frame = that.getFrame(str);
|
||||
var px = size / width;
|
||||
if (bg) {
|
||||
ctx.setFillStyle(bg)
|
||||
ctx.fillRect(startX, startY, cavW, cavW);
|
||||
}
|
||||
ctx.setFillStyle(color || 'black');
|
||||
for (var i = 0; i < width; i++) {
|
||||
for (var j = 0; j < width; j++) {
|
||||
if (frame[j * width + i]) {
|
||||
ctx.fillRect(startX + px * i, startY + px * j, px, px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
module.exports = { api }
|
||||
// exports.draw = api;
|
||||
|
||||
})();
|
||||
68
static/painter/lib/util.js
Normal file
68
static/painter/lib/util.js
Normal file
@ -0,0 +1,68 @@
|
||||
|
||||
function isValidUrl(url) {
|
||||
return /(ht|f)tp(s?):\/\/([^ \\/]*\.)+[^ \\/]*(:[0-9]+)?\/?/.test(url);
|
||||
}
|
||||
|
||||
/**
|
||||
* 深度对比两个对象是否一致
|
||||
* from: https://github.com/epoberezkin/fast-deep-equal
|
||||
* @param {Object} a 对象a
|
||||
* @param {Object} b 对象b
|
||||
* @return {Boolean} 是否相同
|
||||
*/
|
||||
/* eslint-disable */
|
||||
function equal(a, b) {
|
||||
if (a === b) return true;
|
||||
|
||||
if (a && b && typeof a == 'object' && typeof b == 'object') {
|
||||
var arrA = Array.isArray(a)
|
||||
, arrB = Array.isArray(b)
|
||||
, i
|
||||
, length
|
||||
, key;
|
||||
|
||||
if (arrA && arrB) {
|
||||
length = a.length;
|
||||
if (length != b.length) return false;
|
||||
for (i = length; i-- !== 0;)
|
||||
if (!equal(a[i], b[i])) return false;
|
||||
return true;
|
||||
}
|
||||
|
||||
if (arrA != arrB) return false;
|
||||
|
||||
var dateA = a instanceof Date
|
||||
, dateB = b instanceof Date;
|
||||
if (dateA != dateB) return false;
|
||||
if (dateA && dateB) return a.getTime() == b.getTime();
|
||||
|
||||
var regexpA = a instanceof RegExp
|
||||
, regexpB = b instanceof RegExp;
|
||||
if (regexpA != regexpB) return false;
|
||||
if (regexpA && regexpB) return a.toString() == b.toString();
|
||||
|
||||
var keys = Object.keys(a);
|
||||
length = keys.length;
|
||||
|
||||
if (length !== Object.keys(b).length)
|
||||
return false;
|
||||
|
||||
for (i = length; i-- !== 0;)
|
||||
if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
|
||||
|
||||
for (i = length; i-- !== 0;) {
|
||||
key = keys[i];
|
||||
if (!equal(a[key], b[key])) return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
return a!==a && b!==b;
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
isValidUrl,
|
||||
equal
|
||||
};
|
||||
|
||||
258
static/painter/painter.js
Normal file
258
static/painter/painter.js
Normal file
@ -0,0 +1,258 @@
|
||||
import Pen from './lib/pen';
|
||||
import Downloader from './lib/downloader';
|
||||
|
||||
const util = require('./lib/util');
|
||||
|
||||
const downloader = new Downloader();
|
||||
|
||||
// 最大尝试的绘制次数
|
||||
const MAX_PAINT_COUNT = 5;
|
||||
Component({
|
||||
canvasWidthInPx: 0,
|
||||
canvasHeightInPx: 0,
|
||||
paintCount: 0,
|
||||
/**
|
||||
* 组件的属性列表
|
||||
*/
|
||||
properties: {
|
||||
customStyle: {
|
||||
type: String,
|
||||
},
|
||||
palette: {
|
||||
type: Object,
|
||||
observer: function (newVal, oldVal) {
|
||||
if (this.isNeedRefresh(newVal, oldVal)) {
|
||||
this.paintCount = 0;
|
||||
this.startPaint();
|
||||
}
|
||||
},
|
||||
},
|
||||
widthPixels: {
|
||||
type: Number,
|
||||
value: 0
|
||||
},
|
||||
// 启用脏检查，默认 false
|
||||
dirty: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
},
|
||||
|
||||
data: {
|
||||
picURL: '',
|
||||
showCanvas: true,
|
||||
painterStyle: '',
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 判断一个 object 是否为 空
|
||||
* @param {object} object
|
||||
*/
|
||||
isEmpty(object) {
|
||||
for (const i in object) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
|
||||
isNeedRefresh(newVal, oldVal) {
|
||||
if (!newVal || this.isEmpty(newVal) || (this.data.dirty && util.equal(newVal, oldVal))) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
|
||||
startPaint() {
|
||||
if (this.isEmpty(this.properties.palette)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!(getApp().systemInfo && getApp().systemInfo.screenWidth)) {
|
||||
try {
|
||||
getApp().systemInfo = wx.getSystemInfoSync();
|
||||
} catch (e) {
|
||||
const error = `Painter get system info failed, ${JSON.stringify(e)}`;
|
||||
that.triggerEvent('imgErr', {
|
||||
error: error
|
||||
});
|
||||
console.error(error);
|
||||
return;
|
||||
}
|
||||
}
|
||||
let screenK = getApp().systemInfo.screenWidth / 750;
|
||||
setStringPrototype(screenK, 1);
|
||||
|
||||
this.downloadImages().then((palette) => {
|
||||
const {
|
||||
width,
|
||||
height
|
||||
} = palette;
|
||||
|
||||
if (!width || !height) {
|
||||
console.error(`You should set width and height correctly for painter, width: ${width}, height: ${height}`);
|
||||
return;
|
||||
}
|
||||
this.canvasWidthInPx = width.toPx();
|
||||
if (this.properties.widthPixels) {
|
||||
// 如果重新设置过像素宽度，则重新设置比例
|
||||
setStringPrototype(screenK, this.properties.widthPixels / this.canvasWidthInPx)
|
||||
this.canvasWidthInPx = this.properties.widthPixels
|
||||
}
|
||||
|
||||
this.canvasHeightInPx = height.toPx();
|
||||
this.setData({
|
||||
painterStyle: `width:${this.canvasWidthInPx}px;height:${this.canvasHeightInPx}px;`,
|
||||
});
|
||||
const ctx = wx.createCanvasContext('k-canvas', this);
|
||||
const pen = new Pen(ctx, palette);
|
||||
pen.paint(() => {
|
||||
this.saveImgToLocal();
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
downloadImages() {
|
||||
return new Promise((resolve, reject) => {
|
||||
let preCount = 0;
|
||||
let completeCount = 0;
|
||||
const paletteCopy = JSON.parse(JSON.stringify(this.properties.palette));
|
||||
if (paletteCopy.background) {
|
||||
preCount++;
|
||||
downloader.download(paletteCopy.background).then((path) => {
|
||||
paletteCopy.background = path;
|
||||
completeCount++;
|
||||
if (preCount === completeCount) {
|
||||
resolve(paletteCopy);
|
||||
}
|
||||
}, () => {
|
||||
completeCount++;
|
||||
if (preCount === completeCount) {
|
||||
resolve(paletteCopy);
|
||||
}
|
||||
});
|
||||
}
|
||||
if (paletteCopy.views) {
|
||||
for (const view of paletteCopy.views) {
|
||||
if (view && view.type === 'image' && view.url) {
|
||||
preCount++;
|
||||
/* eslint-disable no-loop-func */
|
||||
downloader.download(view.url).then((path) => {
|
||||
view.url = path;
|
||||
wx.getImageInfo({
|
||||
src: view.url,
|
||||
success: (res) => {
|
||||
// 获得一下图片信息，供后续裁减使用
|
||||
view.sWidth = res.width;
|
||||
view.sHeight = res.height;
|
||||
},
|
||||
fail: (error) => {
|
||||
// 如果图片坏了，则直接置空，防止坑爹的 canvas 画崩溃了
|
||||
view.url = "";
|
||||
console.error(`getImageInfo ${view.url} failed, ${JSON.stringify(error)}`);
|
||||
},
|
||||
complete: () => {
|
||||
completeCount++;
|
||||
if (preCount === completeCount) {
|
||||
resolve(paletteCopy);
|
||||
}
|
||||
},
|
||||
});
|
||||
}, () => {
|
||||
completeCount++;
|
||||
if (preCount === completeCount) {
|
||||
resolve(paletteCopy);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
if (preCount === 0) {
|
||||
resolve(paletteCopy);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
saveImgToLocal() {
|
||||
const that = this;
|
||||
setTimeout(() => {
|
||||
wx.canvasToTempFilePath({
|
||||
canvasId: 'k-canvas',
|
||||
success: function (res) {
|
||||
that.getImageInfo(res.tempFilePath);
|
||||
},
|
||||
fail: function (error) {
|
||||
console.error(`canvasToTempFilePath failed, ${JSON.stringify(error)}`);
|
||||
that.triggerEvent('imgErr', {
|
||||
error: error
|
||||
});
|
||||
},
|
||||
}, this);
|
||||
}, 300);
|
||||
},
|
||||
|
||||
getImageInfo(filePath) {
|
||||
const that = this;
|
||||
wx.getImageInfo({
|
||||
src: filePath,
|
||||
success: (infoRes) => {
|
||||
if (that.paintCount > MAX_PAINT_COUNT) {
|
||||
const error = `The result is always fault, even we tried ${MAX_PAINT_COUNT} times`;
|
||||
console.error(error);
|
||||
that.triggerEvent('imgErr', {
|
||||
error: error
|
||||
});
|
||||
return;
|
||||
}
|
||||
// 比例相符时才证明绘制成功，否则进行强制重绘制
|
||||
if (Math.abs((infoRes.width * that.canvasHeightInPx - that.canvasWidthInPx * infoRes.height) / (infoRes.height * that.canvasHeightInPx)) < 0.01) {
|
||||
that.triggerEvent('imgOK', {
|
||||
path: filePath
|
||||
});
|
||||
} else {
|
||||
that.startPaint();
|
||||
}
|
||||
that.paintCount++;
|
||||
},
|
||||
fail: (error) => {
|
||||
console.error(`getImageInfo failed, ${JSON.stringify(error)}`);
|
||||
that.triggerEvent('imgErr', {
|
||||
error: error
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
function setStringPrototype(screenK, scale) {
|
||||
/* eslint-disable no-extend-native */
|
||||
/**
|
||||
* 是否支持负数
|
||||
* @param {Boolean} minus 是否支持负数
|
||||
*/
|
||||
String.prototype.toPx = function toPx(minus) {
|
||||
let reg;
|
||||
if (minus) {
|
||||
reg = /^-?[0-9]+([.]{1}[0-9]+){0,1}(rpx|px)$/g;
|
||||
} else {
|
||||
reg = /^[0-9]+([.]{1}[0-9]+){0,1}(rpx|px)$/g;
|
||||
}
|
||||
const results = reg.exec(this);
|
||||
if (!this || !results) {
|
||||
console.error(`The size: ${this} is illegal`);
|
||||
return 0;
|
||||
}
|
||||
const unit = results[2];
|
||||
const value = parseFloat(this);
|
||||
|
||||
let res = 0;
|
||||
if (unit === 'rpx') {
|
||||
res = Math.round(value * screenK * (scale || 1));
|
||||
} else if (unit === 'px') {
|
||||
res = Math.round(value * (scale || 1));
|
||||
}
|
||||
return res;
|
||||
};
|
||||
}
|
||||
4
static/painter/painter.json
Normal file
4
static/painter/painter.json
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
1
static/painter/painter.wxml
Normal file
1
static/painter/painter.wxml
Normal file
@ -0,0 +1 @@
|
||||
<canvas canvas-id="k-canvas" style="{{painterStyle}}{{customStyle}}" />
|
||||
BIN
static/tabs/home-active.png
Normal file
BIN
static/tabs/home-active.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 614 B |
BIN
static/tabs/home.png
Normal file
BIN
static/tabs/home.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 474 B |
BIN
static/tabs/orders-active.png
Normal file
BIN
static/tabs/orders-active.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 141 B |
BIN
static/tabs/orders.png
Normal file
BIN
static/tabs/orders.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 133 B |
Loading…
x
Reference in New Issue
Block a user