相關(guān)文章閱讀：

微信小程序怎么打開(kāi) 微信小程序在哪里進(jìn)入

怎么安裝微信小程序開(kāi)發(fā) 微信小程序開(kāi)發(fā)安裝教程

微信小程序怎么申請(qǐng)注冊(cè) 微信小程序官方注冊(cè)圖文流程

首先，我們必須先認(rèn)清一個(gè)顯而易見(jiàn)的事實(shí)：在本質(zhì)上，微信應(yīng)用號(hào)就是WebApp。那么有朋友就會(huì)問(wèn)了，WebApp是什么呢？其實(shí)，WebApp就是區(qū)別于傳統(tǒng)手機(jī)App的另外一種App形式。它是基于H5技術(shù)開(kāi)發(fā)的一種網(wǎng)頁(yè)型App，可以擁有和傳統(tǒng)手機(jī)App幾乎一樣的功能和形式，但又可以非常方便地嵌入到微信應(yīng)用號(hào)或者其他應(yīng)用里。以往，傳統(tǒng)的手機(jī)App需要大量的資金和技術(shù)團(tuán)隊(duì)的投入，開(kāi)發(fā)和維護(hù)周期也相當(dāng)漫長(zhǎng)，讓很多人望而卻步。
在電腦中先畫(huà)好一個(gè)雛形，再選擇功能模板的位置安放，最后一旦確定好總體架構(gòu)，就可以開(kāi)始設(shè)計(jì)組件布局。
第一要做的是畫(huà)出頁(yè)面流程圖，流程圖主要用于確定每個(gè)功能模塊的交互細(xì)節(jié)。當(dāng)你把所有的交互場(chǎng)景都畫(huà)出來(lái)后，那么應(yīng)用號(hào)所需要的頁(yè)面也就基本上完成了。這時(shí)，你就需要與設(shè)計(jì)師一起，對(duì)所有頁(yè)面進(jìn)行UI設(shè)計(jì)與頁(yè)面美化了。最終生成的Web App的原型：包括所有頁(yè)面設(shè)計(jì)與交互流程?，F(xiàn)在獻(xiàn)上我做微商城大概的設(shè)計(jì)頁(yè)面框架，給大家一個(gè)思路。

登錄賬號(hào)后，選擇空白模板，自己建模板。自己沒(méi)UI的，如果你們想省時(shí)間，我覺(jué)得可以套用模板，可以比較快的生成自己想要的Web App。
來(lái)看看我大致的首頁(yè)布局吧！

看不懂組件名稱，不懂組件怎么用？看看《幫助》！《幫助》都已經(jīng)把大致的布局進(jìn)行了粗略的介紹。至少不會(huì)讓自己對(duì)功能模模糊糊。如果對(duì)某個(gè)組件還是不清楚，那么可以點(diǎn)擊那個(gè)組件的右上角的小問(wèn)號(hào)圖標(biāo)，會(huì)有一個(gè)詳細(xì)的介紹。

先插入一個(gè)頂部導(dǎo)航組件，作為首頁(yè)，頂部導(dǎo)航的標(biāo)題我建議都是大家的公司或者商城名稱

然后創(chuàng)建一個(gè)輪播圖組件做Banner，因?yàn)槲易龅氖俏⑸坛?，用輪播的方式播放一些我修好的商品圖片。然后在右邊的組件內(nèi)容中對(duì)每個(gè)輪播圖片逐一添加相對(duì)應(yīng)頁(yè)面鏈接去向。

接著我創(chuàng)建了一個(gè)圖片列表，并在頁(yè)面屬性中把行列設(shè)置成了4列1行，我再修改圖片高度直接設(shè)置為圓形，系統(tǒng)就自動(dòng)調(diào)整圖片高低了。接著我更換了圖片，替換成按鈕圖片，并在點(diǎn)擊事件中的頁(yè)面鏈接至相對(duì)應(yīng)的頁(yè)面。如圖

因?yàn)槲蚁朐谶@一行左右分開(kāi)，并且是做成左邊是大圖，右邊是上下分開(kāi)的小圖加標(biāo)題。
所以我先插入一個(gè)雙欄組件，再在右邊的欄里再插入一個(gè)雙欄，這樣就實(shí)現(xiàn)了欄目的劃分。接著在最左邊的雙欄位置插入一個(gè)大圖，并且對(duì)它的寬度和高度調(diào)節(jié)。然后對(duì)最右邊的雙欄也插入一個(gè)圖片組件，并且右鍵復(fù)制一個(gè)圖片組件到下面（小技巧），如圖
接著拖入文本插件，這里需要注意，拖入第三文本框后，需要先對(duì)它的上間距進(jìn)行調(diào)整，再拖入第四個(gè)文本框，這樣才可以做到上下圖片對(duì)應(yīng)文字的標(biāo)題與內(nèi)容。（小技巧）

插入底部導(dǎo)航組件，任何的App都有底部導(dǎo)航，而且每個(gè)頁(yè)面都有，所以我這里需要提醒，每個(gè)頁(yè)面的編輯完后，都需要插入一個(gè)底部導(dǎo)航。我自己一般是先編輯一個(gè)純底部導(dǎo)航的頁(yè)面，然后編輯其他頁(yè)面的時(shí)候，我先復(fù)制這個(gè)純底部導(dǎo)航的頁(yè)面再編輯，這樣能省下我不少時(shí)間。（小技巧）
接下來(lái)是高級(jí)組件中的商品列表組件。這個(gè)組件添加到你商品頁(yè)面之后，你在前端的App制作只需要編輯一下這個(gè)版塊的分布和排版就好。因?yàn)樗械纳唐窋?shù)據(jù)和圖片都是在后臺(tái)中上架和調(diào)整價(jià)錢(qián)的，這也是方便后臺(tái)的數(shù)據(jù)管理吧。
不過(guò)我想吐糟一下，后臺(tái)的數(shù)據(jù)整理和圖片上傳后，前端制作也看不到圖片，需要自己預(yù)覽App才能看見(jiàn)。

進(jìn)入后臺(tái)管理，我們就看到商品管理這個(gè)選項(xiàng)。我們先添加分類，保證自己上架的物品不會(huì)混亂難以管理。分類好后再在每個(gè)對(duì)應(yīng)的分類中添加商品和填寫(xiě)商品的信息即可。如圖

在商品管理后臺(tái)上傳了所有的商品數(shù)據(jù)后，現(xiàn)在只需要回到前端制作App的頁(yè)面，在商品頁(yè)面給每個(gè)商品填上對(duì)應(yīng)后臺(tái)的鏈接就可以了。非常方便快捷。
既然商品都上架，并且讓自己的商品在售了，那就需要學(xué)會(huì)管理后臺(tái)的訂單和查看訂單，下面是訂單管理頁(yè)面。

其實(shí)大家都在觀望微信應(yīng)用號(hào)，但是大家完全可以先制作一個(gè)webapp，等到應(yīng)用號(hào)一上線，我們就可以把webapp的鏈接直接嵌入到應(yīng)用號(hào)中。