微信小程式 歡迎介面開發的例項詳解

2022-10-05 03:48:07 字數 720 閱讀 5731

微信小程式 歡迎介面

市面上大多數的app都會有乙個歡迎介面,下面將演示如何通過微信小程式實現乙個歡迎介面。

下面將會按照以下的順序介紹:

布局的實現

邏輯的實現

樣式的實現

1.布局的實現

整個布局使用swiper滑動檢視實現,滑動檢視的每乙個item通過乙個block塊包裹,塊中包裹的是滑動檢視的每乙個item, item中包含image程式設計客棧和button按鈕

2.邏輯的實現

在data中準備了乙個imgs陣列,陣列中存放了3個的位址,這裡還有乙個start函式,該函式用來監聽介面上button的點選事件。

wx.n**igateto這個api的作用就是實現介面的跳轉並有返回的按鈕,url是用來指定跳轉的介面

page(,

start())

// wx.redirectto()

},})

3.樣式的實現

swiper樣式是定義滑動控制項的樣式:滑動控制項的位置為絕對布局,寬和高為佔滿整個螢幕

.swiper-image樣式是定義image的樣式:寬和高為佔滿整個螢幕,透明度為0.9

.button-img樣式是定義button按鈕的樣式:位置為絕對布局,離底部90px,透明度為0.6,..

swiper

.swiper-image

.button-img

4.看效果

本文位址:

微信小程式開發 關於除錯介面

第二個可能是404,出現404你就可以仔細觀察一下介面文件,是不是你的請求寫錯啦,如果和介面文件一樣,那你就要問後台是不是他寫錯了。第三個是500,500的話是伺服器端報錯了,他那邊應該可以看到你傳過去的資料的,你們聯調的話,很快問題就會解決 第四個是你傳送請求的資料是從本地儲存裡面取出來的話,那你...

微信小程式開發

一 開發準備 二 開發工具的使用 編碼目錄結構 1 wxml的功能 資料繫結 資料繫結使用 mustache 語法 雙大括號 將變數包起來。列表渲染 wx for 在元件上使用 wx for 控制屬性繫結乙個陣列,即可使用陣列中各項的資料重複渲染該元件。block wx for 類似 block w...

微信小程式開發 微信繫結

官方api提供的request請求的url wx.login 請求引數 傳送請求 解析相應內容 換成json物件 jsonobject json jsonobject.fromobject sr 獲取會話金鑰 session key string session key json.get sessi...