Skip to content

Commit

Permalink
Revert "move gif to CDN FIX issue#16"
Browse files Browse the repository at this point in the history
This reverts commit 243e40f.
  • Loading branch information
halfrost committed Mar 25, 2018
1 parent 243e40f commit b8d448d
Show file tree
Hide file tree
Showing 11 changed files with 18 additions and 20 deletions.
20 changes: 9 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -291,16 +291,14 @@ Finally look at Cordova's effect:

Build a Web page with Vue.js quickly.



<p align='center'>
<img src='https://ob6mci30g.qnssl.com/Blog/ArticleImage/49_22.gif'>
<img src='./image/Gifs/Web.gif'>
</p>

Vuex management status is very convenient. Login status saved in the state inside, the global object will be obtained it.

<p align='center'>
<img src='https://ob6mci30g.qnssl.com/Blog/ArticleImage/49_23.gif'>
<img src='./image/Gifs/Web-login.gif'>
</p>

If there is no login in information and user click the purchase button to buy an e-book, it will jump to the login page.
Expand All @@ -316,47 +314,47 @@ In HTML5 history mode, router-link will intercept the click event so that the br
When you are using the base option in HTML5 history mode, you don't need to include it in to prop's URLs.

<p align='center'>
<img src='https://ob6mci30g.qnssl.com/Blog/ArticleImage/49_24.gif'>
<img src='./image/Gifs/Web-logout.gif'>
</p>

Similarly, once the user logs out, all places showing the user name will become a status to be logged in, the shopping cart on navigationBar also be disappeared. Manage status with Vuex, very exciting.

<p align='center'>
<img src='https://ob6mci30g.qnssl.com/Blog/ArticleImage/49_25.gif'>
<img src='./image/Gifs/Web-email.gif'>
</p>

This is the email form validation, not too much technical content.

<p align='center'>
<img src='https://ob6mci30g.qnssl.com/Blog/ArticleImage/49_26.gif'>
<img src='./image/Gifs/Web-buy.gif'>
</p>

Here is the shopping cart page and use the MVVM page binding ideas. There are four buttons on the page, clicking any one will immediately change the related total price. To iOSer, it's worthy to learn the implemention on the MVVM.

Then this is the iPhone's Safari performance, the speed is well.

<p align='center'>
<img src='https://ob6mci30g.qnssl.com/Blog/ArticleImage/49_27.gif'>
<img src='./image/Gifs/Web-iPhone.gif'>
</p>

In the cross-platform of these applications, the best experience, I think, is the application of Mac.

<p align='center'>
<img src='https://ob6mci30g.qnssl.com/Blog/ArticleImage/49_28.gif'>
<img src='./image/Gifs/Web-Mac.gif'>
</p>

Finally is the mobile phone app build by Cordova framework, I'm a little picky and not satificated with the unoptimized Cordova. See this showcase below:

iPhone application

<p align='center'>
<img src='https://ob6mci30g.qnssl.com/Blog/ArticleImage/49_29.gif'>
<img src='./image/Gifs/Web-iPone app.gif'>
</p>

iPad application

<p align='center'>
<img src='https://ob6mci30g.qnssl.com/Blog/ArticleImage/49_30.gif'>
<img src='./image/Gifs/Web-iPad app.gif'>
</p>

## 🤔 Reflection
Expand Down
18 changes: 9 additions & 9 deletions README_CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -281,13 +281,13 @@ iPad 的 Web
用 Vue.js 搭建一个 Web 页面很快。

<p align='center'>
<img src='https://ob6mci30g.qnssl.com/Blog/ArticleImage/49_22.gif'>
<img src='./image/Gifs/Web.gif'>
</p>

看看 Vuex 管理状态的方便。登录状态保存在 state 里面,全局都会获取到。

<p align='center'>
<img src='https://ob6mci30g.qnssl.com/Blog/ArticleImage/49_23.gif'>
<img src='./image/Gifs/Web-login.gif'>
</p>

一旦用户没有登录,点击购买电子书的时候,判断没有用户登录都会跳转到登录页面。
Expand All @@ -303,47 +303,47 @@ iPad 的 Web
当你在 HTML5 history 模式下使用 base 选项之后,所有的 to 属性都不需要写(基路径)了。

<p align='center'>
<img src='https://ob6mci30g.qnssl.com/Blog/ArticleImage/49_24.gif'>
<img src='./image/Gifs/Web-logout.gif'>
</p>

登出页面同理,一旦用户登出,所有显示用户名的地方都会变成登录,navigationBar 上的购物车也一并消失。用 Vuex 管理状态,挺好的。

<p align='center'>
<img src='https://ob6mci30g.qnssl.com/Blog/ArticleImage/49_25.gif'>
<img src='./image/Gifs/Web-email.gif'>
</p>

这就是 email 的表单验证了,没有太多的技术含量。

<p align='center'>
<img src='https://ob6mci30g.qnssl.com/Blog/ArticleImage/49_26.gif'>
<img src='./image/Gifs/Web-buy.gif'>
</p>

这里是购物车页面,这里用到了 MVVM 页面的绑定的思想,页面上 4 个按钮,点任意一个按钮都会立即改变下面的总价。关于 Vue.js 的 MVVM 实现思想值得 iOSer 们学习。

接下来这个是 iPhone 的 Safari 上的表现,速度还可以。

<p align='center'>
<img src='https://ob6mci30g.qnssl.com/Blog/ArticleImage/49_27.gif'>
<img src='./image/Gifs/Web-iPhone.gif'>
</p>

在跨平台的这几个应用中,体验最好的,我觉得还是 Mac 的应用。使用起来满意度非常高。

<p align='center'>
<img src='https://ob6mci30g.qnssl.com/Blog/ArticleImage/49_28.gif'>
<img src='./image/Gifs/Web-Mac.gif'>
</p>

最后就是 Cordova 框架搭建的 手机 app,体验度不高,具体如何,看图吧,总之不优化的 Cordova ,对于挑剔的我来说,我是不满意的。

iPhone 上的应用

<p align='center'>
<img src='https://ob6mci30g.qnssl.com/Blog/ArticleImage/49_29.gif'>
<img src='./image/Gifs/Web-iPone app.gif'>
</p>

iPad 上的应用

<p align='center'>
<img src='https://ob6mci30g.qnssl.com/Blog/ArticleImage/49_30.gif'>
<img src='./image/Gifs/Web-iPad app.gif'>
</p>

## 🤔 项目完成之后的感想
Expand Down
Binary file added image/Gifs/Web-Mac.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added image/Gifs/Web-buy.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added image/Gifs/Web-email.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added image/Gifs/Web-iPad app.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added image/Gifs/Web-iPhone.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added image/Gifs/Web-iPone app.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added image/Gifs/Web-login.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added image/Gifs/Web-logout.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added image/Gifs/Web.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit b8d448d

Please sign in to comment.