├── .babelrc
├── .editorconfig
├── .gitignore
├── .postcssrc.js
├── README.md
├── build
    ├── build.js
    ├── check-versions.js
    ├── dev-client.js
    ├── dev-server.js
    ├── utils.js
    ├── vue-loader.conf.js
    ├── webpack.base.conf.js
    ├── webpack.dev.conf.js
    └── webpack.prod.conf.js
├── config
    ├── dev.env.js
    ├── index.js
    └── prod.env.js
├── index.html
├── package-lock.json
├── package.json
├── project.config.json
├── src
    ├── App.vue
    ├── app.json
    ├── components
    │   └── mpvueGestureLock
    │   │   ├── gestureLock.js
    │   │   └── index.vue
    ├── main.js
    ├── pages
    │   └── index
    │   │   ├── index.vue
    │   │   └── main.js
    └── utils
    │   └── index.js
└── static
    └── .gitkeep


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", {
 4 |       "modules": false,
 5 |       "targets": {
 6 |         "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
 7 |       }
 8 |     }],
 9 |     "stage-2"
10 |   ],
11 |   "plugins": ["transform-runtime"],
12 |   "env": {
13 |     "test": {
14 |       "presets": ["env", "stage-2"],
15 |       "plugins": ["istanbul"]
16 |     }
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | dist/
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Editor directories and files
 9 | .idea
10 | *.suo
11 | *.ntvs*
12 | *.njsproj
13 | *.sln
14 | 


--------------------------------------------------------------------------------
/.postcssrc.js:
--------------------------------------------------------------------------------
1 | // https://github.com/michael-ciniawsky/postcss-load-config
2 | 
3 | module.exports = {
4 |   "plugins": {
5 |     "postcss-mpvue-wxss": {}
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## 简介
 2 | > 微信小程序的手势解锁组件。基于Mpvue开发。另有 [原生小程序版本的手势解锁](https://github.com/geminate/mini-gesture-lock)
 3 | 
 4 | **组件使用 DOM 实现，非Canvas。原因是微信小程序的Canvas目前存在问题，网上其他使用Canvas实现手势解锁的组件在小程序中存在严重的卡顿问题**
 5 | 
 6 | ## 截图
 7 | 
 8 | <p align="center"><img src="https://github.com/geminate/geminate.github.io/blob/master/assets/images/2018/gesture.gif" alt="d-tools"></p>
 9 | 
10 | ## 构建
11 | ``` bash
12 | # install dependencies
13 | npm install
14 | 
15 | # serve with hot reload at localhost:8080
16 | npm run dev
17 | ```
18 | 
19 | 组件位于 src/components/mpvueGestureLock <br>
20 | 
21 | 可自行参考样例进行修改
22 | 
23 | ## 组件属性
24 | - containerWidth 容器宽度 单位rpx
25 | - cycleRadius    锁圆宽度 单位rpx
26 | - password 正确密码
27 | 


--------------------------------------------------------------------------------
/build/build.js:
--------------------------------------------------------------------------------
 1 | require('./check-versions')()
 2 | 
 3 | process.env.NODE_ENV = 'production'
 4 | 
 5 | var ora = require('ora')
 6 | var rm = require('rimraf')
 7 | var path = require('path')
 8 | var chalk = require('chalk')
 9 | var webpack = require('webpack')
10 | var config = require('../config')
11 | var webpackConfig = require('./webpack.prod.conf')
12 | 
13 | var spinner = ora('building for production...')
14 | spinner.start()
15 | 
16 | rm(path.join(config.build.assetsRoot, '*'), err => {
17 |   if (err) throw err
18 |   webpack(webpackConfig, function (err, stats) {
19 |     spinner.stop()
20 |     if (err) throw err
21 |     process.stdout.write(stats.toString({
22 |       colors: true,
23 |       modules: false,
24 |       children: false,
25 |       chunks: false,
26 |       chunkModules: false
27 |     }) + '\n\n')
28 | 
29 |     if (stats.hasErrors()) {
30 |       console.log(chalk.red('  Build failed with errors.\n'))
31 |       process.exit(1)
32 |     }
33 | 
34 |     console.log(chalk.cyan('  Build complete.\n'))
35 |     console.log(chalk.yellow(
36 |       '  Tip: built files are meant to be served over an HTTP server.\n' +
37 |       '  Opening index.html over file:// won\'t work.\n'
38 |     ))
39 |   })
40 | })
41 | 


--------------------------------------------------------------------------------
/build/check-versions.js:
--------------------------------------------------------------------------------
 1 | var chalk = require('chalk')
 2 | var semver = require('semver')
 3 | var packageConfig = require('../package.json')
 4 | var shell = require('shelljs')
 5 | function exec (cmd) {
 6 |   return require('child_process').execSync(cmd).toString().trim()
 7 | }
 8 | 
 9 | var versionRequirements = [
10 |   {
11 |     name: 'node',
12 |     currentVersion: semver.clean(process.version),
13 |     versionRequirement: packageConfig.engines.node
14 |   }
15 | ]
16 | 
17 | if (shell.which('npm')) {
18 |   versionRequirements.push({
19 |     name: 'npm',
20 |     currentVersion: exec('npm --version'),
21 |     versionRequirement: packageConfig.engines.npm
22 |   })
23 | }
24 | 
25 | module.exports = function () {
26 |   var warnings = []
27 |   for (var i = 0; i < versionRequirements.length; i++) {
28 |     var mod = versionRequirements[i]
29 |     if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
30 |       warnings.push(mod.name + ': ' +
31 |         chalk.red(mod.currentVersion) + ' should be ' +
32 |         chalk.green(mod.versionRequirement)
33 |       )
34 |     }
35 |   }
36 | 
37 |   if (warnings.length) {
38 |     console.log('')
39 |     console.log(chalk.yellow('To use this template, you must update following to modules:'))
40 |     console.log()
41 |     for (var i = 0; i < warnings.length; i++) {
42 |       var warning = warnings[i]
43 |       console.log('  ' + warning)
44 |     }
45 |     console.log()
46 |     process.exit(1)
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/build/dev-client.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | require('eventsource-polyfill')
 3 | var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
 4 | 
 5 | hotClient.subscribe(function (event) {
 6 |   if (event.action === 'reload') {
 7 |     window.location.reload()
 8 |   }
 9 | })
10 | 


--------------------------------------------------------------------------------
/build/dev-server.js:
--------------------------------------------------------------------------------
  1 | require('./check-versions')()
  2 | 
  3 | var config = require('../config')
  4 | if (!process.env.NODE_ENV) {
  5 |   process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
  6 | }
  7 | 
  8 | // var opn = require('opn')
  9 | var path = require('path')
 10 | var express = require('express')
 11 | var webpack = require('webpack')
 12 | var proxyMiddleware = require('http-proxy-middleware')
 13 | var portfinder = require('portfinder')
 14 | var webpackConfig = require('./webpack.dev.conf')
 15 | 
 16 | // default port where dev server listens for incoming traffic
 17 | var port = process.env.PORT || config.dev.port
 18 | // automatically open browser, if not set will be false
 19 | var autoOpenBrowser = !!config.dev.autoOpenBrowser
 20 | // Define HTTP proxies to your custom API backend
 21 | // https://github.com/chimurai/http-proxy-middleware
 22 | var proxyTable = config.dev.proxyTable
 23 | 
 24 | var app = express()
 25 | var compiler = webpack(webpackConfig)
 26 | 
 27 | // var devMiddleware = require('webpack-dev-middleware')(compiler, {
 28 | //   publicPath: webpackConfig.output.publicPath,
 29 | //   quiet: true
 30 | // })
 31 | 
 32 | // var hotMiddleware = require('webpack-hot-middleware')(compiler, {
 33 | //   log: false,
 34 | //   heartbeat: 2000
 35 | // })
 36 | // force page reload when html-webpack-plugin template changes
 37 | // compiler.plugin('compilation', function (compilation) {
 38 | //   compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
 39 | //     hotMiddleware.publish({ action: 'reload' })
 40 | //     cb()
 41 | //   })
 42 | // })
 43 | 
 44 | // proxy api requests
 45 | Object.keys(proxyTable).forEach(function (context) {
 46 |   var options = proxyTable[context]
 47 |   if (typeof options === 'string') {
 48 |     options = { target: options }
 49 |   }
 50 |   app.use(proxyMiddleware(options.filter || context, options))
 51 | })
 52 | 
 53 | // handle fallback for HTML5 history API
 54 | app.use(require('connect-history-api-fallback')())
 55 | 
 56 | // serve webpack bundle output
 57 | // app.use(devMiddleware)
 58 | 
 59 | // enable hot-reload and state-preserving
 60 | // compilation error display
 61 | // app.use(hotMiddleware)
 62 | 
 63 | // serve pure static assets
 64 | var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
 65 | app.use(staticPath, express.static('./static'))
 66 | 
 67 | // var uri = 'http://localhost:' + port
 68 | 
 69 | var _resolve
 70 | var readyPromise = new Promise(resolve => {
 71 |   _resolve = resolve
 72 | })
 73 | 
 74 | // console.log('> Starting dev server...')
 75 | // devMiddleware.waitUntilValid(() => {
 76 | //   console.log('> Listening at ' + uri + '\n')
 77 | //   // when env is testing, don't need open it
 78 | //   if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
 79 | //     opn(uri)
 80 | //   }
 81 | //   _resolve()
 82 | // })
 83 | 
 84 | module.exports = new Promise((resolve, reject) => {
 85 |   portfinder.basePort = port
 86 |   portfinder.getPortPromise()
 87 |   .then(newPort => {
 88 |       if (port !== newPort) {
 89 |         console.log(`${port}端口被占用，开启新端口${newPort}`)
 90 |       }
 91 |       var server = app.listen(newPort, 'localhost')
 92 |       // for 小程序的文件保存机制
 93 |       require('webpack-dev-middleware-hard-disk')(compiler, {
 94 |         publicPath: webpackConfig.output.publicPath,
 95 |         quiet: true
 96 |       })
 97 |       resolve({
 98 |         ready: readyPromise,
 99 |         close: () => {
100 |           server.close()
101 |         }
102 |       })
103 |   }).catch(error => {
104 |     console.log('没有找到空闲端口，请打开任务管理器杀死进程端口再试', error)
105 |   })
106 | })
107 | 


--------------------------------------------------------------------------------
/build/utils.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var config = require('../config')
 3 | var ExtractTextPlugin = require('extract-text-webpack-plugin')
 4 | 
 5 | exports.assetsPath = function (_path) {
 6 |   var assetsSubDirectory = process.env.NODE_ENV === 'production'
 7 |     ? config.build.assetsSubDirectory
 8 |     : config.dev.assetsSubDirectory
 9 |   return path.posix.join(assetsSubDirectory, _path)
10 | }
11 | 
12 | exports.cssLoaders = function (options) {
13 |   options = options || {}
14 | 
15 |   var cssLoader = {
16 |     loader: 'css-loader',
17 |     options: {
18 |       minimize: process.env.NODE_ENV === 'production',
19 |       sourceMap: options.sourceMap
20 |     }
21 |   }
22 | 
23 |   var postcssLoader = {
24 |     loader: 'postcss-loader',
25 |     options: {
26 |       sourceMap: true
27 |     }
28 |   }
29 | 
30 |   var px2rpxLoader = {
31 |     loader: 'px2rpx-loader',
32 |     options: {
33 |       baseDpr: 1,
34 |       rpxUnit: 0.5
35 |     }
36 |   }
37 | 
38 |   // generate loader string to be used with extract text plugin
39 |   function generateLoaders (loader, loaderOptions) {
40 |     var loaders = [cssLoader, px2rpxLoader, postcssLoader]
41 |     if (loader) {
42 |       loaders.push({
43 |         loader: loader + '-loader',
44 |         options: Object.assign({}, loaderOptions, {
45 |           sourceMap: options.sourceMap
46 |         })
47 |       })
48 |     }
49 | 
50 |     // Extract CSS when that option is specified
51 |     // (which is the case during production build)
52 |     if (options.extract) {
53 |       return ExtractTextPlugin.extract({
54 |         use: loaders,
55 |         fallback: 'vue-style-loader'
56 |       })
57 |     } else {
58 |       return ['vue-style-loader'].concat(loaders)
59 |     }
60 |   }
61 | 
62 |   // https://vue-loader.vuejs.org/en/configurations/extract-css.html
63 |   return {
64 |     css: generateLoaders(),
65 |     wxss: generateLoaders(),
66 |     postcss: generateLoaders(),
67 |     less: generateLoaders('less'),
68 |     sass: generateLoaders('sass', { indentedSyntax: true }),
69 |     scss: generateLoaders('sass'),
70 |     stylus: generateLoaders('stylus'),
71 |     styl: generateLoaders('stylus')
72 |   }
73 | }
74 | 
75 | // Generate loaders for standalone style files (outside of .vue)
76 | exports.styleLoaders = function (options) {
77 |   var output = []
78 |   var loaders = exports.cssLoaders(options)
79 |   for (var extension in loaders) {
80 |     var loader = loaders[extension]
81 |     output.push({
82 |       test: new RegExp('\\.' + extension + '$'),
83 |       use: loader
84 |     })
85 |   }
86 |   return output
87 | }
88 | 


--------------------------------------------------------------------------------
/build/vue-loader.conf.js:
--------------------------------------------------------------------------------
 1 | var utils = require('./utils')
 2 | var config = require('../config')
 3 | // var isProduction = process.env.NODE_ENV === 'production'
 4 | // for mp
 5 | var isProduction = true
 6 | 
 7 | module.exports = {
 8 |   loaders: utils.cssLoaders({
 9 |     sourceMap: isProduction
10 |       ? config.build.productionSourceMap
11 |       : config.dev.cssSourceMap,
12 |     extract: isProduction
13 |   }),
14 |   transformToRequire: {
15 |     video: 'src',
16 |     source: 'src',
17 |     img: 'src',
18 |     image: 'xlink:href'
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/build/webpack.base.conf.js:
--------------------------------------------------------------------------------
  1 | var path = require('path')
  2 | var fs = require('fs')
  3 | var utils = require('./utils')
  4 | var config = require('../config')
  5 | var vueLoaderConfig = require('./vue-loader.conf')
  6 | var MpvuePlugin = require('webpack-mpvue-asset-plugin')
  7 | var glob = require('glob')
  8 | var CopyWebpackPlugin = require('copy-webpack-plugin')
  9 | var relative = require('relative')
 10 | 
 11 | function resolve (dir) {
 12 |   return path.join(__dirname, '..', dir)
 13 | }
 14 | 
 15 | function getEntry (rootSrc) {
 16 |   var map = {};
 17 |   glob.sync(rootSrc + '/pages/**/main.js')
 18 |   .forEach(file => {
 19 |     var key = relative(rootSrc, file).replace('.js', '');
 20 |     map[key] = file;
 21 |   })
 22 |    return map;
 23 | }
 24 | 
 25 | const appEntry = { app: resolve('./src/main.js') }
 26 | const pagesEntry = getEntry(resolve('./src'), 'pages/**/main.js')
 27 | const entry = Object.assign({}, appEntry, pagesEntry)
 28 | 
 29 | module.exports = {
 30 |   // 如果要自定义生成的 dist 目录里面的文件路径，
 31 |   // 可以将 entry 写成 {'toPath': 'fromPath'} 的形式，
 32 |   // toPath 为相对于 dist 的路径, 例：index/demo，则生成的文件地址为 dist/index/demo.js
 33 |   entry,
 34 |   target: require('mpvue-webpack-target'),
 35 |   output: {
 36 |     path: config.build.assetsRoot,
 37 |     filename: '[name].js',
 38 |     publicPath: process.env.NODE_ENV === 'production'
 39 |       ? config.build.assetsPublicPath
 40 |       : config.dev.assetsPublicPath
 41 |   },
 42 |   resolve: {
 43 |     extensions: ['.js', '.vue', '.json'],
 44 |     alias: {
 45 |       'vue': 'mpvue',
 46 |       '@': resolve('src')
 47 |     },
 48 |     symlinks: false,
 49 |     aliasFields: ['mpvue', 'weapp', 'browser'],
 50 |     mainFields: ['browser', 'module', 'main']
 51 |   },
 52 |   module: {
 53 |     rules: [
 54 |       {
 55 |         test: /\.vue$/,
 56 |         loader: 'mpvue-loader',
 57 |         options: vueLoaderConfig
 58 |       },
 59 |       {
 60 |         test: /\.js$/,
 61 |         include: [resolve('src'), resolve('test')],
 62 |         use: [
 63 |           'babel-loader',
 64 |           {
 65 |             loader: 'mpvue-loader',
 66 |             options: {
 67 |               checkMPEntry: true
 68 |             }
 69 |           },
 70 |         ]
 71 |       },
 72 |       {
 73 |         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
 74 |         loader: 'url-loader',
 75 |         options: {
 76 |           limit: 10000,
 77 |           name: utils.assetsPath('img/[name].[ext]')
 78 |         }
 79 |       },
 80 |       {
 81 |         test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
 82 |         loader: 'url-loader',
 83 |         options: {
 84 |           limit: 10000,
 85 |           name: utils.assetsPath('media/[name].[ext]')
 86 |         }
 87 |       },
 88 |       {
 89 |         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
 90 |         loader: 'url-loader',
 91 |         options: {
 92 |           limit: 10000,
 93 |           name: utils.assetsPath('fonts/[name].[ext]')
 94 |         }
 95 |       }
 96 |     ]
 97 |   },
 98 |   plugins: [
 99 |     new MpvuePlugin(),
100 |     new CopyWebpackPlugin([{
101 |       from: '**/*.json',
102 |       to: ''
103 |     }], {
104 |       context: 'src/'
105 |     }),
106 |     new CopyWebpackPlugin([
107 |       {
108 |         from: path.resolve(__dirname, '../static'),
109 |         to: path.resolve(__dirname, '../dist/static'),
110 |         ignore: ['.*']
111 |       }
112 |     ])
113 |   ]
114 | }
115 | 


--------------------------------------------------------------------------------
/build/webpack.dev.conf.js:
--------------------------------------------------------------------------------
 1 | var utils = require('./utils')
 2 | var webpack = require('webpack')
 3 | var config = require('../config')
 4 | var merge = require('webpack-merge')
 5 | var baseWebpackConfig = require('./webpack.base.conf')
 6 | // var HtmlWebpackPlugin = require('html-webpack-plugin')
 7 | var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
 8 | 
 9 | // copy from ./webpack.prod.conf.js
10 | var path = require('path')
11 | var ExtractTextPlugin = require('extract-text-webpack-plugin')
12 | var CopyWebpackPlugin = require('copy-webpack-plugin')
13 | var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
14 | 
15 | // add hot-reload related code to entry chunks
16 | // Object.keys(baseWebpackConfig.entry).forEach(function (name) {
17 | //   baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
18 | // })
19 | 
20 | module.exports = merge(baseWebpackConfig, {
21 |   module: {
22 |     rules: utils.styleLoaders({
23 |       sourceMap: config.dev.cssSourceMap,
24 |       extract: true
25 |     })
26 |   },
27 |   // cheap-module-eval-source-map is faster for development
28 |   // devtool: '#cheap-module-eval-source-map',
29 |   devtool: '#source-map',
30 |   output: {
31 |     path: config.build.assetsRoot,
32 |     // filename: utils.assetsPath('[name].[chunkhash].js'),
33 |     // chunkFilename: utils.assetsPath('[id].[chunkhash].js')
34 |     filename: utils.assetsPath('[name].js'),
35 |     chunkFilename: utils.assetsPath('[id].js')
36 |   },
37 |   plugins: [
38 |     new webpack.DefinePlugin({
39 |       'process.env': config.dev.env
40 |     }),
41 | 
42 |     // copy from ./webpack.prod.conf.js
43 |     // extract css into its own file
44 |     new ExtractTextPlugin({
45 |       // filename: utils.assetsPath('[name].[contenthash].css')
46 |       filename: utils.assetsPath('[name].wxss')
47 |     }),
48 |     // Compress extracted CSS. We are using this plugin so that possible
49 |     // duplicated CSS from different components can be deduped.
50 |     new OptimizeCSSPlugin({
51 |       cssProcessorOptions: {
52 |         safe: true
53 |       }
54 |     }),
55 |     new webpack.optimize.CommonsChunkPlugin({
56 |       name: 'common/vendor',
57 |       minChunks: function (module, count) {
58 |         // any required modules inside node_modules are extracted to vendor
59 |         return (
60 |           module.resource &&
61 |           /\.js$/.test(module.resource) &&
62 |           module.resource.indexOf('node_modules') >= 0
63 |         ) || count > 1
64 |       }
65 |     }),
66 |     new webpack.optimize.CommonsChunkPlugin({
67 |       name: 'common/manifest',
68 |       chunks: ['common/vendor']
69 |     }),
70 | 
71 |     // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
72 |     // new webpack.HotModuleReplacementPlugin(),
73 |     new webpack.NoEmitOnErrorsPlugin(),
74 |     // https://github.com/ampedandwired/html-webpack-plugin
75 |     // new HtmlWebpackPlugin({
76 |     //   filename: 'index.html',
77 |     //   template: 'index.html',
78 |     //   inject: true
79 |     // }),
80 |     new FriendlyErrorsPlugin()
81 |   ]
82 | })
83 | 


--------------------------------------------------------------------------------
/build/webpack.prod.conf.js:
--------------------------------------------------------------------------------
  1 | var path = require('path')
  2 | var utils = require('./utils')
  3 | var webpack = require('webpack')
  4 | var config = require('../config')
  5 | var merge = require('webpack-merge')
  6 | var baseWebpackConfig = require('./webpack.base.conf')
  7 | var UglifyJsPlugin = require('uglifyjs-webpack-plugin')
  8 | var CopyWebpackPlugin = require('copy-webpack-plugin')
  9 | // var HtmlWebpackPlugin = require('html-webpack-plugin')
 10 | var ExtractTextPlugin = require('extract-text-webpack-plugin')
 11 | var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
 12 | 
 13 | var env = config.build.env
 14 | 
 15 | var webpackConfig = merge(baseWebpackConfig, {
 16 |   module: {
 17 |     rules: utils.styleLoaders({
 18 |       sourceMap: config.build.productionSourceMap,
 19 |       extract: true
 20 |     })
 21 |   },
 22 |   devtool: config.build.productionSourceMap ? '#source-map' : false,
 23 |   output: {
 24 |     path: config.build.assetsRoot,
 25 |     // filename: utils.assetsPath('[name].[chunkhash].js'),
 26 |     // chunkFilename: utils.assetsPath('[id].[chunkhash].js')
 27 |     filename: utils.assetsPath('[name].js'),
 28 |     chunkFilename: utils.assetsPath('[id].js')
 29 |   },
 30 |   plugins: [
 31 |     // http://vuejs.github.io/vue-loader/en/workflow/production.html
 32 |     new webpack.DefinePlugin({
 33 |       'process.env': env
 34 |     }),
 35 |     new UglifyJsPlugin({
 36 |       sourceMap: true
 37 |     }),
 38 |     // extract css into its own file
 39 |     new ExtractTextPlugin({
 40 |       // filename: utils.assetsPath('[name].[contenthash].css')
 41 |       filename: utils.assetsPath('[name].wxss')
 42 |     }),
 43 |     // Compress extracted CSS. We are using this plugin so that possible
 44 |     // duplicated CSS from different components can be deduped.
 45 |     new OptimizeCSSPlugin({
 46 |       cssProcessorOptions: {
 47 |         safe: true
 48 |       }
 49 |     }),
 50 |     // generate dist index.html with correct asset hash for caching.
 51 |     // you can customize output by editing /index.html
 52 |     // see https://github.com/ampedandwired/html-webpack-plugin
 53 |     // new HtmlWebpackPlugin({
 54 |     //   filename: config.build.index,
 55 |     //   template: 'index.html',
 56 |     //   inject: true,
 57 |     //   minify: {
 58 |     //     removeComments: true,
 59 |     //     collapseWhitespace: true,
 60 |     //     removeAttributeQuotes: true
 61 |     //     // more options:
 62 |     //     // https://github.com/kangax/html-minifier#options-quick-reference
 63 |     //   },
 64 |     //   // necessary to consistently work with multiple chunks via CommonsChunkPlugin
 65 |     //   chunksSortMode: 'dependency'
 66 |     // }),
 67 |     // keep module.id stable when vender modules does not change
 68 |     new webpack.HashedModuleIdsPlugin(),
 69 |     // split vendor js into its own file
 70 |     new webpack.optimize.CommonsChunkPlugin({
 71 |       name: 'common/vendor',
 72 |       minChunks: function (module, count) {
 73 |         // any required modules inside node_modules are extracted to vendor
 74 |         return (
 75 |           module.resource &&
 76 |           /\.js$/.test(module.resource) &&
 77 |           module.resource.indexOf('node_modules') >= 0
 78 |         ) || count > 1
 79 |       }
 80 |     }),
 81 |     // extract webpack runtime and module manifest to its own file in order to
 82 |     // prevent vendor hash from being updated whenever app bundle is updated
 83 |     new webpack.optimize.CommonsChunkPlugin({
 84 |       name: 'common/manifest',
 85 |       chunks: ['common/vendor']
 86 |     })
 87 |   ]
 88 | })
 89 | 
 90 | // if (config.build.productionGzip) {
 91 | //   var CompressionWebpackPlugin = require('compression-webpack-plugin')
 92 | 
 93 | //   webpackConfig.plugins.push(
 94 | //     new CompressionWebpackPlugin({
 95 | //       asset: '[path].gz[query]',
 96 | //       algorithm: 'gzip',
 97 | //       test: new RegExp(
 98 | //         '\\.(' +
 99 | //         config.build.productionGzipExtensions.join('|') +
100 | //         ')$'
101 | //       ),
102 | //       threshold: 10240,
103 | //       minRatio: 0.8
104 | //     })
105 | //   )
106 | // }
107 | 
108 | if (config.build.bundleAnalyzerReport) {
109 |   var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
110 |   webpackConfig.plugins.push(new BundleAnalyzerPlugin())
111 | }
112 | 
113 | module.exports = webpackConfig
114 | 


--------------------------------------------------------------------------------
/config/dev.env.js:
--------------------------------------------------------------------------------
1 | var merge = require('webpack-merge')
2 | var prodEnv = require('./prod.env')
3 | 
4 | module.exports = merge(prodEnv, {
5 |   NODE_ENV: '"development"'
6 | })
7 | 


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | // see http://vuejs-templates.github.io/webpack for documentation.
 2 | var path = require('path')
 3 | 
 4 | module.exports = {
 5 |   build: {
 6 |     env: require('./prod.env'),
 7 |     index: path.resolve(__dirname, '../dist/index.html'),
 8 |     assetsRoot: path.resolve(__dirname, '../dist'),
 9 |     assetsSubDirectory: '',
10 |     assetsPublicPath: '/',
11 |     productionSourceMap: false,
12 |     // Gzip off by default as many popular static hosts such as
13 |     // Surge or Netlify already gzip all static assets for you.
14 |     // Before setting to `true`, make sure to:
15 |     // npm install --save-dev compression-webpack-plugin
16 |     productionGzip: false,
17 |     productionGzipExtensions: ['js', 'css'],
18 |     // Run the build command with an extra argument to
19 |     // View the bundle analyzer report after build finishes:
20 |     // `npm run build --report`
21 |     // Set to `true` or `false` to always turn it on or off
22 |     bundleAnalyzerReport: process.env.npm_config_report
23 |   },
24 |   dev: {
25 |     env: require('./dev.env'),
26 |     port: 8080,
27 |     // 在小程序开发者工具中不需要自动打开浏览器
28 |     autoOpenBrowser: false,
29 |     assetsSubDirectory: '',
30 |     assetsPublicPath: '/',
31 |     proxyTable: {},
32 |     // CSS Sourcemaps off by default because relative paths are "buggy"
33 |     // with this option, according to the CSS-Loader README
34 |     // (https://github.com/webpack/css-loader#sourcemaps)
35 |     // In our experience, they generally work as expected,
36 |     // just be aware of this issue when enabling this option.
37 |     cssSourceMap: false
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/config/prod.env.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   NODE_ENV: '"production"'
3 | }
4 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>mpvue-gesture-lock</title>
 6 |   </head>
 7 |   <body>
 8 |     <div id="app"></div>
 9 |     <!-- built files will be auto injected -->
10 |   </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "mpvue-gesture-lock",
 3 |   "version": "1.0.0",
 4 |   "description": "A Mpvue project",
 5 |   "author": "liuhuihao <1061036802@qq.com>",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "node build/dev-server.js",
 9 |     "start": "node build/dev-server.js",
10 |     "build": "node build/build.js"
11 |   },
12 |   "dependencies": {
13 |     "mpvue": "^1.0.11"
14 |   },
15 |   "devDependencies": {
16 |     "babel-core": "^6.22.1",
17 |     "babel-loader": "^7.1.1",
18 |     "babel-plugin-transform-runtime": "^6.22.0",
19 |     "babel-preset-env": "^1.3.2",
20 |     "babel-preset-stage-2": "^6.22.0",
21 |     "babel-register": "^6.22.0",
22 |     "chalk": "^2.4.0",
23 |     "connect-history-api-fallback": "^1.3.0",
24 |     "copy-webpack-plugin": "^4.5.1",
25 |     "css-loader": "^0.28.11",
26 |     "cssnano": "^3.10.0",
27 |     "eventsource-polyfill": "^0.9.6",
28 |     "express": "^4.16.3",
29 |     "extract-text-webpack-plugin": "^3.0.2",
30 |     "file-loader": "^1.1.11",
31 |     "friendly-errors-webpack-plugin": "^1.7.0",
32 |     "glob": "^7.1.2",
33 |     "html-webpack-plugin": "^3.2.0",
34 |     "http-proxy-middleware": "^0.18.0",
35 |     "less": "^3.8.1",
36 |     "less-loader": "^4.1.0",
37 |     "mpvue-loader": "^1.1.2",
38 |     "mpvue-template-compiler": "^1.0.11",
39 |     "mpvue-webpack-target": "^1.0.0",
40 |     "optimize-css-assets-webpack-plugin": "^3.2.0",
41 |     "ora": "^2.0.0",
42 |     "portfinder": "^1.0.13",
43 |     "postcss-loader": "^2.1.4",
44 |     "postcss-mpvue-wxss": "^1.0.0",
45 |     "prettier": "~1.12.1",
46 |     "px2rpx-loader": "^0.1.10",
47 |     "relative": "^3.0.2",
48 |     "rimraf": "^2.6.0",
49 |     "semver": "^5.3.0",
50 |     "shelljs": "^0.8.1",
51 |     "uglifyjs-webpack-plugin": "^1.2.5",
52 |     "url-loader": "^1.0.1",
53 |     "vue-style-loader": "^4.1.0",
54 |     "webpack": "^3.11.0",
55 |     "webpack-bundle-analyzer": "^2.2.1",
56 |     "webpack-dev-middleware-hard-disk": "^1.12.0",
57 |     "webpack-merge": "^4.1.0",
58 |     "webpack-mpvue-asset-plugin": "^0.1.1"
59 |   },
60 |   "engines": {
61 |     "node": ">= 4.0.0",
62 |     "npm": ">= 3.0.0"
63 |   },
64 |   "browserslist": [
65 |     "> 1%",
66 |     "last 2 versions",
67 |     "not ie <= 8"
68 |   ]
69 | }
70 | 


--------------------------------------------------------------------------------
/project.config.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"description": "项目配置文件。",
 3 | 	"setting": {
 4 | 		"urlCheck": true,
 5 | 		"es6": false,
 6 | 		"postcss": true,
 7 | 		"minified": true,
 8 | 		"newFeature": true
 9 | 	},
10 | 	"miniprogramRoot": "./dist/",
11 | 	"compileType": "miniprogram",
12 | 	"appid": "touristappid",
13 | 	"projectname": "mpvue-gesture-lock",
14 | 	"condition": {
15 | 		"search": {
16 | 			"current": -1,
17 | 			"list": []
18 | 		},
19 | 		"conversation": {
20 | 			"current": -1,
21 | 			"list": []
22 | 		},
23 | 		"game": {
24 | 			"currentL": -1,
25 | 			"list": []
26 | 		},
27 | 		"miniprogram": {
28 | 			"current": -1,
29 | 			"list": []
30 | 		}
31 | 	}
32 | }
33 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 | <script>
2 |   export default {}
3 | </script>
4 | 
5 | <style>
6 | </style>
7 | 


--------------------------------------------------------------------------------
/src/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "pages": [
 3 |     "pages/index/main"
 4 |   ],
 5 |   "window": {
 6 |     "backgroundTextStyle": "light",
 7 |     "navigationBarBackgroundColor": "#fff",
 8 |     "navigationBarTitleText": "WeChat",
 9 |     "navigationBarTextStyle": "black"
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/src/components/mpvueGestureLock/gestureLock.js:
--------------------------------------------------------------------------------
  1 | class GestureLock {
  2 | 
  3 |   constructor(containerWidth, cycleRadius) {
  4 |     this.containerWidth = containerWidth;  // 容器宽度
  5 |     this.cycleRadius = cycleRadius;  // 圆的半径
  6 | 
  7 |     this.circleArray = [];  // 全部圆的对象数组
  8 |     this.checkPoints = []; // 选中的圆的对象数组
  9 |     this.lineArray = []; // 已激活锁之间的线段数组
 10 |     this.lastCheckPoint = 0; // 最后一个激活的锁
 11 |     this.offsetX = 0; // 容器的 X 偏移
 12 |     this.offsetY = 0;// 容器的 Y 偏移
 13 |     this.activeLine = {}; // 最后一个激活的锁与当前位置之间的线段
 14 | 
 15 |     this.windowWidth = wx.getSystemInfoSync().windowWidth;// 窗口大小(用于rpx 和 px 转换)
 16 | 
 17 |     this.initCircleArray();
 18 |   }
 19 | 
 20 |   // 初始化 画布上的 9个圆
 21 |   initCircleArray() {
 22 |     const cycleMargin = (this.containerWidth - 6 * this.cycleRadius) / 6;
 23 |     let count = 0;
 24 |     for (let i = 0; i < 3; i++) {
 25 |       for (let j = 0; j < 3; j++) {
 26 |         count++;
 27 |         this.circleArray.push({
 28 |           count: count,
 29 |           x: this.rpxTopx((cycleMargin + this.cycleRadius) * (j * 2 + 1)),
 30 |           y: this.rpxTopx((cycleMargin + this.cycleRadius) * (i * 2 + 1)),
 31 |           radius: this.rpxTopx(this.cycleRadius),
 32 |           check: false,
 33 |           style: {
 34 |             left: (cycleMargin + this.cycleRadius) * (j * 2 + 1) - this.cycleRadius + 'rpx',
 35 |             top: (cycleMargin + this.cycleRadius) * (i * 2 + 1) - this.cycleRadius + 'rpx',
 36 |             width: this.cycleRadius * 2 + 'rpx',
 37 |           }
 38 |         });
 39 |       }
 40 |     }
 41 |   }
 42 | 
 43 |   onTouchStart(e) {
 44 |     this.setOffset(e);
 45 |     this.checkTouch({x: e.pageX - this.offsetX, y: e.pageY - this.offsetY});
 46 |   }
 47 | 
 48 |   onTouchMove(e) {
 49 |     this.moveDraw(e)
 50 |   }
 51 | 
 52 |   onTouchEnd(e) {
 53 |     const checkPoints = this.checkPoints;
 54 |     this.reset();
 55 |     return checkPoints;
 56 |   }
 57 | 
 58 |   // 初始化 偏移量
 59 |   setOffset(e) {
 60 |     this.offsetX = e.currentTarget.offsetLeft;
 61 |     this.offsetY = e.currentTarget.offsetTop;
 62 |   }
 63 | 
 64 |   // 检测当时 触摸位置是否位于 锁上
 65 |   checkTouch({x, y}) {
 66 |     for (let i = 0; i < this.circleArray.length; i++) {
 67 |       let point = this.circleArray[i];
 68 |       if (this.isPointInCycle(x, y, point.x, point.y, point.radius)) {
 69 |         if (!point.check) {
 70 |           this.checkPoints.push(point.count);
 71 |           if (this.lastCheckPoint != 0) {
 72 |             // 已激活锁之间的线段
 73 |             const line = this.drawLine(this.lastCheckPoint, point);
 74 |             this.lineArray.push(line);
 75 |           }
 76 |           this.lastCheckPoint = point;
 77 |         }
 78 |         point.check = true;
 79 |         return;
 80 |       }
 81 |     }
 82 |   }
 83 | 
 84 |   // 画线 - 返回 样式 对象
 85 |   drawLine(start, end) {
 86 |     const width = this.getPointDis(start.x, start.y, end.x, end.y);
 87 |     const rotate = this.getAngle(start, end);
 88 | 
 89 |     return {
 90 |       activeLeft: start.x + 'px',
 91 |       activeTop: start.y + 'px',
 92 |       activeWidth: width + 'px',
 93 |       activeRotate: rotate + 'deg'
 94 |     }
 95 | 
 96 |   }
 97 | 
 98 |   // 获取 画线的 角度
 99 |   getAngle(start, end) {
100 |     var diff_x = end.x - start.x, diff_y = end.y - start.y;
101 |     if (diff_x >= 0) {
102 |       return 360 * Math.atan(diff_y / diff_x) / (2 * Math.PI);
103 |     } else {
104 |       return 180 + 360 * Math.atan(diff_y / diff_x) / (2 * Math.PI);
105 |     }
106 |   }
107 | 
108 |   // 判断 当前点是否位于 锁内
109 |   isPointInCycle(x, y, circleX, circleY, radius) {
110 |     return (this.getPointDis(x, y, circleX, circleY) < radius) ? true : false;
111 |   }
112 | 
113 |   // 获取两点之间距离
114 |   getPointDis(ax, ay, bx, by) {
115 |     return Math.sqrt(Math.pow(ax - bx, 2) + Math.pow(ay - by, 2));
116 |   }
117 | 
118 |   // 移动 绘制
119 |   moveDraw(e) {
120 |     // 画经过的圆
121 |     const x = e.pageX - this.offsetX;
122 |     const y = e.pageY - this.offsetY;
123 |     this.checkTouch({x, y});
124 | 
125 |     // 画 最后一个激活的锁与当前位置之间的线段
126 |     this.activeLine = this.drawLine(this.lastCheckPoint, {x, y});
127 |   }
128 | 
129 |   // 使 画布 恢复初始状态
130 |   reset() {
131 |     this.circleArray.forEach((item) => {
132 |       item.check = false;
133 |     });
134 |     this.checkPoints = [];
135 |     this.lineArray = [];
136 |     this.activeLine = {};
137 |     this.lastCheckPoint = 0;
138 |   }
139 | 
140 | 
141 |   // 获取 最后一个激活的锁与当前位置之间的线段
142 |   getActiveLine() {
143 |     return this.activeLine;
144 |   }
145 | 
146 |   // 获取 圆对象数组
147 |   getCycleArray() {
148 |     return this.circleArray;
149 |   }
150 | 
151 |   // 获取 已激活锁之间的线段
152 |   getLineArray() {
153 |     return this.lineArray;
154 |   }
155 | 
156 |   // 将 RPX 转换成 PX
157 |   rpxTopx(rpx) {
158 |     return rpx / 750 * this.windowWidth;
159 |   }
160 | }
161 | 
162 | export default GestureLock;
163 | 


--------------------------------------------------------------------------------
/src/components/mpvueGestureLock/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="gesture-lock"
  3 |        :class="{error:error}"
  4 |        :style="{width: containerWidth +'rpx', height:containerWidth +'rpx'}"
  5 |        @touchstart="onTouchStart"
  6 |        @touchmove="onTouchMove"
  7 |        @touchend="onTouchEnd"
  8 |   >
  9 |     <!-- 9 个圆 -->
 10 |     <div v-for="(item,i) in circleArray" :key="i" class="cycle" :class="{check:item.check}"
 11 |          :style="{left:item.style.left,top:item.style.top,width:item.style.width,height:item.style.width}">
 12 |     </div>
 13 | 
 14 |     <!-- 已激活锁之间的线段 -->
 15 |     <div v-for="(item,i) in lineArray" :key="i" class="line"
 16 |          :style="{left:item.activeLeft,top:item.activeTop,width:item.activeWidth,transform:'rotate('+item.activeRotate+')'}">
 17 |     </div>
 18 | 
 19 |     <!-- 最后一个激活的锁与当前位置之间的线段 -->
 20 |     <div class="line"
 21 |          :style="{left:activeLine.activeLeft,top:activeLine.activeTop,width:activeLine.activeWidth,transform:'rotate('+activeLine.activeRotate+')'}">
 22 |     </div>
 23 |   </div>
 24 | </template>
 25 | 
 26 | <script>
 27 |   import GestureLock from './gestureLock';
 28 | 
 29 |   export default {
 30 |     name: 'index',
 31 |     props: ['containerWidth', 'cycleRadius', 'password'],// 容器宽度 和 圆的半径 单位是 rpx
 32 |     data() {
 33 |       return {
 34 |         gestureLock: {}, // 锁对象
 35 |         circleArray: [], // 圆对象数组
 36 |         lineArray: [],// 已激活锁之间的线段
 37 |         activeLine: {}, // 最后一个激活的锁与当前位置之间的线段
 38 |         error: false
 39 |       }
 40 |     },
 41 |     methods: {
 42 |       onTouchStart(e) {
 43 |         this.gestureLock.onTouchStart(e);
 44 |         this.refesh();
 45 |       },
 46 | 
 47 |       onTouchMove(e) {
 48 |         this.gestureLock.onTouchMove(e);
 49 |         this.refesh();
 50 |       },
 51 | 
 52 |       onTouchEnd(e) {
 53 |         const checkPoints = this.gestureLock.onTouchEnd(e);
 54 |         if (checkPoints.join("") == this.password.join("")) {
 55 |           console.log("密码正确");
 56 |           this.refesh();
 57 |           this.$emit("end", checkPoints);
 58 |         } else {
 59 |           console.log("密码错误");
 60 |           this.error = true;
 61 |           setTimeout(() => {
 62 |             this.refesh();
 63 |             this.$emit("end", checkPoints);
 64 |           }, 800);
 65 |         }
 66 | 
 67 |       },
 68 |       refesh() {
 69 |         this.error = false;
 70 |         this.circleArray = this.gestureLock.getCycleArray();
 71 |         this.lineArray = this.gestureLock.getLineArray();
 72 |         this.activeLine = this.gestureLock.getActiveLine();
 73 |       }
 74 |     },
 75 |     mounted() {
 76 |       this.gestureLock = new GestureLock(this.containerWidth, this.cycleRadius);
 77 |       this.refesh();
 78 |     }
 79 |   }
 80 | </script>
 81 | 
 82 | <style lang="less" scoped>
 83 |   .gesture-lock {
 84 |     margin: 0 auto;
 85 |     position: relative;
 86 |     box-sizing: border-box;
 87 |     overflow: auto;
 88 | 
 89 |     .cycle {
 90 |       box-sizing: border-box;
 91 |       position: absolute;
 92 |       border: 2px solid #66aaff;
 93 |       border-radius: 50%;
 94 | 
 95 |       &.check:after {
 96 |         content: "";
 97 |         display: block;
 98 |         position: absolute;
 99 |         width: 32%;
100 |         height: 32%;
101 |         border: 2px solid #66aaff;
102 |         border-radius: 50%;
103 |         top: 50%;
104 |         left: 50%;
105 |         transform: translate(-50%, -50%);
106 |       }
107 |     }
108 | 
109 |     .line {
110 |       height: 0;
111 |       border-top: 2px solid #66aaff;
112 |       position: absolute;
113 |       transform-origin: left center;
114 |     }
115 | 
116 |     &.error .cycle.check, &.error .cycle.check:after, &.error .line {
117 |       border-color: #ffa197;
118 |     }
119 |   }
120 | 
121 | 
122 | </style>
123 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App'
3 | 
4 | Vue.config.productionTip = false
5 | App.mpType = 'app'
6 | 
7 | const app = new Vue(App)
8 | app.$mount()
9 | 


--------------------------------------------------------------------------------
/src/pages/index/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="index-page">
 3 |     <mpvue-gesture-lock :containerWidth="600" :cycleRadius="70" @end="onEnd" :password="password"></mpvue-gesture-lock>
 4 |     <div class="result">{{data}}</div>
 5 |     <div class="result">正确密码是：12369</div>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 |   import mpvueGestureLock from '@/components/mpvueGestureLock';
11 | 
12 |   export default {
13 |     name: 'indexPage',
14 |     components: {mpvueGestureLock},
15 |     data() {
16 |       return {
17 |         data: [],
18 |         password: [1, 2, 3, 6, 9]
19 |       }
20 |     },
21 |     methods: {
22 |       onEnd(data) {
23 |         this.data = data;
24 |       }
25 |     }
26 |   }
27 | </script>
28 | 
29 | <style lang="less" scoped>
30 |   .index-page {
31 |     box-sizing: border-box;
32 |     padding-top: 1rem;
33 |     height: 100vh;
34 |     width: 100vw;
35 | 
36 |     .result {
37 |       text-align: center;
38 |     }
39 |   }
40 | </style>
41 | 


--------------------------------------------------------------------------------
/src/pages/index/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './index'
3 | 
4 | const app = new Vue(App)
5 | app.$mount()
6 | 


--------------------------------------------------------------------------------
/src/utils/index.js:
--------------------------------------------------------------------------------
 1 | const pxToRpx = () => {
 2 |   return px * 750 / wx.getSystemInfoSync().windowWidth;
 3 | };
 4 | 
 5 | const rpxTopx = () => {
 6 |   return rpx / 750 * wx.getSystemInfoSync().windowWidth;
 7 | };
 8 | 
 9 | export {pxToRpx, rpxTopx}
10 | 


--------------------------------------------------------------------------------
/static/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/geminate/mpvue-gesture-lock/73abb0e63d44d02b36c1fcb05e5f6476d003d8e3/static/.gitkeep


--------------------------------------------------------------------------------