一、从项目零基础入门微信小程序之项目搭建欢迎页面实现

前言

本项目以JavaScript语言进行开发未涉及到TS内容本项目较为基础,仅供学习与交流,不涉及任何商业内容,首先需要电脑安装微信小程序开发工具,这里就不在阐述具体安装步骤如果不会可以移步百度搜索,当我们的开发工具安装完成后,首页我们要创建项目具体操作步骤如下.

1、小程序项目创建步骤

1.1、首先我们打开开发工具选择【小程序】接着我们继续填写【项目名称】【目录】【APPID】【开发模式】【后端服务】【模板选择】选择完毕后我们点击确定即可完成创建.

内容详解

项目名称：这里的项目名称随便起个名字即可,比如我这里叫test.
目录：就是你项目存放的路径这里你可以修改路径（Ps:注意要把新创建的项目名称加上,否者会创建失败）.
AppID:这里你可以选择测试号,但开发的时候有些API使用不了,这里个人建议去注册一下来使用.
开发模式：我们这里是开发小程序这里选择小程序即可.
后端服务器：目前我做小程序前端页面这里不涉及到后端内容,所以我们选择不适用云服务即可,当然云服务拓展不好.
模板选择：这里我们小程序用JS语言开发那么我们选择,JavaScript-基础模板官方即可.

1.2、项目创建完毕后我展开项目目录,然后删除下图框选内容，同时清空两个文件内容。

1.3、接着按下图继续创建存放图片文件夹imgaes以及创建引导页welcome文件夹与里面文件

1.4、接着我们打开app.json文件,添加如下截图上代码即可，这里代码意思为页面需要注册才能展示出来,到这一步我们的小程序项目就搭建完毕,现在我们开始完成引导页面的功能开发.

2、welcome引导页开发

2.1、首先我们先来分析一下welcome最终效果图,首先有一个墨绿色的背景铺满屏幕,屏幕上面有三个内容,首先第一个是一张头像的图片,头像距离上面导航栏还有一段距离,其次是一段欢迎文本,接着是一个按钮,内容是垂直居中排列的那么这里我们可以使用flex布局来实现,如果在不同手机屏幕上图片和文字是响应式的那么我们可以rpx作为单位,那么我们开始来实现一下这个页面.

welcome引导页界面实现设计图

2.2、我们打开 welcome.wxml文件,首先我们把页面上骨架搭建出来,那么我们来分析如何搭建,我们这里使用flex布局的话,那么我们最外层需要一个容器包裹一下,其次加上图片组件,以及文本组件,还有Button组件,但是微信小程序Button组件扩展较差,这里我们可以自己自定义一个Button组件,然后我们用类选择器统一控制样式,具体代码如下

<!--pages/welcome/welcome.wxml-->
<!-- 1、最外层的容器,用于flex布局 -->
<view class="container">
<!-- 2、引入本地logo头像 --><image class="avatar"  src="/imgaes/avatar/1.png"/><!-- 3、欢迎文本 --><text class="motto">Hello,山月劇</text><!-- 4、自定义Button组件这里使用的 View 和text 组件 --><view class="journey-container"><text class="journey">开启小程序之旅</text></view>
</view>

2.3、接2.2步骤我们完成了界面骨架搭建,然后我通过加样式对骨架进行美化,这里我们打开welcome.wxss文件我们来给页面加样式

/* pages/welcome/welcome.wxss */
.container {display: flex; /*设置当前布局为Flex布局也就是容器*/flex-direction: column; /*容器里的内容垂直*/align-items: center; /*容器里的内容垂直然后在居中*/background-color: cadetblue; /*设置flex布局中颜色*/
}
/*给头像加样式*/
.avatar {width: 200rpx;height:200rpx;margin-top: 160rpx;border-radius: 20rpx;
}
/*给欢迎文本加样式*/
.motto {margin-top: 100rpx;font-size: 32rpx;font-weight: bold;
}
/*自定义Button样式*/
.journey-container {border: 2px solid azure;width: 200rpx;height: 80rpx;border-radius: 5px;text-align: center;margin-top: 200rpx;
}
/*自定义Button样式*/
.journey {font-size: 22rpx;color: floralwhite;line-height: 80rpx;font-weight: bold;
}

2.4、接2.3步骤我们完成了给界面加样式,这里我们把组件的颜色属性,我们给单独抽取出来，放到app.wxss文件中作为全局使用,代码如下

/* <text>组件的颜色属性抽取为公共 */
text {color: black;
}

2.5、到这一步基本上我们的代码就已经写完了,但是当我们编译项目后出现的效果图如下,这里出现了两个BUG,首先第一个问题我们的导航栏的颜色不是我们设置的颜色依然是黑色,同时我们下放的内容区域有一大块留白 ,那么我们首先来解决第一个导航栏是黑色的这个BUG

2.6、早期的微信小程序是不运行我们开发者去修改小程序的导航栏,我们是没有这个权限的,自然就不能通过编码的方式去实现,后来随着小程序的更新,小程序把修改导航栏这个权限还给我们开发者,但是这里我们需要通过配置的方式去修改,首先我们要打开app.json文件,然后在文件中配置上window,“navigationBarBackgroundColor”: “#5F9EA0” 代码即可.

app.json文件:{"pages": ["pages/welcome/welcome"],"window": {"navigationBarBackgroundColor": "#5F9EA0" },"sitemapLocation": "sitemap.json"
}

2.7、通过2.6步我们把导航栏的颜色配置成我们想要的后,我们来解决一下内容区域出现留白这个BUG,首先我们来分析一下出现这个问题的原因在哪里,首先我们肯定会联想到这个flex容器的问题,那么我们的高度按照当前的手机屏幕写死不就可以了吗,当然这种解决方法是有缺陷的如果我换一个手机设备,那么依然会出现空白区域,我们没有办法控制这个高度,这个时候我们可以打开调试器,我们来检查一下我们的代码,在我检查代码的时候我发现我们写的代码最外层有个这个组件在包裹着,既然最外层有个组件包裹我们的代码,那么我们给这个最外层组件加个样式不就解决了我们这个问题,我们打开welcome.wxss样式文件在最下面添加如下代码即可.

welcome.wxss文件：page {background-color:cadetblue;
}

总结

到此我们项目的两个BUG就修复完毕了,我们来总结一下这篇博客我们完成了哪些内容.

本章项目源码：点我下载

本章内容

已完成项目内容
项目整体搭建, 并简化项目文件目录
完成了欢迎界面整体布局与样式及问题修复
初始化小程序基本标签完成页面骨架搭建
初始化页面样式,完成Flex垂直居中布局
优化组件字体颜色抽取为公共
解决了小程序导航栏颜色配置问题
解决了Flex容器布局内容区域留白问题