diff --git a/packages/omi-cli/package.json b/packages/omi-cli/package.json index f06b66933..a1a5c7a25 100755 --- a/packages/omi-cli/package.json +++ b/packages/omi-cli/package.json @@ -1,6 +1,6 @@ { "name": "omi-cli", - "version": "3.4.7", + "version": "3.4.8", "description": "Create website, app with no build configuration. be friendly to [Omi](https://github.com/Tencent/omi) framework.", "main": "bin/omi", "engines": { diff --git a/packages/omi-cli/template/mp/gulpfile.js b/packages/omi-cli/template/mp/gulpfile.js index f4f8077bd..1af6d4d00 100644 --- a/packages/omi-cli/template/mp/gulpfile.js +++ b/packages/omi-cli/template/mp/gulpfile.js @@ -1,4 +1,4 @@ -let gulp = require('gulp') +let gulp = require('gulp') let path = require('path') let tap = require('gulp-tap') let compile = require('./scripts/mp/index') @@ -6,107 +6,89 @@ let fs = require('fs') let compileWxss = require('./scripts/mp/wxss') var prettier = require('prettier') -const WXCOMPONENT_ENV = 'WXCOMPONENT'; - gulp.task('components', ['copy'], () => { - const isWxComponent = process.env.NODE_ENV === WXCOMPONENT_ENV; - const src = isWxComponent ? 'src/mp/components/**/*.js' : 'src/mp/components/*/*.js'; // 判断是否微信组件 - return gulp - .src(src) + .src('src/mp/components/*/*.js') .pipe( tap(file => { - let dir = isWxComponent ? file.path.replace('.js', '') : path.dirname(file.path) + let dir = path.dirname(file.path) let arr = dir.split(/\\|\//) let name = arr[arr.length-1] - let preName = arr[arr.length-2]; + if(path.basename(file.path) == name+'.js') { + let wxml = fs.readFileSync(dir + '/' + name + '.wxml', 'utf8') + let json = require(dir + '/' + name + '.json') + let importStr = json2import(json) + let hyperscript = compile(wxml) + file.contents = Buffer.concat([ + Buffer.from( + `${importStr}import componentCss from './${name}.wxss' +import { h, WeElement, rpx } from 'omi' +import { setData } from '../../../utils/set-data' - try{ - if(path.basename(file.path) == name+'.js') { - let filePathComponentDomStr = fileComponentDom(file.path); - let contentPath = isWxComponent ? dir : dir + '/' + name; - let wxml = fs.readFileSync(contentPath + '.wxml', 'utf8') - let js = fs.readFileSync(contentPath + '.js', 'utf8') - let json = require(contentPath + '.json') - let importStr = json2import(json, dir) - let hyperscript = compile(wxml) + ` + ), + Buffer.from( + file.contents + .toString() + .replace('Component({', + `const mpOption = function () { + return ({`)+` +}`), + Buffer.from(` +class Element extends WeElement { + static props = mpOption().properties - // 判断组件下面是不是压缩过 - if(js.includes('webpackBootstrap')){ - return - } + data = mpOption().data - file.contents = Buffer.concat([ - Buffer.from( - `${importStr}import componentCss from './${name}.wxss' - import { h, WeElement, rpx } from 'omi' - import { setData } from ${isWxComponent && preName === 'components' ? "'../../utils/set-data'" : "'../../../utils/set-data'"} + render = render - ` - ), - Buffer.from( - file.contents - .toString() - .replace('Component({', - `const mpOption = function () { - return ({`)+` - }`), - Buffer.from(` - class Element extends WeElement { - static props = mpOption().properties + css = css - data = mpOption().data + beforeRender() {} - render = render + beforeUpdate() {} - css = css + afterUpdate() {} - beforeRender() {} + install = function() { + this.properties = this.props + Object.assign(this.data, JSON.parse(JSON.stringify(this.props))) + this._mpOption = mpOption() + this._mpOption.created && this._mpOption.created.call(this) + Object.keys(this._mpOption.methods).forEach(key => { + if(typeof this._mpOption.methods[key] === 'function'){ + this[key] = this._mpOption.methods[key].bind(this) + } + }) + } - beforeUpdate() {} + uninstall = mpOption().detached || function() {} - afterUpdate() {} + installed = function() { + this._mpOption.attached && this._mpOption.attached.call(this) + this._mpOption.ready && this._mpOption.ready.call(this) + } - install = function() { - this.properties = this.props - Object.assign(this.data, JSON.parse(JSON.stringify(this.props))) - this._mpOption = mpOption() - this._mpOption.created && this._mpOption.created.call(this) - Object.keys(this._mpOption.methods).forEach(key => { - if(typeof this._mpOption.methods[key] === 'function'){ - this[key] = this._mpOption.methods[key].bind(this) + adoptedCallback = mpOption().moved || function() {} + + triggerEvent = function(name, data) { + this.fire(name, data) + } + + setData = setData +} + +function css() { + return rpx(componentCss) +} + +${prettier.format(hyperscript, { parser: "babel" })} + +customElements.define('${name}', Element) + `) + ]) } }) - } - - uninstall = mpOption().detached || function() {} - - installed = function() { - this._mpOption.attached && this._mpOption.attached.call(this) - this._mpOption.ready && this._mpOption.ready.call(this) - } - - adoptedCallback = mpOption().moved || function() {} - - triggerEvent = function(name, data) { - this.fire(name, data) - } - - setData = setData - } - - function css() { - return rpx(componentCss) - } - - ${prettier.format(hyperscript, { parser: "babel" })} - - customElements.define('${filePathComponentDomStr}', Element) - `) - ]) - } - }catch(e){} - }) ) .pipe(gulp.dest('src/mp/components/')) }) @@ -125,10 +107,9 @@ gulp.task('pages', ['copy'], () => { let name = arr[arr.length-1] if(path.basename(file.path) == name+'.js') { let wxml = fs.readFileSync(dir + '/' + name + '.wxml', 'utf8') + let hyperscript = compile(wxml) let json = require(dir + '/' + name + '.json') - let hyperscript = compile(replaceWxmlComponentHtml(dir, wxml,json)) - - let importStr = json2import(json, dir) + let importStr = json2import(json) file.contents = Buffer.concat([ Buffer.from( `${importStr}import appCss from '../../app.wxss' @@ -141,7 +122,7 @@ import { setData } from '../../../utils/set-data' Buffer.from( file.contents .toString() - .replace('Page({', + .replace('Page({', `const mpOption = function () { return ({`)+` }` @@ -270,71 +251,10 @@ function route(arr) { return result.join('\r\n') } -// 打包生成web component 转换统一src 路径 -function fileComponentDom(filePth) { - let filePathArray = filePth.replace(__dirname, '').replace('.js', '').split('/'); - filePathArray.shift(); - - return 'wx-h5-' + filePathArray.join('-'); -} - -// 组件转换绝对路径 不再需要依赖强匹配目录文件夹 -function replaceComponentOnPath(tag, str, tagName) { - const reg = new RegExp(`<(${tag})(?=\\s)|<(\\/${tag})>`, 'g'); - - return str.replace(reg, function(match, $1, $2) { - if ($1) { - return '<' + tagName; - } - return '' - }); -} - -// 匹配转换html 转换 目录文件夹名字 -function replaceWxmlComponentHtml(dir, html,json) { - Object.keys(json.usingComponents).forEach((key, i) => { - html = replaceComponentOnPath( - key, - html, - fileComponentDom(path.join(dir, json.usingComponents[key])) - ); - }) - - return html; -} - - -function json2import(json, dir) { +function json2import(json) { let arr = [] if (json.usingComponents) { - Object.keys(json.usingComponents).forEach(key => { - let usingArry = path.resolve(dir, json.usingComponents[key]).split('/'); - usingArry.pop(); - let wxssPath = ''; - - try{ - let indexWsxx = [...usingArry, 'index.wxss'].join('/'); - fs.statSync(indexWsxx); - wxssPath = json.usingComponents[key]; - }catch(e){ - - } - - try{ - let keyWsxx = [...usingArry, key + '.wxss'].join('/'); - fs.statSync(keyWsxx); - wxssPath = keyWsxx; - }catch(e){ - - } - - wxssPath && arr.push(`import '${wxssPath}'`) - - // let wxml = fs.readFileSync(wxssPath, 'utf8') - // console.log(Buffer.from(compileWxss(wxml))) - - // arr.push(Buffer.from(compileWxss(wxml))) arr.push(`import '${json.usingComponents[key]}'`) }) } @@ -403,4 +323,3 @@ gulp.task('app-wxss', ['copy'], () => { }) gulp.task('default', ['copy', 'components', 'app-wxss', 'pages-wxss', 'components-wxss', 'pages', 'appjs', 'route', 'watch']) -gulp.task('build', ['copy', 'components', 'app-wxss', 'pages-wxss', 'components-wxss', 'pages', 'appjs', 'route']) diff --git a/packages/omi-mp/gulpfile.js b/packages/omi-mp/gulpfile.js index f4f8077bd..1af6d4d00 100644 --- a/packages/omi-mp/gulpfile.js +++ b/packages/omi-mp/gulpfile.js @@ -1,4 +1,4 @@ -let gulp = require('gulp') +let gulp = require('gulp') let path = require('path') let tap = require('gulp-tap') let compile = require('./scripts/mp/index') @@ -6,107 +6,89 @@ let fs = require('fs') let compileWxss = require('./scripts/mp/wxss') var prettier = require('prettier') -const WXCOMPONENT_ENV = 'WXCOMPONENT'; - gulp.task('components', ['copy'], () => { - const isWxComponent = process.env.NODE_ENV === WXCOMPONENT_ENV; - const src = isWxComponent ? 'src/mp/components/**/*.js' : 'src/mp/components/*/*.js'; // 判断是否微信组件 - return gulp - .src(src) + .src('src/mp/components/*/*.js') .pipe( tap(file => { - let dir = isWxComponent ? file.path.replace('.js', '') : path.dirname(file.path) + let dir = path.dirname(file.path) let arr = dir.split(/\\|\//) let name = arr[arr.length-1] - let preName = arr[arr.length-2]; + if(path.basename(file.path) == name+'.js') { + let wxml = fs.readFileSync(dir + '/' + name + '.wxml', 'utf8') + let json = require(dir + '/' + name + '.json') + let importStr = json2import(json) + let hyperscript = compile(wxml) + file.contents = Buffer.concat([ + Buffer.from( + `${importStr}import componentCss from './${name}.wxss' +import { h, WeElement, rpx } from 'omi' +import { setData } from '../../../utils/set-data' - try{ - if(path.basename(file.path) == name+'.js') { - let filePathComponentDomStr = fileComponentDom(file.path); - let contentPath = isWxComponent ? dir : dir + '/' + name; - let wxml = fs.readFileSync(contentPath + '.wxml', 'utf8') - let js = fs.readFileSync(contentPath + '.js', 'utf8') - let json = require(contentPath + '.json') - let importStr = json2import(json, dir) - let hyperscript = compile(wxml) + ` + ), + Buffer.from( + file.contents + .toString() + .replace('Component({', + `const mpOption = function () { + return ({`)+` +}`), + Buffer.from(` +class Element extends WeElement { + static props = mpOption().properties - // 判断组件下面是不是压缩过 - if(js.includes('webpackBootstrap')){ - return - } + data = mpOption().data - file.contents = Buffer.concat([ - Buffer.from( - `${importStr}import componentCss from './${name}.wxss' - import { h, WeElement, rpx } from 'omi' - import { setData } from ${isWxComponent && preName === 'components' ? "'../../utils/set-data'" : "'../../../utils/set-data'"} + render = render - ` - ), - Buffer.from( - file.contents - .toString() - .replace('Component({', - `const mpOption = function () { - return ({`)+` - }`), - Buffer.from(` - class Element extends WeElement { - static props = mpOption().properties + css = css - data = mpOption().data + beforeRender() {} - render = render + beforeUpdate() {} - css = css + afterUpdate() {} - beforeRender() {} + install = function() { + this.properties = this.props + Object.assign(this.data, JSON.parse(JSON.stringify(this.props))) + this._mpOption = mpOption() + this._mpOption.created && this._mpOption.created.call(this) + Object.keys(this._mpOption.methods).forEach(key => { + if(typeof this._mpOption.methods[key] === 'function'){ + this[key] = this._mpOption.methods[key].bind(this) + } + }) + } - beforeUpdate() {} + uninstall = mpOption().detached || function() {} - afterUpdate() {} + installed = function() { + this._mpOption.attached && this._mpOption.attached.call(this) + this._mpOption.ready && this._mpOption.ready.call(this) + } - install = function() { - this.properties = this.props - Object.assign(this.data, JSON.parse(JSON.stringify(this.props))) - this._mpOption = mpOption() - this._mpOption.created && this._mpOption.created.call(this) - Object.keys(this._mpOption.methods).forEach(key => { - if(typeof this._mpOption.methods[key] === 'function'){ - this[key] = this._mpOption.methods[key].bind(this) + adoptedCallback = mpOption().moved || function() {} + + triggerEvent = function(name, data) { + this.fire(name, data) + } + + setData = setData +} + +function css() { + return rpx(componentCss) +} + +${prettier.format(hyperscript, { parser: "babel" })} + +customElements.define('${name}', Element) + `) + ]) } }) - } - - uninstall = mpOption().detached || function() {} - - installed = function() { - this._mpOption.attached && this._mpOption.attached.call(this) - this._mpOption.ready && this._mpOption.ready.call(this) - } - - adoptedCallback = mpOption().moved || function() {} - - triggerEvent = function(name, data) { - this.fire(name, data) - } - - setData = setData - } - - function css() { - return rpx(componentCss) - } - - ${prettier.format(hyperscript, { parser: "babel" })} - - customElements.define('${filePathComponentDomStr}', Element) - `) - ]) - } - }catch(e){} - }) ) .pipe(gulp.dest('src/mp/components/')) }) @@ -125,10 +107,9 @@ gulp.task('pages', ['copy'], () => { let name = arr[arr.length-1] if(path.basename(file.path) == name+'.js') { let wxml = fs.readFileSync(dir + '/' + name + '.wxml', 'utf8') + let hyperscript = compile(wxml) let json = require(dir + '/' + name + '.json') - let hyperscript = compile(replaceWxmlComponentHtml(dir, wxml,json)) - - let importStr = json2import(json, dir) + let importStr = json2import(json) file.contents = Buffer.concat([ Buffer.from( `${importStr}import appCss from '../../app.wxss' @@ -141,7 +122,7 @@ import { setData } from '../../../utils/set-data' Buffer.from( file.contents .toString() - .replace('Page({', + .replace('Page({', `const mpOption = function () { return ({`)+` }` @@ -270,71 +251,10 @@ function route(arr) { return result.join('\r\n') } -// 打包生成web component 转换统一src 路径 -function fileComponentDom(filePth) { - let filePathArray = filePth.replace(__dirname, '').replace('.js', '').split('/'); - filePathArray.shift(); - - return 'wx-h5-' + filePathArray.join('-'); -} - -// 组件转换绝对路径 不再需要依赖强匹配目录文件夹 -function replaceComponentOnPath(tag, str, tagName) { - const reg = new RegExp(`<(${tag})(?=\\s)|<(\\/${tag})>`, 'g'); - - return str.replace(reg, function(match, $1, $2) { - if ($1) { - return '<' + tagName; - } - return '' - }); -} - -// 匹配转换html 转换 目录文件夹名字 -function replaceWxmlComponentHtml(dir, html,json) { - Object.keys(json.usingComponents).forEach((key, i) => { - html = replaceComponentOnPath( - key, - html, - fileComponentDom(path.join(dir, json.usingComponents[key])) - ); - }) - - return html; -} - - -function json2import(json, dir) { +function json2import(json) { let arr = [] if (json.usingComponents) { - Object.keys(json.usingComponents).forEach(key => { - let usingArry = path.resolve(dir, json.usingComponents[key]).split('/'); - usingArry.pop(); - let wxssPath = ''; - - try{ - let indexWsxx = [...usingArry, 'index.wxss'].join('/'); - fs.statSync(indexWsxx); - wxssPath = json.usingComponents[key]; - }catch(e){ - - } - - try{ - let keyWsxx = [...usingArry, key + '.wxss'].join('/'); - fs.statSync(keyWsxx); - wxssPath = keyWsxx; - }catch(e){ - - } - - wxssPath && arr.push(`import '${wxssPath}'`) - - // let wxml = fs.readFileSync(wxssPath, 'utf8') - // console.log(Buffer.from(compileWxss(wxml))) - - // arr.push(Buffer.from(compileWxss(wxml))) arr.push(`import '${json.usingComponents[key]}'`) }) } @@ -403,4 +323,3 @@ gulp.task('app-wxss', ['copy'], () => { }) gulp.task('default', ['copy', 'components', 'app-wxss', 'pages-wxss', 'components-wxss', 'pages', 'appjs', 'route', 'watch']) -gulp.task('build', ['copy', 'components', 'app-wxss', 'pages-wxss', 'components-wxss', 'pages', 'appjs', 'route']) diff --git a/packages/omi-mp/src/mp/components/my-ele/my-ele.js b/packages/omi-mp/src/mp/components/my-ele/my-ele.js index b751aa6f1..1cf32cad4 100644 --- a/packages/omi-mp/src/mp/components/my-ele/my-ele.js +++ b/packages/omi-mp/src/mp/components/my-ele/my-ele.js @@ -88,7 +88,7 @@ function css() { function render() { const { name, age } = this.data; return h("div", null, [ - h("button", { ontap: this.myMethods }, [ + h("button", { ontap: this.myMethods, onclick: this.myMethods }, [ `Click me will log dntzhang to the console panel` ]), h("div", null, [`props - name:${name}, age:${age}`]), diff --git a/packages/omi-mp/src/mp/pages/index/index.js b/packages/omi-mp/src/mp/pages/index/index.js index e8e1e4837..46eed493a 100644 --- a/packages/omi-mp/src/mp/pages/index/index.js +++ b/packages/omi-mp/src/mp/pages/index/index.js @@ -131,7 +131,8 @@ function render() { ontap: this.bindViewTap, class: `userinfo-avatar`, src: userInfo.avatarUrl, - mode: `cover` + mode: `cover`, + onclick: this.bindViewTap }, [] ), diff --git a/packages/omi-mp/src/mp/pages/logs/logs.js b/packages/omi-mp/src/mp/pages/logs/logs.js index 573ce6716..7c6889a8c 100644 --- a/packages/omi-mp/src/mp/pages/logs/logs.js +++ b/packages/omi-mp/src/mp/pages/logs/logs.js @@ -82,7 +82,7 @@ function render() { logs.map((log, index) => { return h( "block", - {}, + { style: { width: "100%" } }, h("span", { class: `log-item` }, [`${index + 1}. ${log}`]), h("span", { class: `log-item` }, [`by omi-mp`]) );