微信小程序启动页的实现

加班偷着懒没做一堆九月份迭代的工作，实现了一下小程序的启动页。效果是这样的：
关注公众号查看效果

app.json

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

start.wxml

先写一个容器显示背景图片，image标签上使用bindload方法，动态计算屏幕宽高，以适应不同手机端的尺寸，让背景图更佳显示。
因为是云开发，图片刻意使用了云存储中图片资源，具体操作可回顾之前发布的视频教程。

<view wx:for='{{testList}}' wx:for-item="item" wx:key="item"><image src="{{item.fileID}}" bindload="autoImage" style="width:{{imgWidth}};height:{{ imgHeight }}" />
</view>

用户信息展示，整体用容器包起来，做成绝对定位。open-data 标签可以免权限直接拿到用户的昵称头像等信息，只需要指定相应的type即可。

<view 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',});
}

微信小程序启动页的实现相关推荐

Android 仿微信小程序开屏页加载loading
Android 仿微信小程序开屏页加载loading 废话不多说,先上效果图~ 首先就是底层有一个灰色的圆,然后按照圆形的轨迹进行绘制. 啊~说那么多也没用,还是直接上代码吧,哈哈哈哈绘制底部圆形及 ...
PHP更新小程序,微信小程序Tab页切换更新数据详细介绍
这篇文章主要介绍了微信小程序 Tab页切换更新数据的相关资料,需要的朋友可以参考下微信小程序 Tab页切换更新数据微信小程序还处于内测阶段,最不方便的莫过于官方在不停的更新,前几天写的功能隔个几天 ...
分享一个微信小程序编辑页面的WXML模板
分享一个微信小程序编辑页面的WXML模板最近在进行微信小程序开发的时候经常会碰到编辑页面的搭建,大致格式如图所示: 顶部:返回按钮和确认按钮,在中间还可以自行加上一些别的元素. 中间部分:编辑的标题 ...
微信小程序登录页验证与页面跳转
微信小程序登录页实现验证登录和页面跳转利用js实现验证登录和页面跳转,开发工具是微信开发者工具. wxml部分登录页面的代码,需要再创建一个主页. <view class="wel ...
微信小程序启动、更新机制
小程序启动小程序启动会有两种情况,一种是「冷启动」,一种是「热启动」. 热启动:假如用户已经打开过某小程序,然后在一定时间内再次打开该小程序,此时无需重新启动,只需将后台态的小程序切换到前台,这个过 ...
微信小程序page设定css,微信小程序——启动，渲染与Page
四种文件格式: .js js操作至少要写Page({}),用于注册一个页面 .json 一些基础设定至少要一个{} 均需使用双引号, 且不能有注释,不能有多余的逗号 project.config. ...
微信小程序答题页——swiper渲染优化及swiper分页实现
前言 swiper的加载太多问题,网上资料好像没有一个特别明确的,就拿这个答题页,来讲讲我的解决方案这里实现了如下功能和细节: 保证swiper-item的数量固定,加载大量数据时,大大优化渲染效率 ...
微信小程序单页开发之 min-cli
转载自:https://www.diycode.cc/projects/meili/min-cli?sync=1 Min Cli 令小程序组件的开发和使用变得愉悦 ○ 最佳实践 MinUI,是基于 M ...
微信小程序-详情页跳转
在学微信小程序开发的时候,碰上了一个问题,就是怎么点击一个区域然后跳转到相应的详情页上..有点类似于从商品页->相应详情页,在查了一些资料之后,我找出一个解决办法,给大家分享一下. 应用举例: ...