微信小程序啟動(dòng)頁的實現 - 新聞資(zī)訊 - 雲南小程序開發|雲南軟件開發|雲南網站(zhàn)建設-西山區知普網絡科技工作室

159-8711-8523

雲南網建設/小程序開發/軟件開發

知識

不管是網站(zhàn)，軟件還是小程序，都要直接或間接能為您産生價值，我們在追求其視覺表現的同時，更側重于功能的便捷，營銷的便利，運營的高效，讓網站(zhàn)成為營銷工具，讓軟件能切實提升企業(yè)内部管理水平和(hé)效率。優秀的程序為後期升級提供便捷的支持！

您當前位置>首頁 » 新聞資(zī)訊 » 小程序相關(guān) >

微信小程序啟動(dòng)頁的實現

發表時間：2021-1-5

發布人：葵宇科技

浏覽次數：28

加班偷着懶沒做一堆九月(yuè)份疊代的工作，實現了一下(xià)小程序的啟動(dòng)頁。效果是這樣的：

app.json

将啟動(dòng)頁路(lù)徑放在pages數組的第一項，tabBar中(zhōng)list正常放置。

start.wxml
先寫一個(gè)容器(qì)顯示背景圖片，image标簽上使用bindload方法，動(dòng)态計算屏幕寬高，以适應不同手機端的尺寸，讓背景圖更佳顯示。
for='{{testList}}' wx:for-item="item" wx:key="item">    
<image src="{{item.fileID}}" bindload="autoImage" style="width:{{imgWidth}};height:{{ imgHeight }}" />view>
用戶信息展示，整體用容器(qì)包起來，做成絕對定位。open-data 标簽可(kě)以免權限直接拿到用戶的昵稱頭像等信息，隻需要指定相應的type即可(kě)。
class="userinfo">    
<view class="userinfo-avatar">        
<open-data type="userAvatarUrl">open-data>    
view>    
<view class="userinfo-name">        
<text>{{msg}}text>        
<open-data type="userNickName">
open-data>    
view>    
<button hover-class="btn_red" class="btn" bindtap="goToIndex">進入店鋪button>        
view>
start.wxss
進入店鋪按鈕有一個(gè)懸停效果，使用hover-class定義一個(gè)目标效果的class。

start.js
autoImage 方法如(rú)下(xià)，歡迎白嫖。
autoImage(e) 
{    
var that = this;    
var originalWidth = e.detail.width;    
var originalHeight = e.detail.height;    
var imageWidth = 0;    
var imageHeight = 0;    
wx.getSystemInfo({        complete: (res) => 
{            
var winWidth = res.windowWidth;            
if (originalWidth > winWidth) 
{                
var autoWidth = winWidth;                
var autoHeight = (autoWidth * originalHeight) / originalWidth;                
imageWidth = autoWidth + 'px';                
imageHeight = autoHeight + 'px';            
} 
else {                
imageWidth = originalWidth + 'px';                
imageHeight = originalHeight + 'px';            
}            
that.setData({                
imgWidth: imageWidth,                
imgHeight: imageHeight           
 });        
}    
})},
進入店鋪按鈕上綁定的事件，直接調用微信api，tab頁跳轉。
goToIndex() {    
wx.switchTab({        
url: '/pages/index/index',   
 });},

相關(guān)案例查看更多