用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

微信小程序启动页的实现

Rolan 2020-10-20 10:19

加班偷着懒没做一堆九月份迭代的工作,实现了一下小程序的启动页。

加班偷着懒没做一堆九月份迭代的工作,实现了一下小程序的启动页。效果是这样的:

app.json

将启动页路径放在pages数组的第一项,tabBar中list正常放置。

start.wxml
先写一个容器显示背景图片,image标签上使用bindload方法,动态计算屏幕宽高,以适应不同手机端的尺寸,让背景图更佳显示。
for='{{testList}}' wx:for-item="item" wx:key="item">    
<image src="{{item.fileID}}" bindload="autoImage" style="width:{{imgWidth}};height:{{ imgHeight }}" />
view>
用户信息展示,整体用容器包起来,做成绝对定位。open-data 标签可以免权限直接拿到用户的昵称头像等信息,只需要指定相应的type即可。
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
进入店铺按钮有一个悬停效果,使用hover-class定义一个目标效果的class。

start.js
autoImage 方法如下,欢迎白嫖。
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',

});
},
鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
  • 天下钞票 2020-10-22 12:24
    启动页的劣势就是页面分享问题,需要花费大力气来处理页面分享的细节,否则就跳过了启动页面

    如果恰巧在启动页面有身份判断等过程,那身份判断就被跳过了,如果想再往启动页跳转的话,用户体验就不是很好了。。