小程序欢迎页是怎么制作的呢？

时间：2023-07-01 14:05 阅读数：110 人阅读分类：知识百科

每个小程序都有自己的欢迎界面，可是小程序的欢迎页是如何制作的呢？小编告诉大家小程序的欢迎页一般是通过布局、逻辑和样式来实现制作的。下面就是小编整理的一些关于小程序欢迎页制作的内容。

上面已经提到了是从三个方面来实现小程序欢迎页的，那我们就一个个介绍。

　　1.小程序布局的实现

　　整个布局使用swiper滑动视图实现，滑动视图的每一个item通过一个block块包裹，块中包裹的是滑动视图的每一个item， item中包含image图片和button按钮

　　2.小程序逻辑的实现

　　在data中准备了一个imgs数组，数组中存放了3个图片的地址，这里还有一个start函数，该函数用来监听界面上button的点击事件。

　　wx.navigateTo这个api的作用就是实现界面的跳转并有返回的按钮，url是用来指定跳转的界面

　　Page({

　　data:{

　　imgs:[

　　"img.kaiyanapp/5edbf92b929f9174e3b69500df52ee21.jpeg?imageMogr2/quality/60",

　　"img.kaiyanapp/f2c497cb520d8360ef2980ecd0efdee7.jpeg?imageMogr2/quality/60",

　　"img.kaiyanapp/64f96635ddc425e3be237b5f70374d87.jpeg?imageMogr2/quality/60",

　　img:"img.kaiyanapp/7ff70fb62f596267ea863e1acb4fa484.jpeg",

　　start(){

　　wx.navigateTo({

　　url: '../home/home'

　　})

　　// wx.redirectTo({ url: '../index/index' })

　　})

　　3.小程序样式的实现

　　swiper样式是定义滑动控件的样式：滑动控件的位置为绝对布局，宽和高为占满整个屏幕

　　.swiper-image样式是定义image图片的样式：宽和高为占满整个屏幕，透明度为0.9

　　.button-img样式是定义button按钮的样式：位置为绝对布局，离底部90px,透明度为0.6，..

　　swiper {

　　/*这个是绝对布局*/

　　position: absolute;

　　height: 100%;

　　width: 100%;

　　}

　　.swiper-image {

　　height: 100%;

　　width: 100%;

　　/*透明度*/

　　opacity:0.9;

　　}

　　.button-img{

　　/*这个是绝对布局*/

　　position: relative;

　　bottom: 90px;

　　height: 40px;

　　width: 120px;

　　opacity:0.6;

　　}

看了这么写小程序欢迎页的代码，下面就简单制作一下吧。

　　首先打开小程序开发工具，创建quick start项目，简单的修改一下。

　　把Index文件夹重命名为welcome;

　　底部的hello world改为一个类似于按钮的样式;

　　添加背景颜色; 修改顶部样式;

　　按钮的实现：

　　welcome.wxml

　　开启小程序之旅：

　　welcome.wxss

　　.usermotto {

　　margin-top: 200px;

　　border: 1px solid #405f80;

　　width: 200rpx;

　　height: 80rpx;

　　text-align: center;

　　border-radius: 5px;

　　}

　　.btn{

　　font-size: 22rpx;

　　font-family: MicroSoft Yahei;

　　font-weight: bold;

　　line-height: 80rpx;

　　}

　　背景颜色的设置：

　　注意：在最外部的view设置宽高百分百，添加背景颜色是无效的。因为微信默认外面还有一层page。

　　所以需要这样写：

　　page{

　　height: 100%;

　　background: #b3d4db;

　　}

　　顶部设置：

　　app.jason

　　{

　　"pages":[

　　"pages/welcome/welcome"

　　"window":{

　　"backgroundTextStyle":"light",

　　"navigationBarBackgroundColor": "#b3d4db",

　　"navigationBarTitleText": "欢迎",

　　"navigationBarTextStyle":"black"

　　}

好了，小程序欢迎页的制作步骤完成了，给大家看看效果图。

以上就是小程序欢迎页是怎么制作的全部内容啦，有没有觉得很简单呢。希望这些内容对大家学习小程序欢迎页的制作有所帮助。更多精彩内容请关注微小乔。