首頁 小程序開發 正文

小程序開發交互文檔（小程序的(de)交互設計指南）

小程序開發 2298
本篇文章(zhāng)給大家談談小程序開發交互文檔，以及小程序的(de)交互設計指南對應的(de)知識點，希望對各位有(yǒu)所幫助，不要忘了收藏本站喔。 本文目錄一(yī)覽： 1、美團小程序功能設計（需求文檔）

本篇文章(zhāng)給大家談談小程序開發交互文檔，以及小程序的(de)交互設計指南對應的(de)知識點，希望對各位有(yǒu)所幫助，不要忘了收藏本站喔。

本文目錄一(yī)覽：

美團小程序功能設計（需求文檔）

         墨刀連接： 

一(yī).需求背景

二.需求目的(de)及明細

三.業務流程

    3.1業務流程

    3.2頁面流程

四.功能詳細設計

    4.1交互設計

    4.2原型

五.考核指标

六.總結

公司最近想把用戶約見這個場景在微信小程序上做(zuò)深做(zuò)透，基于這個業務訴求，設計聚餐投票(piào)的(de)功能，便微信群用戶在線下聚會前，能先在線上把大家喜歡的(de)美團店鋪彙總在一(yī)起，然後投票(piào)決策聚會去(qù)吃哪個店，可(kě)以節約用戶的(de)時間成本。

使用投票(piào)聚餐一(yī)定是針對的(de)一(yī)個小群體，這個小群體一(yī)定是有(yǒu)一(yī)定關系的(de)，如(rú);同事，朋(péng)友，同學(xué)，家人等，基于上述理(lǐ)論對用戶-場景-需求分析：

需求目的(de)：完整的(de)投票(piào)聚餐功能，選擇商(shāng)戶到統計投票(piào)。解決用戶在聚餐選擇商(shāng)家時意見不統一(yī)或者想要統計大家意見時的(de)需求。

創建流程 ：

編輯流程 ：

1.我(wǒ)的(de)

在我(wǒ)的(de)頁面中新增入口圖标，點擊後可(kě)進入投票(piào)聚餐

2.新增投票(piào)頁

頁面分為(wèi)新增投票(piào)模塊以及曆史投票(piào)模塊，曆史投票(piào)模塊以時間順序排列

創建投票(piào)：創建投票(piào)後進入選擇餐廳頁面

編輯：點擊編輯後，重新編輯此次記錄，進入确認頁面，可(kě)重新發起投票(piào)

3.選擇餐廳頁

選擇餐廳頁面分為(wèi)3個模塊，頂部的(de)搜索模塊，排序模塊以及商(shāng)家展示模塊。

排序模塊分為(wèi)4種篩選模式：

按照美食種類分類，其中默認為(wèi)全部美食，用戶點擊後出現下拉菜單，用戶可(kě)選擇美食分類（如(rú)：食品保健，特色菜，福建菜等）

按照地(dì)理(lǐ)位置進行(xíng)排序，分類模塊按城市(shì)區域地(dì)理(lǐ)性标志劃分，默認選擇為(wèi)附近

為(wèi)用戶篩選的(de)常用關鍵字排序，分為(wèi)：智能排序，離(lí)我(wǒ)最近，好評優先，銷量最高(gāo)，默認為(wèi)智能排序

按照餐廳服務以及用餐人數為(wèi)用戶進行(xíng)篩選，默認狀态為(wèi)關閉

确認添加：點擊确認添加後，進入确認頁

添加商(shāng)戶：點擊加号添加商(shāng)戶，再此點擊取消添加商(shāng)戶

搜索：點擊搜索頁進入搜索頁面

已添加商(shāng)戶:點擊後進入展開已添加商(shāng)戶，可(kě)以對已添加商(shāng)戶進行(xíng)删除

4.确認頁

确認頁分為(wèi)主題元素，商(shāng)戶展示模塊

主題默認為(wèi)系統填寫，用戶點擊後可(kě)進行(xíng)修改

生成投票(piào)分享好友：點擊後進入好友頁

添加喜歡餐廳：點擊後進入選擇餐廳頁，無人員限制

删除商(shāng)家：點擊後删除商(shāng)家

5.結果頁

模塊分為(wèi)主題模塊，商(shāng)戶展示模塊以及出現在商(shāng)戶暫時模塊下面的(de)統計模塊

投票(piào)：點擊投票(piào)按鈕投票(piào)，再次點擊取消投票(piào)；用戶若已選擇商(shāng)戶，在點擊其他商(shāng)戶的(de)投票(piào)按鈕将自(zì)動取消已選的(de)上加商(shāng)戶。

随機(jī)功能：場景為(wèi)當出現平票(piào)時為(wèi)用戶随機(jī)一(yī)家商(shāng)戶，沒有(yǒu)操作權限，任何人都可(kě)以操作，但點擊一(yī)次後默認10分鍾後才能再次點擊，随機(jī)結果将一(yī)直展現，直到下次随機(jī)出現新的(de)結果

回首頁：點擊後返回首頁

添加喜歡餐廳：點擊後進入餐廳選擇頁，選擇完畢後直接進入到結果頁。

1.考察用戶日活增長(cháng)指數：當天日貨量-前一(yī)天的(de)日活量/前一(yī)天的(de)日活量x100%。投票(piào)聚餐是有(yǒu)分享屬性存在的(de)，純在分享屬性，進入小程序的(de)用戶數應相應增多。

2.對投票(piào)聚餐的(de)入口，新增投票(piào)以及生成投票(piào)分享好友進行(xíng)埋點，統計訪問人數，分别計算轉化率。是考核功能的(de)轉換率，用戶流入入口的(de)數據，是判斷這個需求是真需求還是僞需求的(de)根本。

3.使用流程轉化率：新增投票(piào)訪問人數/投票(piào)聚餐的(de)訪問人數x100%，生成投票(piào)分享好友訪問人數/投票(piào)聚餐的(de)訪問人數x100%。此數據是對流程的(de)考察，用戶是否覺得流程好用，從此數據能夠得出一(yī)定的(de)結論。

總結

投票(piào)聚餐是針對于當代年(nián)輕人常出現的(de)聚餐場景，由于每個人都有(yǒu)自(zì)己的(de)喜好而出現的(de)意見不統一(yī)的(de)需求，因此誕生出來的(de)功能。此功能要包含完整的(de)投票(piào)流程，從選擇餐廳-投票(piào)，并需将選擇餐廳的(de)分類功能盡量做(zuò)詳細，給用戶更多的(de)參考意見。此功能完成後，用戶日活應有(yǒu)一(yī)定程度的(de)增長(cháng)。

微信小程序開發的(de)完整流程介紹，新手必讀

自(zì)從跳一(yī)跳小程序遊戲出現後，一(yī)夜之間，小程序就變得家喻戶曉了，功能開發也越來越豐富，在微信搜一(yī)搜就會發現許多大品牌早已有(yǒu)自(zì)己的(de)小程序了，越來越多的(de)企業和(hé)商(shāng)家都看中了這個風口，想快速開發出一(yī)款屬于自(zì)己的(de)小程序，那小程序開發的(de)流程是怎樣的(de)呢(ne)？

一(yī)、準備好小程序開發所要用到的(de)材料

企業開發小程序所需的(de)材料有(yǒu)：

公司的(de)營業執照、法人的(de)手機(jī)号、身份證号、微信号掃描、認證單——用于微信公衆号認證。

銀行(xíng)對公賬号、銀行(xíng)開戶許可(kě)證、企業網銀——申請支付接口。

小程序logo、企業介紹。産品信息、聯系方式等——小程序開發。

注： 個人可(kě)以申請微信小程序，但無法申請微信支付接口。

二、微信小程序開發的(de)完整流程介紹

1. 設計原型圖，把想要實現的(de)功能大概畫出來，這一(yī)步主要探讨的(de)是邏輯思維，隻有(yǒu)把邏輯理(lǐ)清楚了，後面的(de)工作才會開展的(de)更順暢，需要客戶和(hé)設計師反複溝通确定才可(kě)以實現，減少溝通過程中存在的(de)一(yī)些誤差。

2. 注冊小程序賬号，需要支付300元的(de)認證費用，假如(rú)需要使用微信支付功能，那還要申請支付接口。

3. UI設計，UI設計師根據原型圖、産品特點、公司文化等來設計界面，比較注重外觀和(hé)細節，優質的(de)界面會讓人有(yǒu)流連忘返的(de)感覺，讓用戶把小程序添加到收藏列表中。

4. 後端開發，根據原型圖制作系統後台和(hé)開發相關接口，包括後台數據管理(lǐ)、和(hé)小程序前台交互的(de)接口。小程序接口需要使用HTTPS，也就是服務器必須按照SSL證書，同時需要加入相關域名到管理(lǐ)後台。

5. 前端開發，小程序前端工程師除了制作界面外，還需要對接後台的(de)接口來進行(xíng)數據交互，從而制作出完整的(de)流程，制作完成生成體驗版，供大家內(nèi)部測試。

6. 測試環節，小程序也講究兼容性，測試人員要測一(yī)下開發出來的(de)功能是否能正常使用，蘋果和(hé)安卓版本是否會有(yǒu)誤差，确保小程序的(de)各項功能正常。

7. 最後提交申請上線，體驗版測試通過後，管理(lǐ)員可(kě)以提交到平台審核，平台審核通過後即可(kě)發布上線，供所有(yǒu)平台用戶使用。

PRD：「FITLIFE」小程序産品需求文檔（用戶端）

筆(bǐ)者通過産品概況、産品結構、業務流程圖、全局說明、功能性需求、非功能性需求分析等模塊，系統輸出這一(yī)份關于“FITLIFE”小程序用戶端的(de)産品需求文檔。

Hi~最近在對自(zì)己參與過的(de)項目進行(xíng)總結，希望可(kě)以和(hé)大家分享學(xué)習交流。輸出內(nèi)容是檢視(shì)自(zì)己的(de)方式，所以我(wǒ)就來吸取經驗了。

通過研讀各位優秀作者的(de)精品，我(wǒ)學(xué)習到了不少知識。此次，以實際工作中遇到的(de)情況作為(wèi)案例，我(wǒ)将從0至1的(de)産品中抽取重點模塊進行(xíng)分享。

為(wèi)了閱讀體驗，我(wǒ)将盡量簡化常規化的(de)環節，本次采用AXURE梳理(lǐ)PRD——利用AXURE動态面闆和(hé)內(nèi)聯框架，制作文檔導航，提高(gāo)浏覽人員的(de)閱讀效率。

一(yī)、概述

1. 産品介紹

2. 文檔修訂記錄

将重點模塊添加對應的(de)跳轉鏈接，方便浏覽人員迅速定位內(nèi)容。

版本号規則：小數點後為(wèi)當前版本的(de)小更新，小數點前為(wèi)大版本更新。

修訂屬性：新增、修改、删除

二、産品結構

1. 信息結構圖

2. 功能結構圖

由于完整結構圖展開占很大的(de)篇幅并且看不清楚，為(wèi)了閱讀體驗，對結構圖部分收縮。完整版結構圖可(kě)在AXURE中查看。

三、業務流程圖

建議将流程圖統一(yī)整理(lǐ)至表格中，做(zuò)成鏈接跳轉形式，實現快速查閱。為(wèi)了順暢的(de)需求閱讀體驗，将各自(zì)的(de)流程圖放在之後的(de)需求描述部分中展示。

四、全局說明

1. 名詞術語說明

2. 權限彈窗

3. 時間距離(lí)規範

3.1 時間規範

3.2 距離(lí)規範

4. 異常情況

4.1 網絡異常

手機(jī)網絡連接異常，小程序彈窗提示如(rú)下：

4.2 用戶狀态說明

五、功能性需求說明

良好的(de)需求閱讀體驗需要保證閱讀過程是順暢的(de)。

在這部分，首先列出【需求清單】，總覽這次需求涉及的(de)模塊及簡要信息。緊接着，按照【需求模塊】-【流程圖】-【原型頁面流轉】-【原型需求拆解】的(de)叙述邏輯去(qù)完成各個模塊的(de)需求說明。

1. 需求池需求清單

1.1 需求管理(lǐ)池

需求類型：新增需求、需求調整、功能優化、BUG修複、UI優化

系統：涉及到的(de)系統及模塊

需求說明：簡述需求

優先級判斷：重要緊急、重要但不緊急、緊急但不重要、既不緊急也不重要（ps：我(wǒ)們(men)要經常關注重要但不緊急的(de)任務進度，避免重要緊急任務紮堆出現。）

1.2 需求清單

對需求管理(lǐ)池評估篩選後，将需求模塊、對應功能、需求優先級、完成情況統一(yī)整理(lǐ)到表格中。同樣的(de)，這裏将模塊名稱做(zuò)成鏈接格式，快速查閱對應的(de)需求模塊。

優先級規範：p1、p2......數字越小代表優先級越高(gāo)。

2. 新用戶首頁模塊

2.1 新用戶登錄流程圖

2.2 新用戶登錄原型（點擊查看大圖）

2.3 首頁

3. 預約團課模塊

3.1 團課預約流程圖

3.2 團課預約頁面流轉

3.2 課程列表頁

3.3 課程詳情頁

3.4 預約課程頁

4. 預約私教模塊

4.1 私教預約流程圖

4.2 私教預約頁面流轉

4.3 私教列表頁

4.4 私教詳情頁

4.5 私教預約頁

5 購卡模塊

5.1 購卡流程圖

5.2 購卡頁面流程

5.3 購買儲值卡頁面

6. 我(wǒ)的(de)模塊（個人中心）

6.1 個人頁面

6.2 修改資料

6.3 我(wǒ)的(de)卡包

6.4 我(wǒ)的(de)課程包

6.5 我(wǒ)的(de)優惠券

6.6 富文本頁面

六、非功能性需求

非功能性需求，是比較容易忽視(shì)的(de)部分，往往和(hé)性能、安全挂鈎，影響着産品的(de)穩定性與安全性。

以下僅僅是例子(zǐ)，具體方案需要根據業務情況和(hé)産品特性與相關人員深入溝通。

1. 性能需求

響應時間：系統對請求做(zuò)出響應的(de)時間。例如(rú)系統處理(lǐ)一(yī)個HTTP請求需要200ms，這個200ms就是系統的(de)響應時間。

并發用戶數：同時承載正常使用系統功能的(de)用戶數量。

與性能相關的(de)數據指标還有(yǒu)QPS（每秒響應請求數）、TPS（每秒處理(lǐ)的(de)事務數）等。

性能需求這部分僅僅是舉個例子(zǐ)，具體情況和(hé)數據方案，需要和(hé)相關人員深入溝通。

2. 可(kě)用性需求

避免用戶高(gāo)頻點擊無反饋的(de)情況。

為(wèi)用戶提供反饋渠道(dào)。

保持文案與組件的(de)一(yī)緻性。

3. 數據統計需求

産品初期需要一(yī)定基礎的(de)數據提供支持，因此，除了小程序官方數據統計平台，再接入第三方統計平台，統計以下事件的(de)數據及路徑轉化率。

七、思考總結

1. 內(nèi)容細節

流程圖和(hé)頁面流轉圖要整齊統一(yī)，實在太多信息，建議用子(zǐ)流程模塊和(hé)多頁面分述解決。見過很多像“蜘蛛網”一(yī)樣的(de)圖，閱讀體驗比較糟糕。

盡量讓用戶不用點開大圖就能看清內(nèi)容，本篇部分頁面流轉圖和(hé)頁面需求也難免遇到這類問題。

異常邏輯和(hé)toast彈窗等細節需要加強把控，本篇這部分還是有(yǒu)所欠缺。

2. 高(gāo)保真or低(dī)保真？

低(dī)保真線框圖：重點在于功能、結構、流程的(de)梳理(lǐ)，利用簡單的(de)框架和(hé)元素，省時省力；但細節相對高(gāo)保真沒這麽完善，可(kě)能會有(yǒu)一(yī)定的(de)溝通成本。

高(gāo)保真：針對于高(gāo)層領導及投資人等，進行(xíng)産品概念演示，視(shì)覺效果好，細節相對完善；相當于是一(yī)個産品的(de)demo，但修改成本較高(gāo)。

原型交互做(zuò)的(de)很酷炫，證明你對工具非常熟練。但如(rú)果為(wèi)了做(zuò)交互花費了大量的(de)時間，就得考慮時間成本值不值得。如(rú)果能夠用簡單的(de)注釋和(hé)跳轉，清晰表達交互邏輯，會不會省時省力一(yī)些？

具體情況具體分析，比如(rú)，你做(zuò)了很多交互，開發做(zuò)漏了會說：“沒寫清楚啊，我(wǒ)怎麽知道(dào)哪裏可(kě)以點擊呢(ne)？”

因此，我(wǒ)的(de)習慣是做(zuò)簡單的(de)“交互邏輯+交互注釋”，盡量避免複雜且耗時耗力的(de)交互。

當然，重要核心的(de)交互邏輯，繪制出來比文字說明更容易理(lǐ)解。這時候，如(rú)果有(yǒu)現成的(de)組件就套用，如(rú)果沒有(yǒu)，就采用“圖+文字+口述”的(de)方式表達清楚。

3. WORD？AXURE？

需求文檔用什麽工具寫比較好？

這是我(wǒ)見過比較多的(de)産品話題讨論之一(yī)——有(yǒu)用WORD的(de)，有(yǒu)用AXURE的(de)，還有(yǒu)用墨刀、石墨文檔等等......

我(wǒ)曾經請教過兩位分别使用WORD和(hé)AXURE撰寫需求文檔的(de)朋(péng)友，他們(men)是這樣的(de)看法：

WORD選手：

用word寫，形式更規範。

結構大綱清晰，細節到位。

洋洋灑灑幾十頁，滿足感杠杠滴。

AXURE選手：

用AXURE寫，圖+标注+交互，更直觀地(dì)表達産品需求，閱讀更順暢。

預覽方便，支持上傳雲端同步。

WORD寫了也沒人有(yǒu)耐心看，這個世界很浮躁啊。

我(wǒ)的(de)看法：

需求文檔是幫助傳達及溝通需求的(de)工具，講究的(de)是“可(kě)讀性”。所以，在選擇采用什麽方式之前，需要和(hé)團隊溝通達成共識，即什麽樣的(de)方式能給到他們(men)更好的(de)閱讀體驗。

我(wǒ)在實際工作中，采用的(de)是AXURE，整理(lǐ)需求與線框圖後與團隊溝通，實現需求快速流轉更新。但我(wǒ)會選擇再用WORD梳理(lǐ)一(yī)遍，利用文字梳理(lǐ)大綱結構，整理(lǐ)産品邏輯和(hé)需求，能夠發現某些疏漏的(de)環節，完善産品細節。因此，用WORD寫，是一(yī)個良好的(de)查漏補缺的(de)手段，是檢視(shì)自(zì)身邏輯的(de)過程。

最後，由于篇幅關系，本次分享隻展示了部分內(nèi)容，完整預覽請在以下鏈接查閱。

預覽鏈接：

希望自(zì)己能堅持輸出內(nèi)容，定期複盤，與優秀的(de)你們(men)碰撞更棒的(de)想法，共同進步~

幫客戶做(zuò)了一(yī)個小程序，客戶需要一(yī)份開發文檔，文檔裏需要寫什麽內(nèi)容

分三段，一(yī)，開發用途或小程序目标需求（可(kě)以多寫點，怎麽寫漂亮(liàng)就怎麽寫）二，編寫過程，就是編程用了什麽，（簡單點，專業的(de)沒人看的(de)懂），三總結性的(de)，小程序上線測試，得到的(de)一(yī)些數據。

微信小程序怎麽開發 微信小程序開發教程分享

微信應用号（小程序，「應用号」的(de)新稱呼）終于來了！

目前還處于內(nèi)測階段，微信隻邀請了部分企業參與封測。想必大家都關心應用号的(de)最終形态到底是什麽樣子(zǐ)？怎樣将一(yī)個「服務号」改造成為(wèi)「小程序」？

我(wǒ)們(men)暫時以一(yī)款簡單的(de)第三方工具的(de)實例，來演示一(yī)下開發過程吧(ba)。

序言

開始開發應用号之前，先看看官方公布的(de)「小程序」教程吧(ba)！（以下內(nèi)容來自(zì)微信官方公布的(de)「小程序」開發指南）

本文檔将帶你一(yī)步步創建完成一(yī)個微信小程序，并可(kě)以在手機(jī)上體驗該小程序的(de)實際效果。這個小程序的(de)首頁将會顯示歡迎語以及當前用戶的(de)微信頭像，點擊頭像，可(kě)以在新開的(de)頁面中查看當前小程序的(de)啓動日志。

1. 獲取微信小程序的(de) AppID

首先，我(wǒ)們(men)需要擁有(yǒu)一(yī)個帳号，如(rú)果你能看到該文檔，我(wǒ)們(men)應當已經邀請并為(wèi)你創建好一(yī)個帳号。注意不可(kě)直接使用服務号或訂閱号的(de) AppID。 利用提供的(de)帳号，登錄 ，就可(kě)以在網站的(de)「設置」-「開發者設置」中，查看到微信小程序的(de) AppID 了。

注意：如(rú)果我(wǒ)們(men)不是用注冊時綁定的(de)管理(lǐ)員微信号，在手機(jī)上體驗該小程序。那麽我(wǒ)們(men)還需要操作「綁定開發者」。即在「用戶身份-開發者」模塊，綁定上需要體驗該小程序的(de)微信号。本教程默認注冊帳号、體驗都是使用管理(lǐ)員微信号。

2. 創建項目

我(wǒ)們(men)需要通過開發者工具，來完成小程序創建和(hé)代碼編輯。

開發者工具安裝完成後，打開并使用微信掃碼登錄。選擇創建「項目」，填入上文獲取到的(de) AppID，設置一(yī)個本地(dì)項目的(de)名稱（非小程序名稱），比如(rú)「我(wǒ)的(de)第一(yī)個項目」，并選擇一(yī)個本地(dì)的(de)文件夾作為(wèi)代碼存儲的(de)目錄，點擊「新建項目」就可(kě)以了。

為(wèi)方便初學(xué)者了解微信小程序的(de)基本代碼結構，在創建過程中，如(rú)果選擇的(de)本地(dì)文件夾是個空文件夾，開發者工具會提示，是否需要創建一(yī)個 quick start 項目。選擇「是」，開發者工具會幫助我(wǒ)們(men)在開發目錄裏生成一(yī)個簡單的(de) demo。

項目創建成功後，我(wǒ)們(men)就可(kě)以點擊該項目，進入并看到完整的(de)開發者工具界面，點擊左側導航，在「編輯」裏可(kě)以查看和(hé)編輯我(wǒ)們(men)的(de)代碼，在「調試」裏可(kě)以測試代碼并模拟小程序在微信客戶端效果，在「項目」裏可(kě)以發送到手機(jī)裏預覽實際效果。

3. 編寫代碼

點擊開發者工具左側導航的(de)「編輯」，我(wǒ)們(men)可(kě)以看到這個項目，已經初始化并包含了一(yī)些簡單的(de)代碼文件。最關鍵也是必不可(kě)少的(de)，是 app.js、app.json、app.wxss 這三個。其中，.js 後綴的(de)是腳本文件，.json 後綴的(de)文件是配置文件，.wxss 後綴的(de)是樣式表文件。微信小程序會讀取這些文件，并生成小程序實例。

下面我(wǒ)們(men)簡單了解這三個文件的(de)功能，方便修改以及從頭開發自(zì)己的(de)微信小程序。

app.js 是小程序的(de)腳本代碼。我(wǒ)們(men)可(kě)以在這個文件中監聽并處理(lǐ)小程序的(de)生命周期函數、聲明全局變量。調用 MINA 提供的(de)豐富的(de) API，如(rú)本例的(de)同步存儲及同步讀取本地(dì)數據。

//app.js App({

onLaunch: function () { //調用API從本地(dì)緩存中獲取數據 var logs = wx.getStorageSync('logs') || []

logs.unshift(Date.now())

wx.setStorageSync('logs', logs)

},

getUserInfo:function(cb){ var that = this; if(this.globalData.userInfo){ typeof cb == "function" cb(this.globalData.userInfo)

}else{ //調用登錄接口 wx.login({

success: function () {

wx.getUserInfo({

success: function (res) {

that.globalData.userInfo = res.userInfo; typeof cb == "function" cb(that.globalData.userInfo)

}

})

}

});

}

},

globalData:{

userInfo:null }

})

app.json 是對整個小程序的(de)全局配置。我(wǒ)們(men)可(kě)以在這個文件中配置小程序是由哪些頁面組成，配置小程序的(de)窗口 背景色，配置導航條樣式，配置默認标題。注意該文件不可(kě)添加任何注釋。

{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" }

}

app.wxss 是整個小程序的(de)公共樣式表。我(wǒ)們(men)可(kě)以在頁面組件的(de)class屬性上直接使用app.wxss中聲明的(de)樣式規則。

/**app.wxss**/ .container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box;

}

3. 創建頁面

在這個教程裏，我(wǒ)們(men)有(yǒu)兩個頁面，index 頁面和(hé) logs 頁面，即歡迎頁和(hé)小程序啓動日志的(de)展示頁，他們(men)都在 pages 目錄下。微信小程序中的(de)每一(yī)個頁面的(de)【路徑+頁面名】都需要寫在 app.json 的(de) pages 中，且 pages 中的(de)第一(yī)個頁面是小程序的(de)首頁。

每一(yī)個小程序頁面是由同路徑下同名的(de)四個不同後綴文件的(de)組成，如(rú)：index.js、index.wxml、index.wxss、index.json。.js 後綴的(de)文件是腳本文件，.json 後綴的(de)文件是配置文件，.wxss 後綴的(de)是樣式表文件，.wxml 後綴的(de)文件是頁面結構文件。

index.wxml是頁面的(de)結構文件：

view class="df132f8c57c105e5 container" view bindtap="bindViewTap" class="2f8c57c105e59432 userinfo" image class="57c105e59432d427 userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover" image text class="1b347985a4872052 userinfo-nickname"{{userInfo.nickName}} text view view class="7985a4872052529b usermotto" text class="a4872052529bb8d6 user-motto"{{motto}} text view view

本例中使用了、、來搭建頁面結構，綁定數據和(hé)交互處理(lǐ)函數。

index.js 是頁面的(de)腳本文件，在這個文件中我(wǒ)們(men)可(kě)以監聽并處理(lǐ)頁面的(de)生命周期函數、獲取小程序實例，聲明并處理(lǐ)數據，響應頁面交互事件等。

//index.js //獲取應用實例 var app = getApp()

Page({

data: {

motto: 'Hello World',

userInfo: {}

}, //事件處理(lǐ)函數 bindViewTap: function() {

wx.navigateTo({

url: '../logs/logs' })

},

onLoad: function () { console.log('onLoad') var that = this //調用應用實例的(de)方法獲取全局數據 app.getUserInfo(function(userInfo){ //更新數據 that.setData({

userInfo:userInfo

})

})

}

})

index.wxss是頁面的(de)樣式表：

/**index.wxss**/ .userinfo { display: flex; flex-direction: column; align-items: center;

} .userinfo-avatar { width: 128rpx; height: 128rpx; margin: 20rpx; border-radius: 50%;

} .userinfo-nickname { color: #aaa;

} .usermotto { margin-top: 200px;

}

頁面的(de)樣式表是非必要的(de)。當有(yǒu)頁面樣式表時，頁面的(de)樣式表中的(de)樣式規則會層疊覆蓋 app.wxss 中的(de)樣式規則。如(rú)果不指定頁面的(de)樣式表，也可(kě)以在頁面的(de)結構文件中直接使用 app.wxss 中指定的(de)樣式規則。

index.json是頁面的(de)配置文件：

頁面的(de)配置文件是非必要的(de)。當有(yǒu)頁面的(de)配置文件時，配置項在該頁面會覆蓋 app.json 的(de) window 中相同的(de)配置項。如(rú)果沒有(yǒu)指定的(de)頁面配置文件，則在該頁面直接使用 app.json 中的(de)默認配置。

logs的(de)頁面結構

view class="2052529bb8d6d863 container log-list" block wx:for-items="{{logs}}" wx:for-item="log" text class="529bb8d6d8632b76 log-item"{{index + 1}}. {{log}} text block view

logs 頁面使用 控制标簽來組織代碼，在 上使用 wx:for-items 綁定 logs 數據，并将 logs 數據循環展開節點

//logs.js var util = require('../../utils/util.js')

Page({

data: {

logs: []

},

onLoad: function () { this.setData({

logs: (wx.getStorageSync('logs') || []).map(function (log) { return util.formatTime(new Date(log))

})

})

}

})

運行(xíng)結果如(rú)下：

4. 手機(jī)預覽

開發者工具左側菜單欄選擇「項目」，點擊「預覽」，掃碼後即可(kě)在微信客戶端中體驗。

目前，預覽和(hé)上傳功能尚無法實現，需要等待微信官方的(de)下一(yī)步更新。

如(rú)你所見，微信官方給出的(de)開發指南還非常簡單，很多細節、代碼和(hé)功能都沒有(yǒu)明确的(de)展示，所以接下來就到展示實力的(de)時候啦！開發教程正式開始！

第一(yī)章(zhāng)：準備工作

做(zuò)好準備工作很重要。開發一(yī)個微信應用号，你需要提前到微信的(de)官方網站（weixin.qq.com）下載開發者工具。

1. 下載最新微信開發者工具，打開後你會看到該界面：

2. 點擊「新建 web+」項目，随後出現如(rú)下畫面：

3. 該頁面內(nèi)的(de)各項內(nèi)容需要注意——

AppID：依照官方解釋來填。

Appname: 項目最外層文件夾名稱，如(rú)你将其命名為(wèi)「ABC」，則之後的(de)全部項目內(nèi)容均将保存在「/ABC/…」目錄下。

本地(dì)開發目錄：項目存放在本地(dì)的(de)目錄。

注：再次強調，如(rú)果你和(hé)團隊成員共同開發該項目，則建議你們(men)使用同樣的(de)目錄名稱及本地(dì)目錄，以确保協同開發的(de)統一(yī)性。如(rú)果你之前已有(yǒu)項目，則導入過程與以上內(nèi)容近似，不再贅述。

4. 準備工作全部完成後，點擊「新建項目」按鈕，彈出框點「确定」。

5. 如(rú)上圖所示，此刻，微信開發者工具已經為(wèi)你自(zì)動構建了一(yī)個初始的(de) demo 項目，該項目內(nèi)包含了一(yī)個微信應用項目所需具備的(de)基本內(nèi)容和(hé)框架結構。點擊項目名稱（圖中即「cards」）進入該項目，就能看到整個項目的(de)基本架構了：

第二章(zhāng)：項目構架

微信目前用戶群體非常龐大，微信推出公衆号以後，火爆程度大家都看得到，也同樣推動着 Html 5 的(de)高(gāo)速發展，随着公衆号業務的(de)需求越來越複雜，應用号現在的(de)到來也是恰到好處。

我(wǒ)們(men)發現，微信提供給開發者的(de)方式也在發生全面的(de)改變：從操作 DOM 轉為(wèi)操作數據，基于微信提供的(de)一(yī)個過橋工具實現很多 Html 5 在公衆号很難實現的(de)功能，有(yǒu)點類似于 hybrid 開發，不同于 hybrid 開發的(de)方式是：微信開放的(de)接口更為(wèi)嚴謹，結構必須采用他提供給的(de)組件，外部的(de)框架和(hé)插件都不能在這裏使用上，讓開發者完全脫離(lí)操作 DOM，開發思想轉變很大。

工欲善其事，必先利其器。理(lǐ)解它的(de)核心功能非常重要，先了解它的(de)整個運作流程。

生命周期：

在index.js裏面：

開發者工具上 Console 可(kě)以看到：

在首頁 console 可(kě)以看出順序是 App Launch--App Show--onLoad--onShow--onReady。

首先是整個 app 的(de)啓動與顯示，app 的(de)啓動在 app.js 裏面可(kě)以配置，其次再進入到各個頁面的(de)加載顯示等等。

可(kě)以想象到這裏可(kě)以處理(lǐ)很多東西了，如(rú)加載框之類的(de)都可(kě)以實現等等。

路由：

路由在項目開發中一(yī)直是個核心點，在這裏其實微信對路由的(de)介紹很少，可(kě)見微信在路由方面經過很好的(de)封裝，也提供三個跳轉方法。

wx.navigateTo(OBJECT)：保留當前頁面，跳轉到應用內(nèi)的(de)某個頁面，使用wx.navigateBack可(kě)以返回到原頁面。

wx.redirectTo(OBJECT)：關閉當前頁面，跳轉到應用內(nèi)的(de)某個頁面。

wx.navigateBack()：關閉當前頁面，回退前一(yī)頁面。

這三個基本上使用足夠，在路由方面微信封裝的(de)很好，開發者根本不用去(qù)配置路由，往往很多框架在路由方面配置很繁瑣。

組件：

此次微信在組件提供方面也是非常全面，基本上滿足項目需求，故而開發速度非常快，開發前可(kě)以認真浏覽幾次，開發效率會很好。

其它：

任何外部框架以及插件基本上無法使用，就算原生的(de) js 插件也很難使用，因為(wèi)以前的(de) js 插件也基本上全部是一(yī)操作 dom 的(de)形式存在，而微信應用号此次的(de)架構是不允許操作任何 dom，就連以前開發者們(men)習慣使用的(de)動态設置的(de)rem.js也是不支持的(de)。

此次微信還提供了 WebSocket，就可(kě)以直接利用它做(zuò)聊天，可(kě)以開發的(de)空間非常大。

跟公衆号對比發現，開發應用号組件化，結構化，多樣化。新大陸總是充滿着驚喜，更多的(de)彩蛋等着大家來發現。

接下來開始搞一(yī)些簡單的(de)代碼了！

1. 找到項目文件夾，導入你的(de)編輯器裏面。在這裏，我(wǒ)們(men)使用了 Sublime Text 編輯器。你可(kě)以根據自(zì)己的(de)開發習慣選擇自(zì)己喜歡的(de)編輯器。

2. 接下來，你需要根據自(zì)己的(de)項目內(nèi)容調整項目結構。在範例項目中，「card_course」目錄下面主要包含了「tabBar」頁面以及該應用的(de)一(yī)些配置文件。

3. 示例項目的(de)「tabBar」是五個菜單按鈕：

4. 找到「app.json」文件，用來配置這個五個菜單。在代碼行(xíng)中找到「tabBar」：

你可(kě)以根據實際項目需求更改，其中：

「Color」是底部字體顔色，「selectedColor」是切換到該頁面高(gāo)亮(liàng)顔色，「borderStyle」是切換菜單上面的(de)一(yī)條線的(de)顔色，「backgroundColor」是底部菜單欄背景顔色。文字描述較為(wèi)抽象，建議你一(yī)一(yī)調試并查看其效果，加深印象。

「list」下的(de)代碼順序必須依次放置，不能随便更改。

「pagePath」之後的(de)文件名內(nèi)，「.wxml」後綴被隐藏起來了，這是微信開發代碼中人性化的(de)一(yī)點——幫你節約寫代碼的(de)時間，無須頻繁聲明文件後綴。

「iconPath」為(wèi)未獲得顯示頁面的(de)圖标路徑，這兩個路徑可(kě)以直接是網絡圖标。

「selectedIconPath」為(wèi)當前顯示頁面高(gāo)亮(liàng)圖标路徑，可(kě)以去(qù)掉，去(qù)掉之後會默認顯示為(wèi)「iconPath」的(de)圖标。

「Text」為(wèi)頁面标題，也可(kě)以去(qù)掉，去(qù)掉之後純顯示圖标，如(rú)隻去(qù)掉其中一(yī)個，該位置會被占用。

注意：微信的(de)底部菜單最多支持五欄（五個 icons），所以在你設計微信應用的(de) UI 和(hé)基本架構時就要預先考慮好菜單欄的(de)排布。

5. 根據以上代碼規則，我(wǒ)們(men)做(zuò)好了示例項目的(de)基本架構，供你參考：

6. 「Json」文件配置好後，「card_course」的(de)基本結構入上圖所示，不需要的(de)子(zǐ)集都可(kě)以暫時删除，缺少的(de)子(zǐ)集則需要你主動新建。删除子(zǐ)集時記得順帶檢查一(yī)下「app.json」裏的(de)相關內(nèi)容是否已經一(yī)并删除。

注意：個人建議你新建一(yī)個「wxml」文件的(de)同時，把對應的(de)「js」和(hé)「wxss」文件一(yī)起新建好，因為(wèi)微信應用号的(de)配置特點就是解析到一(yī)個「wxml」文件時，會同時在同級目錄下找到同文件名的(de)「js」和(hé)「wxss」文件，所以「js」文件需及時在「app.json」裏預先配置好。

編寫「wxml」時，根據微信應用号提供的(de)接口編碼即可(kě)，大部分就是以前的(de)「div」，而現在就用「view」即可(kě)。需要用其它子(zǐ)集時，可(kě)以根據微信提供的(de)接口酌情選擇。

使用「class」名來設置樣式，「id」名在這裏基本沒有(yǒu)什麽用處。主要操作數據，不操作「dom」。

7. 以上是示例項目首頁的(de)「wxml」編碼。從圖中就可(kě)以看出，實現一(yī)個頁面代碼量非常少。

8. 「Wxss」文件是引入的(de)樣式文件，你也可(kě)以直接在裏面寫樣式，示例中采用的(de)是引入方式：

9. 修改代碼後刷新一(yī)次，可(kě)以看到未設背景的(de)「view」标簽直接變成了粉色。

注意：修改「wxml」和(hé)「wxss」下的(de)內(nèi)容後，直接 F5 刷新就能直接看到效果，修改「js」則需點擊重啓按鈕才能看到效果。

10. 另外，公共樣式可(kě)以在「app.wxss」裏直接引用。

11. 「Js」文件需要在「app.json」文件的(de)「page」裏預先配置好。為(wèi)了項目結構清晰化，在示例項目中的(de)「index」首頁同級目錄新建其它四個頁面文件，具體如(rú)下：

經過以上步驟，案例中的(de)五個底部菜單就全部配置完畢了。

如(rú)果你要入門的(de)話，首先要掌握 js、html、css 知識。

然後可(kě)以通過查看微信公衆平台中的(de)微信小程序開發教程來大概了解微信小程序的(de)開發方式和(hé)調試方式， 官方的(de)介紹還是比較簡單易懂的(de)。

另外可(kě)以通過入門級的(de)帖子(zǐ) 來了解具體開發流程。

以上~~

希望能給你一(yī)些幫助，希望采納·

小程序開發怎麽做(zuò)？

小程序開發入門相對于别的(de)編程入門，是很簡單的(de)了。你入門隻需要找對方法，比如(rú)找到一(yī)些适合編程小白學(xué)習的(de)在線視(shì)頻，跟着視(shì)頻慢慢學(xué)，入門很快的(de)。

互聯網從業人員來分享一(yī)下幹貨！一(yī)個人人都可(kě)以快速制作小程序的(de)制作工具，全程不涉及到代碼編程，後台操作非常簡單和(hé)強大的(de)功能輕而易舉實現！

一(yī)、工欲善其事必先利其器，先去(qù)微信公衆平台注冊一(yī)個小程序下來！（有(yǒu)認證的(de)公衆号不用再注冊了哦），選擇小程序，按照提示一(yī)步步進行(xíng)填寫

二、要利用到呱呱贊這個小程序制作工具，挑選模闆進行(xíng)可(kě)視(shì)化制作，用鼠标來拖拽就可(kě)以生成自(zì)己想要的(de)小程序頁面。擁有(yǒu)一(yī)個自(zì)己的(de)小程序，隻需點點幾下。

三、設置短(duǎn)視(shì)頻賣貨，在商(shāng)品編輯處上傳視(shì)頻

四、掃碼提交上線

五、做(zuò)小程序商(shāng)城怎麽能少了營銷功能呢(ne)？

還可(kě)以設置短(duǎn)視(shì)頻賣貨，積分體系，分銷體系，抽獎，秒殺，拼團，超級會員卡，手機(jī)端管理(lǐ)商(shāng)城等等超30多種營銷功能，做(zuò)小程序一(yī)定要用營銷功能和(hé)用戶互動才可(kě)以，如(rú)果隻是一(yī)個死氣沉沉的(de)毫無特色的(de)僵屍小程序，是不會受消費者喜歡的(de)。

制作一(yī)個功能強大的(de)小程序商(shāng)城就是這麽簡單，有(yǒu)興趣的(de)都可(kě)以免費去(qù)嘗試一(yī)下

基于微信小程序即掃即用、容易推廣、獲客成本低(dī)的(de)特點，有(yǒu)天然自(zì)帶流量優勢，小程序已經不是大企業、品牌商(shāng)的(de)專屬，越來越多的(de)小微企業和(hé)個體商(shāng)戶開始接入微信小程序。

在開發制作小程序過程中，避免被坑，商(shāng)家還需了解一(yī)下微信小程序的(de)開發方式及成本預算。

1、自(zì)主開發

自(zì)己懂技術，或者有(yǒu)充足的(de)預算，可(kě)以組建團隊，人員最低(dī)配備也需要有(yǒu)程序員、設計、測試，當然成本也是非常高(gāo)的(de)，周期也很長(cháng)，整體下來，整個開發投入至少50萬，後期還需要持續的(de)投入。

2、找第三方定制

有(yǒu)的(de)商(shāng)家會選擇找第三方公司做(zuò)定制，也是我(wǒ)們(men)俗稱的(de)“外包公司”，這對外包公司的(de)要求很高(gāo)，要技術娴熟，對行(xíng)業有(yǒu)深入研究，現在定制市(shì)場也是亂象嚴重，技術水平參差不齊，也存在亂收費現象。成本大概也在3萬以上。

3、購買模闆

市(shì)場上也有(yǒu)一(yī)些專門賣模闆的(de)公司或個人開發者，成本相對較低(dī)，但功能局限性很大，在操作過程中遇到bug，無法解決，影響用戶體驗。

4、第三方SaaS開發工具 市(shì)場上有(yǒu)一(yī)些SaaS模式的(de)小程序開發工具，提供了已經開發好的(de)功能組件，可(kě)以拖拽設計小程序商(shāng)城頁面，沒有(yǒu)任何技術基礎的(de)都可(kě)以操作。成本低(dī)、不需要開發，周期非常短(duǎn)，搭建完成即可(kě)上線。

相信很多人都在問，沒有(yǒu)自(zì)己的(de)技術團隊，不懂編程代碼，該如(rú)何做(zuò)一(yī)個自(zì)己的(de)小程序？

所以我(wǒ)在這裏就分享一(yī)個 超簡單的(de)免費小程序開發工具--凡科(kē)輕站小程序 ，它能助你一(yī)臂之力~

具體的(de)操作步驟很簡單：注冊賬号、挑選小程序模闆、開始自(zì)由設計。

所以，在這裏，無需敲代碼，自(zì)由拖拽模塊，即使是零基礎的(de)小白，也能輕松做(zuò)出精美的(de)小程序，再也不用求人！

酷客多小程序一(yī)個後台打通BAT三大平台，實力值得信賴！

教你如(rú)何創建一(yī)個屬于自(zì)己的(de)小程序

目前微信小程序開發門檻較低(dī),難度不及app，能夠實現app上大部分功能，但對于一(yī)些功能相對複雜、交互相對繁瑣的(de)重服務還是很難實現的(de),要做(zuò)小程序前需要先注冊相應的(de)賬号，小程序的(de)注冊流程和(hé)公衆号的(de)注冊流程類似。進入微信公衆号頁面，最下端就有(yǒu)注冊小程序端口。

然後進入文檔模塊中告知運營者在小程序在開發前的(de)準備、開發工具的(de)使用以及上傳發布小程序的(de)步驟，而社區模塊中有(yǒu)關于小程序的(de)問題彙總，運營者詳細閱覽文檔及社區的(de)內(nèi)容可(kě)迅速上手小程序。當運營者閱覽完文檔及社區的(de)內(nèi)容，對小程序有(yǒu)一(yī)定的(de)了解，可(kě)根據電腦版本下載相應的(de)開發者工具，工具下載完畢登錄後即可(kě)創建小程序的(de)代碼。

如(rú)果想自(zì)己開發微信小程序，那須掌握基本的(de)UI設計能力以及掌握一(yī)定的(de)html、css、js等知識，這些知識技能可(kě)以通過在線課程進行(xíng)學(xué)習，例如(rú)騰訊課堂有(yǒu)不少關于微信小程序的(de)免費課程。

運營者也可(kě)以下載相應的(de)源代碼進行(xíng)修改，從而快速生成小程序，目前多個網站都有(yǒu)提供小程序源代碼供運營者選擇，小程序的(de)源代碼種類繁多，如(rú)電商(shāng)類、 遊戲 類、社區類等等。還是建議運營者學(xué)習基本的(de)開發知識，獲取到小程序源代碼後進行(xíng)修改生成，畢竟優質的(de)小程序更易具有(yǒu)高(gāo)傳播度。随着小程序權限越來越開放，或許離(lí)分享朋(péng)友圈不會太遠。

來酷客多了解下，會讓你滿載而歸的(de)

定制小程序找虎超！

小程序開發跟着微信走就對啦。

每個區域都有(yǒu)開發能力不錯的(de)開發商(shāng)。

成都好的(de)還發公司不是很清楚，江蘇倒有(yǒu)幾家，比如(rú)在下就是做(zuò)小程序開發的(de)。

小程序開發交互文檔的(de)介紹就聊到這裏吧(ba)，感謝你花時間閱讀本站內(nèi)容，更多關于小程序的(de)交互設計指南、小程序開發交互文檔的(de)信息别忘了在本站進行(xíng)查找喔。

相關推薦

友情鏈接

掃碼二維碼