diff --git a/packages/omi-cli/template/weui/src/admin.js b/packages/omi-cli/template/weui/src/admin.js deleted file mode 100644 index 709aa9c34..000000000 --- a/packages/omi-cli/template/weui/src/admin.js +++ /dev/null @@ -1,8 +0,0 @@ -import { render } from 'omi' -import './assets/index.css' -import './elements/hello' -import registerServiceWorker from './assets/register-service-worker' -import store from './store/admin-store' - -render(, '#root', store) -registerServiceWorker() diff --git a/packages/omi-cli/template/weui/src/assets/register-service-worker.js b/packages/omi-cli/template/weui/src/assets/register-service-worker.js deleted file mode 100644 index d567aae27..000000000 --- a/packages/omi-cli/template/weui/src/assets/register-service-worker.js +++ /dev/null @@ -1,117 +0,0 @@ -// In production, we register a service worker to serve assets from local cache. - -// This lets the app load faster on subsequent visits in production, and gives -// it offline capabilities. However, it also means that developers (and users) -// will only see deployed updates on the "N+1" visit to a page, since previously -// cached resources are updated in the background. - -// To learn more about the benefits of this model, read https://goo.gl/KwvDNy. -// This link also includes instructions on opting out of this behavior. - -const isLocalhost = Boolean( - window.location.hostname === 'localhost' || - // [::1] is the IPv6 localhost address. - window.location.hostname === '[::1]' || - // 127.0.0.1/8 is considered localhost for IPv4. - window.location.hostname.match( - /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ - ) -) - -export default function register() { - if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { - // The URL constructor is available in all browsers that support SW. - const publicUrl = new URL(process.env.PUBLIC_URL, window.location) - if (publicUrl.origin !== window.location.origin) { - // Our service worker won't work if PUBLIC_URL is on a different origin - // from what our page is served on. This might happen if a CDN is used to - // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 - return - } - - window.addEventListener('load', () => { - const swUrl = `${process.env.PUBLIC_URL}/service-worker.js` - - if (isLocalhost) { - // This is running on localhost. Lets check if a service worker still exists or not. - checkValidServiceWorker(swUrl) - - // Add some additional logging to localhost, pointing developers to the - // service worker/PWA documentation. - navigator.serviceWorker.ready.then(() => { - console.log( - 'This web app is being served cache-first by a service ' + - 'worker. To learn more, visit https://goo.gl/SC7cgQ' - ) - }) - } else { - // Is not local host. Just register service worker - registerValidSW(swUrl) - } - }) - } -} - -function registerValidSW(swUrl) { - navigator.serviceWorker - .register(swUrl) - .then(registration => { - registration.onupdatefound = () => { - const installingWorker = registration.installing - installingWorker.onstatechange = () => { - if (installingWorker.state === 'installed') { - if (navigator.serviceWorker.controller) { - // At this point, the old content will have been purged and - // the fresh content will have been added to the cache. - // It's the perfect time to display a "New content is - // available; please refresh." message in your web app. - console.log('New content is available; please refresh.') - } else { - // At this point, everything has been precached. - // It's the perfect time to display a - // "Content is cached for offline use." message. - console.log('Content is cached for offline use.') - } - } - } - } - }) - .catch(error => { - console.error('Error during service worker registration:', error) - }) -} - -function checkValidServiceWorker(swUrl) { - // Check if the service worker can be found. If it can't reload the page. - fetch(swUrl) - .then(response => { - // Ensure service worker exists, and that we really are getting a JS file. - if ( - response.status === 404 || - response.headers.get('content-type').indexOf('javascript') === -1 - ) { - // No service worker found. Probably a different app. Reload the page. - navigator.serviceWorker.ready.then(registration => { - registration.unregister().then(() => { - window.location.reload() - }) - }) - } else { - // Service worker found. Proceed as normal. - registerValidSW(swUrl) - } - }) - .catch(() => { - console.log( - 'No internet connection found. App is running in offline mode.' - ) - }) -} - -export function unregister() { - if ('serviceWorker' in navigator) { - navigator.serviceWorker.ready.then(registration => { - registration.unregister() - }) - } -} diff --git a/packages/omi-cli/template/weui/src/elements/app/_index.css b/packages/omi-cli/template/weui/src/elements/app/_index.css index 5b1fd0f6b..62a5f3a13 100644 --- a/packages/omi-cli/template/weui/src/elements/app/_index.css +++ b/packages/omi-cli/template/weui/src/elements/app/_index.css @@ -1,32 +1,504 @@ -.app { - text-align: center; +body,html { + height: 100%; + -webkit-tap-highlight-color: transparent } -.app-logo { - animation: app-logo-spin infinite 20s linear; - height: 80px; +body { + font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif } -.app-header { - background-color: #222; - height: 150px; +ul { + list-style: none +} + +.page,body { + background-color: #f8f8f8 +} + +.link { + color: #1aad19 +} + +.container { + overflow: hidden +} + +.container,.page { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0 +} + +.page { + overflow-y: auto; + -webkit-overflow-scrolling: touch; + z-index: 1 +} + +.page.js_show { + opacity: 1 +} + +.page__hd { + padding: 40px +} + +.page__bd_spacing { + padding: 0 15px +} + +.page__ft { + padding-top: 40px; + padding-bottom: 10px; + text-align: center +} + +.page__ft img { + height: 19px +} + +.page__ft.j_bottom { + position: absolute; + bottom: 0; + left: 0; + right: 0 +} + +.page__title { + text-align: left; + font-size: 20px; + font-weight: 400 +} + +.page__desc { + margin-top: 5px; + color: #888; + text-align: left; + font-size: 14px +} + +.page.home .page__intro-icon { + margin-top: -.2em; + margin-left: 5px; + width: 16px; + height: 16px; + vertical-align: middle +} + +.page.home .page__title { + font-size: 0; + margin-bottom: 15px +} + +.page.home .page__bd img { + width: 30px; + height: 30px +} + +.page.home .page__bd li { + margin: 10px 0; + background-color: #fff; + overflow: hidden; + border-radius: 2px; + cursor: pointer +} + +.page.home .page__bd li.js_show .weui-flex { + opacity: .4 +} + +.page.home .page__bd li.js_show .page__category { + height: auto +} + +.page.home .page__bd li.js_show .page__category-content { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0) +} + +.page.home .page__bd li:first-child { + margin-top: 0 +} + +.page.home .page__category { + height: 0; + overflow: hidden +} + +.page.home .page__category-content { + opacity: 0; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + -webkit-transition: .3s; + transition: .3s +} + +.page.home .weui-flex { padding: 20px; - color: white; + -webkit-box-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-transition: .3s; + transition: .3s } -.app-title { - font-size: 1.5em; +.page.home .weui-cells { + margin-top: 0 } -.app-logo { - cursor: pointer; +.page.home .weui-cells:after,.page.home .weui-cells:before { + display: none } -@keyframes app-logo-spin { - from { - transform: rotate(0deg); +.page.home .weui-cell { + padding-left: 20px; + padding-right: 20px +} + +.page.home .weui-cell:before { + left: 20px; + right: 20px +} + +.page.button .page__bd { + padding: 0 15px +} + +.page.button .button-sp-area { + margin: 0 auto; + padding: 15px 0; + width: 60% +} + +.page.cell .page__bd,.page.form .page__bd { + padding-bottom: 30px +} + +.page.actionsheet,.page.dialog { + background-color: #fff +} + +.page.dialog .page__bd { + padding: 0 15px +} + +.page.msg,.page.msg_success,.page.msg_warn,.page.toast { + background-color: #fff +} + +.page.panel .page__bd { + padding-bottom: 20px +} + +.page.article { + background-color: #fff +} + +.page.icons { + text-align: center +} + +.page.icons .page__bd { + padding: 0 40px; + text-align: left +} + +.page.icons .icon-box { + margin-bottom: 25px; + display: -webkit-box; + display: -webkit-flex; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + align-items: center +} + +.page.icons .icon-box i { + margin-right: 18px +} + +.page.icons .icon-box__ctn { + -webkit-flex-shrink: 100; + flex-shrink: 100 +} + +.page.icons .icon-box__title { + font-weight: 400 +} + +.page.icons .icon-box__desc { + margin-top: 6px; + font-size: 12px; + color: #888 +} + +.page.icons .icon_sp_area { + margin-top: 10px; + text-align: left +} + +.page.icons .icon_sp_area i:before { + margin-bottom: 5px +} + +.page.flex .placeholder { + margin: 5px; + padding: 0 10px; + background-color: #ebebeb; + height: 2.3em; + line-height: 2.3em; + text-align: center; + color: #cfcfcf +} + +.page.loadmore { + background-color: #fff +} + +.page.layers { + overflow-x: hidden; + -webkit-perspective: 1000px; + perspective: 1000px +} + +@media only screen and (max-width:320px) { + .page.layers .page__hd { + padding-left: 20px; + padding-right: 20px } +} + +.page.layers .page__bd { + position: relative +} + +.page.layers .page__desc { + min-height: 4.8em +} + +.page.layers .layers__layer { + position: absolute; + left: 50%; + width: 150px; + height: 266px; + margin-left: -75px; + box-sizing: border-box; + -webkit-transition: .5s; + transition: .5s; + background: url(https://weui.io/images/layers/transparent.gif) no-repeat 50%; + background-size: contain; + font-size: 14px; + color: #fff +} + +.page.layers .layers__layer span { + position: absolute; + bottom: 5px; + left: 0; + right: 0; + text-align: center; + -webkit-transition: .5s; + transition: .5s +} + +.page.layers .layers__layer:last-child span { + color: #aaa +} + +.page.layers .layers__layer.j_hide { + opacity: 0 +} + +.page.layers .layers__layer.j_pic span { + color: transparent +} + +@media only screen and (min-width:375px) and (min-height:603px) { + .page.layers .layers__layer { + width: 180px; + height: 320px; + margin-left: -90px + } +} + +@media only screen and (min-width:414px) and (min-height:640px) { + .page.layers .layers__layer { + width: 200px; + height: 355px; + margin-left: -100px + } +} + +.page.layers .layers__layer_popout { + border: 1px solid hsla(0,0%,80%,.5); + z-index: 4 +} + +.page.layers .layers__layer_popout.j_transform { + -webkit-transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(120px); + transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(120px) +} + +@media only screen and (max-width:320px) { + .page.layers .layers__layer_popout.j_transform { + -webkit-transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(140px); + transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(140px) + } +} + +.page.layers .layers__layer_popout.j_pic { + border-color: transparent; + background-image: url(https://weui.io/images/layers/popout.png) +} + +.page.layers .layers__layer_mask { + background-color: rgba(0,0,0,.5); + z-index: 3 +} + +.page.layers .layers__layer_mask.j_transform { + -webkit-transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(40px); + transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(40px) +} + +@media only screen and (max-width:320px) { + .page.layers .layers__layer_mask.j_transform { + -webkit-transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(80px); + transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(80px) + } +} + +.page.layers .layers__layer_navigation { + background-color: rgba(40,187,102,.5); + z-index: 2 +} + +.page.layers .layers__layer_navigation.j_transform { + -webkit-transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px); + transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px) +} + +@media only screen and (max-width:320px) { + .page.layers .layers__layer_navigation.j_transform { + -webkit-transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(20px); + transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(20px) + } +} + +.page.layers .layers__layer_navigation.j_pic { + background-color: transparent; + background-image: url(https://weui.io/images/layers/navigation.png) +} + +.page.layers .layers__layer_content { + background-color: #fff; + z-index: 1 +} + +.page.layers .layers__layer_content.j_transform { + -webkit-transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-120px); + transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-120px) +} + +@media only screen and (max-width:320px) { + .page.layers .layers__layer_content.j_transform { + -webkit-transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px); + transform: translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px) + } +} + +.page.layers .layers__layer_content.j_pic { + background-image: url(https://weui.io/images/layers/content.png) +} + +.page.searchbar .searchbar-result { + display: none; + margin-top: 0; + font-size: 14px +} + +.page.searchbar .searchbar-result .weui-cell__bd { + padding: 2px 0 2px 20px; + color: #666 +} + +.page.actionsheet,.page.picker { + overflow: hidden +} + +.page.picker { + background-color: #fff +} + +.page.gallery { + overflow: hidden +} + +@-webkit-keyframes a { + 0% { + -webkit-transform: translate3d(100%,0,0); + transform: translate3d(100%,0,0); + opacity: 0 + } + to { - transform: rotate(360deg); + -webkit-transform: translateZ(0); + transform: translateZ(0); + opacity: 1 } } + +@keyframes a { + 0% { + -webkit-transform: translate3d(100%,0,0); + transform: translate3d(100%,0,0); + opacity: 0 + } + + to { + -webkit-transform: translateZ(0); + transform: translateZ(0); + opacity: 1 + } +} + +@-webkit-keyframes b { + 0% { + -webkit-transform: translateZ(0); + transform: translateZ(0); + opacity: 1 + } + + to { + -webkit-transform: translate3d(100%,0,0); + transform: translate3d(100%,0,0); + opacity: 0 + } +} + +@keyframes b { + 0% { + -webkit-transform: translateZ(0); + transform: translateZ(0); + opacity: 1 + } + + to { + -webkit-transform: translate3d(100%,0,0); + transform: translate3d(100%,0,0); + opacity: 0 + } +} + +.page.slideIn { + -webkit-animation: a .2s forwards; + animation: a .2s forwards +} + +.page.slideOut { + -webkit-animation: b .2s forwards; + animation: b .2s forwards +} \ No newline at end of file diff --git a/packages/omi-cli/template/weui/src/elements/app/index.js b/packages/omi-cli/template/weui/src/elements/app/index.js index fa1d9c37e..ab72f637a 100644 --- a/packages/omi-cli/template/weui/src/elements/app/index.js +++ b/packages/omi-cli/template/weui/src/elements/app/index.js @@ -1,6 +1,6 @@ import { define, WeElement } from 'omi' -import logo from './logo.svg' import style from './_index.css' +import logo from './logo.png' import '../app-intro' import 'omi-weui/button' @@ -19,18 +19,220 @@ define('my-app', class extends WeElement { render(props, data, store) { return ( -
- primary -
- -

Welcome to {store.data.name}

-
- +
+
+

+ WeUI +

+

WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。

+
+
+ +
+
+ +
) } diff --git a/packages/omi-cli/template/weui/src/elements/app/logo.png b/packages/omi-cli/template/weui/src/elements/app/logo.png new file mode 100644 index 000000000..0810604fa Binary files /dev/null and b/packages/omi-cli/template/weui/src/elements/app/logo.png differ diff --git a/packages/omi-cli/template/weui/src/elements/app/logo.svg b/packages/omi-cli/template/weui/src/elements/app/logo.svg deleted file mode 100644 index b66a01059..000000000 --- a/packages/omi-cli/template/weui/src/elements/app/logo.svg +++ /dev/null @@ -1,23 +0,0 @@ - - - OMI - - - - - - - - - - - - - - - - - - - - diff --git a/packages/omi-cli/template/weui/src/index.js b/packages/omi-cli/template/weui/src/index.js index 395cd5998..d65004b5d 100644 --- a/packages/omi-cli/template/weui/src/index.js +++ b/packages/omi-cli/template/weui/src/index.js @@ -1,8 +1,8 @@ import { render } from 'omi' import './assets/index.css' import './elements/app' -import registerServiceWorker from './assets/register-service-worker' + import store from './store/app-store' render(, '#root', store) -registerServiceWorker() + diff --git a/packages/omi-cli/template/weui/src/store/admin-store.js b/packages/omi-cli/template/weui/src/store/admin-store.js deleted file mode 100644 index adc86472d..000000000 --- a/packages/omi-cli/template/weui/src/store/admin-store.js +++ /dev/null @@ -1,6 +0,0 @@ -export default { - data: { name: 'I am admin page' }, - rename(name) { - this.data.name = name - } -}