今天給各位分享小程序開發交互文檔的知識，其中也會對小程序的交互設計指南進行解釋，如果能碰巧解決你現在面臨的問題，別忘了關注本站，現在開始吧！

本文目錄一覽：

• 1、小程序開發怎么做？
• 2、微信小程序開發的完整流程介紹，新手必讀
• 3、如何快速開發個微信小程序
• 4、微信小程序如何開發
• 5、PRD：「FITLIFE」小程序產品需求文檔（用戶端）

小程序開發怎么做？

微信版本升級后，打開微信，點擊底部的“發現”這個菜單項，就會發現升級后的“發現”菜單里，增加了“小程序”這樣一個功能。

2.點擊打開小程序后，可以看到有附近的小程序和我的小程序，附近的小程序是所在定位周邊的小程序。

下面的小程序列表可以看到的是我們之前打開過的一些小程序，如果有自己覺得很好用的小程序就可以點擊左上角，添加到我的小程序里面。

3.微信小程序還有具有搜索功能，打開搜索頁面可以輸入想要找的小程序。

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

自從跳一跳小程序游戲出現后，一夜之間，小程序就變得家喻戶曉了，功能開發也越來越豐富，在微信搜一搜就會發現許多大品牌早已有自己的小程序了，越來越多的企業和商家都看中了這個風口，想快速開發出一款屬于自己的小程序，那小程序開發的流程是怎樣的呢？

一、準備好小程序開發所要用到的材料

企業開發小程序所需的材料有：

公司的營業執照、法人的手機號、身份證號、微信號掃描、認證單——用于微信公眾號認證。

銀行對公賬號、銀行開戶許可證、企業網銀——申請支付接口。

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

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

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

 1. 設計原型圖，把想要實現的功能大概畫出來，這一步主要探討的是邏輯思維，只有把邏輯理清楚了，后面的工作才會開展的更順暢，需要客戶和設計師反復溝通確定才可以實現，減少溝通過程中存在的一些誤差。

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

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

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

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

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

 7. 最后提交申請上線，體驗版測試通過后，管理員可以提交到平臺審核，平臺審核通過后即可發布上線，供所有平臺用戶使用。

如何快速開發個微信小程序

無論是前端開發，還是后端開發，時間長了，你總會能總結出它的一些規律的，對于前端開發主要就兩條，頁面展現，邏輯處理。如果是全流程開發的話，那就是，如何創建項目，頁面如何實現，數據獲取和邏輯處理如何實現，如何打包上線。移動端或者前端，基本開發流程就這個四個步驟。所以在在前端方面去學習新一門開發技術，只要你解決了這四個問題，那一切就OK了，下面我就講一下，我在學習微信小程序開發，如何用這四步法快速上手開發的

學習一門新技術先看下它的開發文檔 小程序介紹

然后呢就是開始一些準備的步驟，微信公眾平臺提供我們開發管理的功能 微信工作平臺

賬號注冊

小程序信息配置

請看 小程序開發步驟

小程序項目的創建

到此第一個問題我們就算完成了，接下來解決小程序界面如何搭建。

 然后最重要的，微信提供自己的開發者工具，不需要用chrome什么調試， 微信開發者工具 提供wxapi的調用測試能力，這些在chrome里面是測試不了的

框架的視圖層由 WXML 與 WXSS 編寫，由組件來進行展示。

將邏輯層的數據反應成視圖，同時將視圖層的事件發送給邏輯層。

WXML(WeiXin Markup language) 用于描述頁面的結構。

 WXS(WeiXin Script) 是小程序的一套腳本語言，結合 WXML，可以構建出頁面的結構。

WXSS(WeiXin Style Sheet) 用于描述頁面的樣式。

 小程序的頁面是由wxml 和wxss這兩個文件來實現的，wxml結構如何寫請參考 微信小程序組件

 wxss是負責樣式控制的，基本類似于css,支持flex布局，所以要想上手構建微信小程序的界面，最好要熟悉html ,css.

還有最重要的就是生命周期了

//index.js

Page({

? data: {

? ? text: “This is page data.”

? },

? onLoad: function(options) {

? ? // 頁面創建時執行

? },

? onShow: function() {

? ? // 頁面出現在前臺時執行

? },

? onReady: function() {

? ? // 頁面首次渲染完畢時執行

? },

? onHide: function() {

? ? // 頁面從前臺變為后臺時執行

? },

? onUnload: function() {

? ? // 頁面銷毀時執行

? },

? onPullDownRefresh: function() {

? ? // 觸發下拉刷新時執行

? },

? onReachBottom: function() {

? ? // 頁面觸底時執行

? },

? onShareAppMessage: function () {

? ? // 頁面被用戶分享時執行

? },

? onPageScroll: function() {

? ? // 頁面滾動時執行

? },

? onResize: function() {

? ? // 頁面尺寸變化時執行

? },

? onTabItemTap(item) {

? ? // tab 點擊時執行

? ? console.log(item.index)

? ? console.log(item.pagePath)

? ? console.log(item.text)

? },

? // 事件響應函數

? viewTap: function() {

? ? this.setData({

? ? ? text: ‘Set some data for updating view.’

? ? }, function() {

? ? ? // this is setData callback

? ? })

? },

? // 自由數據

? customData: {

? ? hi: ‘MINA’

? }

})

 微信提供的界面組件很多，沒必要一下子全學會，會用一兩個就行，其他的遇到需要的時候現查先做，這樣又節約學習時間，又能夠加深理解。到此第二個問題我們解決了，下面看第三個問題，數據邏輯如何處理。

數據定義

數據展現

邏輯處理是通過js文件來操作的

 一個服務僅僅只有界面展示是不夠的，還需要和用戶做交互：響應用戶的點擊、獲取用戶的位置等等。在小程序里邊，我們就通過編寫?JS?腳本文件來處理用戶的操作。

view{{ msg }}/view

button bindtap=”clickMe”點擊我/button

點擊?button?按鈕的時候，我們希望把界面上?msg?顯示成?“Hello World”，于是我們在?button?上聲明一個屬性:?bindtap?，在 JS 文件里邊聲明了?clickMe?方法來響應這次點擊操作：

Page({

? clickMe: function() {

? ? this.setData({ msg: “Hello World” })

? }

})

響應用戶的操作就是這么簡單，更詳細的事件可以參考文檔? WXML – 事件 ?。

 此外你還可以在 JS 中調用小程序提供的豐富的 API，利用這些 API 可以很方便的調起微信提供的能力，例如獲取用戶信息、本地存儲、微信支付等。在前邊的 QuickStart 例子中，在?pages/index/index.js?就調用了?wx.getUserInfo?獲取微信用戶的頭像和昵稱，最后通過?setData?把獲取到的信息顯示到界面上。更多 API 可以參考文檔? 小程序的API ?。

 現在幾乎每個應用都需要從后端獲取數據，那么小程序如何獲取呢，當然是通過網路操作了。我們封裝了小程序的網絡操作

const app = getApp()

const request = (url, options) = {

? return new Promise((resolve, reject) = {

? ? wx.request({

? ? ? url: `${app.globalData.host}${url}`,

? ? ? method: options.method,

? ? ? data: options.method === ‘GET’ ? options.data : JSON.stringify(options.data),

? ? ? header: {

? ? ? ? ‘Content-Type’: ‘application/json; charset=UTF-8’

? ? ? ? // ‘x-token’: ‘x-token’? // 看自己是否需要

? ? ? },

? ? ? success(request) {

? ? ? ? if (request.data.error_code === 0) {

? ? ? ? ? resolve(request.data)

? ? ? ? } else {

? ? ? ? ? reject(request.data)

? ? ? ? }

? ? ? },

? ? ? fail(error) {

? ? ? ? reject(error.data)

? ? ? }

? ? })

? })

}

const gets = (url, options = {}) = {

? return request(url, { method: ‘GET’, data: options })

}

const post = (url, options) = {

? return request(url, { method: ‘POST’, data: options })

}

const put = (url, options) = {

? return request(url, { method: ‘PUT’, data: options })

}

// 不能聲明DELETE（關鍵字）

const remove = (url, options) = {

? return request(url, { method: ‘DELETE’, data: options })

}

module.exports = {

? gets,

? post,

? put,

? remove

}

如何使用請看下圖

數據獲取

數據展現如下圖

數據展現

到此，第三個問題我們就解決的了下面看第四個問題。

小程序發布文檔說明

小程序發布步驟

到此四個問題都解決了。

 總結：本文內容是很簡單的，借用了大部分官方文檔，其實本文目的不是教你學小程序開發，而是分享一下在學習一項新事物我的方法和思路，互聯網技術變化是很快的，我覺得一個人的能力，不僅僅是你技術有多好，你要明白技術是用來干什么的，技術是用來解決現實生活中的問題的，一個好的程序員，不是技術能力，而是解決問題的能力，解決問題不可能只用一種技術，這就要求你的學習能力要強，針對不同的問題，使用不同的技術，哪怕使用的技術你不熟悉，但它是解決問題最好的方法，那就要求你有快速學習并解決問題的能力。

 學習一項新技術，我們要先抓住主線，把流程搞通了，以后再在工作中慢慢的熟悉和豐富對它細節的一些認知，所以學一項東西前多問自己幾個問題，我學什么，我為什么學，我怎么學，等。先思考后學習，一定會讓你事半功倍。

 對于怎么學習微信小程序開發，我問了自己上面的四個問題，每個問題，我只需要了解大體內容，四個問題都解決了，然后整個流程也就通了，以后也就是慢慢的對每個問題內容的細節慢慢的熟悉和了解了，其實花了不到一下午的時間，我就搞出了一個簡單的demo出來了，了解的內容基本已經覆蓋微信小程序日常開發80%的內容了。以上就是我的一點學習心得。

最后 小程序Demo

Demo截圖

首頁

我的

點擊我的任意條目，數據是從第三方聚合平臺提供的api獲取的

最后目前有很多的多端開發框架，背景大多是都是因為小程序開發的盛行

其他還有很多例如

阿里的rax

我們自己的ditto

微信小程序如何開發

微信小程序的優勢十分明 顯，小程序是不需要下載安裝便可以使用的應用，它實現了應用觸手可及的夢想，用戶掃一掃或搜一下即可打開應用，也體現了用完即走的理念，用戶不用關心是否安裝太多應用的問題，應用將無處不在，隨時可用，但又無需安裝卸載。

小程序觸及了PC網頁，公眾號，H5，APP無法觸及的地 方，其無需安裝，用完即走的理念能夠滿足用戶需求且節省手機內存。站在小程序的擁有者的立場，其開發成本大大減小，同時可借助微信強大的流量入口，因而也降低了推廣的難度。總的來說，微信小程序是一種全新的方式，能夠更好地在用戶和服務中建立連接，并且可以在微信中便捷地獲取和傳播，具有不錯的使用體驗。

小程序全面開放申請以后，作為企業、政府、媒體、其他組織或者個人的開發者，都可以申請并注冊小程序。小程序和微信的訂閱號、服務號以及企業號是并行的體系，具有獨立的注冊以及發布流程。

小程序的接入主要有4個步驟：

(1) 小程序注冊：在微信公眾平臺官網首頁注冊并提交注冊信息、完善主體信息和管理 員信息。

(2) 完善小程序信息：完善小程序的基本信息如名稱、 頭像及服務范圍等。開發前需綁定開發者并獲取APP ID，以保證程序可以通過手機進行掃碼測試。

(3) 開發小程序：下載安裝微信開發者工具，微信官方提供了一套完整的開發框架，開發者可以根據微信開發文檔進行小程序的開發與調試。

(4) 代碼審核及發布：小程序開發完成后，不能夠直接發布，需提交代碼與開發配置信息提交審核，完成后尚可發布。

微信Web開發者工具區別于H5的開發工具+瀏覽器 Device Mode預覽的模式，而是基于自己的開發者工具，可以實現同步本地文件+開發調試+編譯預覽+上傳+發布等一整套流程。同時小程序自己開發了一套WXML標簽語言和 WXSS樣式語言，并非直接使用標準HTML5+CSS3。同時 提供了很多原生APP的組件，之前在HTML5中需要模擬才 能實現的功能，在小程序中可以直接調用組件來實現。

小程序開發框架的核心是一個響應的數據綁定系統。 分為視圖層和邏輯層，小程序開 發工具提供了視圖層描述語言WXML和WXSS，以及基于 JavaScript的邏輯層框架，并在視圖層與邏輯層間設置了數據傳輸和事件系統，使得開發者能夠很簡單地將重心放在數據與邏輯上。處理事務邏輯的地方被稱為邏輯層。在微信小程序中，所有.js腳本文件的集合構成邏輯層。邏輯層與視圖層相互配合，完成數據處理及接收事件反饋。框架的視圖層由WXML與WXSS編寫，通過組件進行展現。對于小程序本身，.wxml文件與.wxss文件的集合構成了視圖層，邏輯層處理數據之后，會發送給視圖層用于與用戶的交互，同時接收用戶對視圖層的反饋。視圖層以給定的樣式展現數據并反饋事件給邏輯層，數據展現是通過組件來進行的。視圖的基本構成是組件。

項目開發完成后，管理員需手動打包上傳代碼，填寫相關配置類目并將代碼提交審核，若第一次審核未通過，再次提交審核將開放提供測試的入口，該入口由開發者提供， 用于微信審核人員審核微信小程序時登錄。審核后手動發布即可。

微信小程序站在月活躍用戶9億人次的微信的肩膀上，自帶流量趨勢，入口多，功能簡單便捷。小程序功能快速迭代，意味著圍繞小程序的開發和生態工具建設將會是移動互聯網的一個巨大機會。目前各行業內諸多企業單位紛紛加入了小程序開發，開通了小程序功能。但小程序進行優化后，開放了很多入口，使得開發者和用戶關注度不斷提升。縱使一些高頻和復雜應用暫時無法被小程序取代，但是一些低頻應用的主要功能，只要能在小程序上實現，APP就可以完全卸載了。總的來說，微信小程序目前發展空間甚好，至于以后未來的發展仍舊不能夠準確預測。

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

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

 Hi~最近在對自己參與過的項目進行總結，希望可以和大家分享學習交流。輸出內容是檢視自己的方式，所以我就來吸取經驗了。

 通過研讀各位優秀作者的精品，我學習到了不少知識。此次，以實際工作中遇到的情況作為案例，我將從0至1的產品中抽取重點模塊進行分享。

 為了閱讀體驗，我將盡量簡化常規化的環節，本次采用AXURE梳理PRD——利用AXURE動態面板和內聯框架，制作文檔導航，提高瀏覽人員的閱讀效率。

一、概述

1. 產品介紹

2. 文檔修訂記錄

將重點模塊添加對應的跳轉鏈接，方便瀏覽人員迅速定位內容。

版本號規則：小數點后為當前版本的小更新，小數點前為大版本更新。

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

二、產品結構

1. 信息結構圖

2. 功能結構圖

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

三、業務流程圖

 建議將流程圖統一整理至表格中，做成鏈接跳轉形式，實現快速查閱。為了順暢的需求閱讀體驗，將各自的流程圖放在之后的需求描述部分中展示。

四、全局說明

1. 名詞術語說明

2. 權限彈窗

3. 時間距離規范

3.1 時間規范

3.2 距離規范

4. 異常情況

4.1 網絡異常

手機網絡連接異常，小程序彈窗提示如下：

4.2 用戶狀態說明

五、功能性需求說明

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

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

1. 需求池需求清單

1.1 需求管理池

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

系統：涉及到的系統及模塊

需求說明：簡述需求

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

1.2 需求清單

 對需求管理池評估篩選后，將需求模塊、對應功能、需求優先級、完成情況統一整理到表格中。同樣的，這里將模塊名稱做成鏈接格式，快速查閱對應的需求模塊。

優先級規范：p1、p2……數字越小代表優先級越高。

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. 我的模塊（個人中心）

6.1 個人頁面

6.2 修改資料

6.3 我的卡包

6.4 我的課程包

6.5 我的優惠券

6.6 富文本頁面

六、非功能性需求

非功能性需求，是比較容易忽視的部分，往往和性能、安全掛鉤，影響著產品的穩定性與安全性。

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

1. 性能需求

 響應時間：系統對請求做出響應的時間。例如系統處理一個HTTP請求需要200ms，這個200ms就是系統的響應時間。

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

與性能相關的數據指標還有QPS（每秒響應請求數）、TPS（每秒處理的事務數）等。

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

2. 可用性需求

避免用戶高頻點擊無反饋的情況。

為用戶提供反饋渠道。

保持文案與組件的一致性。

3. 數據統計需求

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

七、思考總結

1. 內容細節

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

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

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

2. 高保真or低保真？

 低保真線框圖：重點在于功能、結構、流程的梳理，利用簡單的框架和元素，省時省力；但細節相對高保真沒這么完善，可能會有一定的溝通成本。

 高保真：針對于高層領導及投資人等，進行產品概念演示，視覺效果好，細節相對完善；相當于是一個產品的demo，但修改成本較高。

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

 具體情況具體分析，比如，你做了很多交互，開發做漏了會說：“沒寫清楚啊，我怎么知道哪里可以點擊呢？”

因此，我的習慣是做簡單的“交互邏輯+交互注釋”，盡量避免復雜且耗時耗力的交互。

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

3. WORD？AXURE？

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

這是我見過比較多的產品話題討論之一——有用WORD的，有用AXURE的，還有用墨刀、石墨文檔等等……

我曾經請教過兩位分別使用WORD和AXURE撰寫需求文檔的朋友，他們是這樣的看法：

WORD選手：

用word寫，形式更規范。

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

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

AXURE選手：

用AXURE寫，圖+標注+交互，更直觀地表達產品需求，閱讀更順暢。

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

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

我的看法：

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

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

最后，由于篇幅關系，本次分享只展示了部分內容，完整預覽請在以下鏈接查閱。

預覽鏈接：

希望自己能堅持輸出內容，定期復盤，與優秀的你們碰撞更棒的想法，共同進步~

小程序開發交互文檔的介紹就聊到這里吧，感謝你花時間閱讀本站內容，更多關于小程序的交互設計指南、小程序開發交互文檔的信息別忘了在本站進行查找喔。