​贊助廣告

WiX自助建網站-進階教學-API串接/JavaScript程式設計/前後端工程規劃


申請新的免費帳號並啟用空白範本,請先點選以下教學連結設定好後,即可進入客製化表單與網頁權限管理部分

WiX免費架站申請/建立範本教學

注意:

*本篇的難度非常高,有牽涉到JavaScript/HTML程式設計的部分,因此我們不著墨太多在程式的部分,提供釣竿給你,要釣鮭魚還是吳郭魚由你決定。

首先要來介紹常見的前端(前台)、後端(後台)應用。

前端(前台): 通常進階運用會將前台交給WiX下去處理,因為設計快速與支援RWD手機版,更重要的是它的流量無限,一年也才5000-6000元新台幣,只要在交涉重要資料在透過API連回後端就好。

後端(後台): 因為Azure/AWS/Goolge Cloud的穩定性高,可做資料庫備援與備份、主機CPU/RAM/HD可以照需求調整......等,因此後端的REST API大多跑Python/Django、Laravel、Node.js......等。

Q: 大部分的人都怎麼進階應用?

A:

1. 前台使用D3.js / Chart.js / DC.js / plotly.js 來做資料視覺化,可以畫出圖圖表、大量輸入資料傳回後台。後台提供json或csv檔案管控。

2. 第三方API串接(可以串接金流/物流服務/位置......等)

---------------------------------------

Q: 那麼有人會問為什麼不直接放在Azure/AWS/Goolge Cloud?

A: 成本問題,當前端已經有快速的解決方案,還可以流量吃到飽,為什麼還要自己來重新設計輪子呢,還要付這麼貴的流量費。

---------------------------------------

進入主題:

1. 到上方的Tools打開Developer Tools的功能

2. 以下我們設計一個,各貨幣匯率對美金的報價,我們用這個圖當範例

3. 來看一下左邊的部分。Public是大多是給你放置 *.js 或 *.css 檔案,所有人都看的到。Backend是大多是給你放不能公開的東西(API 的網址、API 的Key......等),類似一個暗地裡在背景執行的元件,*.jsw 是一個用JavaScript標準語言來寫的程式

4. 每一頁的下面都有自己的程式碼可以編輯並與該頁的元件結合在一起,也是一個用JavaScript標準語言來寫的程式,以下的程式是不良示範,API的部分應放於Backend的地方在透過Page這地方的程式import進來*.jsw的函數才對。

5. 元件Properties的部分是讓你定義ID讓你可以與程式連結,Events的部分可以讓你選擇這個元件點擊或是滑鼠移過去時候的反應

6. 以下這個功能也是我們常用點選"Add >> More >> HTML Code"來放入HTML的程式碼到網頁上,很適合做資料視覺化的圖表歐

7. 我們最後做出一個可以查詢各貨幣兌美元的網頁出來,目前匯率是1.3198 AUD兌換 1 USD

最後我們把程式碼放上來

===========================================================

export function buttonFetchRate_onClick(event) { var url = 'https://api.fixer.io/latest?base=USD'; var symbol = $w("#textInputSymbol").value; var fullUrl = url + '&symbols=' + symbol; fetch(fullUrl, {method: 'get'}) .then(response => response.json()) .then(json => $w("#textRate").text = json.rates[symbol].toString()); //Add your code for this event here: }

===========================================================

對應元件:

buttonFetchRate: 按鈕(Buttons)

function buttonFetchRate_onClick(event): 當按鈕被點擊時的事件

textInputSymbol: 輸入的文字(Text Input)

textRate: 輸出的文字(Text)

===========================================================

以上介紹完畢。

Q: WiX有提供哪些本身的API可以使用呢?

A:請參考 https://www.wix.com/code/reference/

Q: WiX Code目前怎麼是Beta版本?

A: WiX Code還屬於Beta階段,有可能在應用的時候有Bug出生,建議大家自己寫JavaScript,可以降低Bug發生