交互式小程序開發(fā)（小程序前后端交互）
本篇文章給大家談?wù)劷换ナ叫〕绦蜷_發(fā)，以及小程序前后端交互對應(yīng)的知識點，希望對各位有所幫助，不要忘了收藏本站喔。
本文目錄一覽：
小程序開發(fā)如何做原型設(shè)計
1.原型設(shè)計工具
根據(jù)設(shè)計者的專業(yè)程度，可以將原型設(shè)計工具分為兩大類，一是專業(yè)原型設(shè)計工具，二是非專業(yè)原型設(shè)計工具。專業(yè)的原型設(shè)計工具常用的就是墨刀和Axure，墨刀是一款在線原型設(shè)計工具，其優(yōu)點是云辦公模式，支持協(xié)同設(shè)計，即時保存，不用擔心因電腦斷電或故障而導(dǎo)致設(shè)計內(nèi)容丟失，其缺點是組件豐富程度不高。
Axure是電腦端的原型設(shè)計工具，其優(yōu)點是組件豐富，功能比較強大，使用用戶群體較大，其缺點是設(shè)計內(nèi)容要及時保存，否則會因電腦斷電或故障而導(dǎo)致設(shè)計內(nèi)容丟失，給用戶帶來一定的困擾。非專業(yè)的原型設(shè)計工具有PPT和紙，PPT也是一個簡單的制圖軟件，能讓用戶實現(xiàn)簡單的原型設(shè)計，其優(yōu)點是簡單易學，缺點是頁面交互功能不強；紙是大部分用戶都可以用的原型設(shè)計工具，其優(yōu)點是簡單方便，專業(yè)和非專業(yè)的人士都可以通過紙將原型想法表示出來，缺點是保存和后期使用不方便。
2.原型設(shè)計的內(nèi)容
原型設(shè)計主要包括三個方面的內(nèi)容：一是頁面設(shè)計，二是交互設(shè)計，三是備注設(shè)計。頁面設(shè)計是原型設(shè)計的主要內(nèi)容，包括對產(chǎn)品所有頁面的原型設(shè)計；交互設(shè)計是指頁面與頁面之間的鏈接和跳轉(zhuǎn)；備注設(shè)計是指對頁面設(shè)計，交互設(shè)計，程序功能，跳轉(zhuǎn)結(jié)果，出錯提示等的設(shè)計。
原型設(shè)計是產(chǎn)品需求設(shè)計與UI設(shè)計之間的橋梁，是產(chǎn)品開發(fā)的一項重要基礎(chǔ)工作，直接決定了產(chǎn)品界面的布局，影響產(chǎn)品的使用效果。
H5與小程序數(shù)據(jù)交互
?功能已通過原生+vue混合開發(fā)的方式實現(xiàn)了，現(xiàn)需要將這個功能原封不動的搬到微信小程序。綜合各方面評估，選擇了微信小程序套webview的方式實現(xiàn)（若時間允許，建議還是通過小程序?qū)崿F(xiàn)）。
?采用小程序webview的方式，可以復(fù)用大部分H5頁面，但H5調(diào)用的原生方法還是需要重新實現(xiàn)。實現(xiàn)方式主要分以下幾種情況（當然也可以通過jssdk的方式去實現(xiàn) ，但不在本文討論范圍內(nèi)）：
?(1) 獲取照片，可通過html的input標簽實現(xiàn)；
?(2) 獲取經(jīng)緯度，可通過webview的url拼接參數(shù)實現(xiàn)；
? (3) 人臉識別，可通過H5調(diào)起刷臉小程序的方式實現(xiàn)。
?下面主要描述下第3種情況的實現(xiàn)方式。
?H5與小程序交互所涉及的數(shù)據(jù)部分主要包括兩塊：
?(1)H5如何將數(shù)據(jù)傳給小程序？
?? url參數(shù)拼接。
?(2)小程序如何將數(shù)據(jù)傳給H5？
?? wx.setStorage及wx.getStorage。
?詳細流程如圖所示。
?webview小程序pageA調(diào)起人臉小程序pageB，pageB回退到pageA。因為pageA重新設(shè)置了webview的url，其所嵌套的H5與歷史H5頁面無法進行數(shù)據(jù)共享，導(dǎo)致業(yè)務(wù)功能無法繼續(xù)。解決辦法就是調(diào)起人臉小程序之前，在H5頁面先將必要的信息通過 localStorage.setItem 保存，人臉識別結(jié)束回到H5頁面時，再通過 localStorage. getItem 獲取所需要的業(yè)務(wù)數(shù)據(jù)。
微信小程序前端和遠程服務(wù)器交互的問題？
關(guān)于“小程序如何要把文件傳送到遠程服務(wù)器上”的問題，分以下幾步：
1. 手機中上傳文件，先使用wx.uploadFile 接口
2. 把數(shù)據(jù)包裝到 json對象中，用 wx.request.post 接口把數(shù)據(jù)發(fā)送到你的服務(wù)器
3.服務(wù)器要接收小程序發(fā)過來的數(shù)據(jù)，就要用到后端語言，如果沒有接觸過的話，就學 node.js 或 PHP，環(huán)境怎樣配置可以在網(wǎng)上搜索到
4.安裝好環(huán)境后，學習一下怎樣上傳文件，并把上傳的文件保存到服務(wù)器，這里的上傳可以直接用先在網(wǎng)頁中測試，網(wǎng)頁中會上傳后保存到服務(wù)器了，小程序中也應(yīng)該就會了。
所以，現(xiàn)在的重要是你要先學會一門后端語言；當然 node.js 就是 js，語法不用重復(fù)學，但后端的邏輯與前端是不一樣的，自己看看網(wǎng)上的教程學一學。
關(guān)于交互式小程序開發(fā)和小程序前后端交互的介紹到此就結(jié)束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關(guān)注本站。
