天天看點

新手開始制作第一個H5移動端WEB購物流程頁面的思路

今天,開始制作我自己需要的移動電商單産品頁面,通過上次在網上下載下傳的移動電商購物流程頁面,我們現在開始。

今天主要說的是制作這個流程的思路。

由于我是新手,還有很多東西不懂,是以,我暫時隻能是用最簡單化的制作過程。

是以我的準備工作有:

1)chrome 浏覽器,主要作用是預覽和測試效果

2)手機一台,主要作用是預覽和測試效果

3)Hbuilder 編輯器,主要是可以直接點選 運作,然後就可以測試效果(不用配置浏覽器)

4)Visual Studio code編輯器

首先打開我的産品詳情頁面是這樣的效果:

新手開始制作第一個H5移動端WEB購物流程頁面的思路

而我要的效果是:

新手開始制作第一個H5移動端WEB購物流程頁面的思路

于是,我開始用visual studio code 打開它,(直接把檔案夾拖到VS code即可打開),修改文字,個性布局,ctrl+f ,全局查找變量,一大堆,中間在布局上,跟上面有點對不上。

這是最重要的一點,也是我今天所說的思路,就是先不必管細節。

如果我們陷于細節,就很容易就在那裡浪費時間,我們在做任何事情的時候,都有可能是這樣。

比如,我們開會,讨論一下,從産品拍攝,制作,到上架,出售等整個過程涉及的流程,負責人時,

如果我們讨論拍攝是陷于拍攝的細節,導緻大家浪費時間是很沒必要的,這種情況,尤其容易出現在開會的時間,畢竟會議通常是開放讨論的,是以,他容易因某個個體成員的意見,使讨論的方向轉變,是以這時也及時調整過來。

費話不說了,當我發現,我在制作的過程中,對布局的修改,調整來來回回幾分鐘後,我發覺浪費了一些時間 ,于是,我馬上調整了過來。

停止,然後繼續往下一步走,(畢竟,作為新手,還有很多概念性的,基礎的東西還不了解)。

于是,我忍住這個痛苦(實話說,很多人也會追求完美,做出來的一個頁面,就是最終的頁面,但事實往往并非如此),繼續前行,繼續把下單頁面(忍受不完美),收貨位址(忍受不完美),支付(忍受不完美),等等頁面完成。

完成以後,我回頭再去改這些問題,發覺反而很迅速,遇到阻礙,再看看教程,或視訊。很快就解決了。

總結一句,一開始,當我們要完成一個工作時,可以快速的先完成所有功能,細節慢慢再調,這樣,我認為還是蠻高效的。