微信小程序：实现一个基本的页面

声明：本文章的代码来自于 https://blog.csdn.net/weixin_30416871/article/details/99098323

一、页面展示

二、文件夹准备

该页面的实现需要：

1. 在pages页面文件夹下新建一个页面，起名叫welcome
2. 由于一个页面需要四个.js .json .wxml .wxss文件，所以我们需要创建这四个文件。注意名字要相同
3. 在页面中进行了一个图片的展示，所以我们需要一个资源文件夹images，专门存放图片
   

三、源码

1. 页面布局文件.wxml

<!--wxml 是编写小程序骨架的文件-->
<!-- <div> 一样的效果-->
<view class = 'container'>
  <image class = 'user-avator' src = '/images/1.jpg'></image> <!--图片以及图片路径-->
  <text class = 'user-name'>Hello, WeChat</text> <!--一个文本-->
  <view class = 'moto-container'>
    <text class='moto'>开启微信小程序之旅</text> <!--另一个文本-->
  </view>
</view>

2. 页面样式文件.wxss

.container{
  /* 布局修改 */
  display: flex;
  /* 纵向排列 */
  flex-direction: column;
  /* 内容居中 */
  align-items: center;
}

.user-avatar{
  width: 100rpx;
  height: 200rpx;
  margin-top: 160rpx;
}

.user-name{
  margin-top: 100rpx;
  font-size: 32rpx;
  font-weight: bold;
}

.moto{
  font-size: 22rpx;
  font-weight: bold;
  line-height: 80rpx;
  color: #405f80;
}

.moto-container{
  margin-top: 200rpx;
  border: 1px solid #405f80;
  width: 200rpx;
  height: 80rpx;
  border-radius: 5px;
  text-align: center;
}

page{
  height: 100%;
  background-color: #b3d4db;
}

3. 页面逻辑文件.js

  在写完了视图层以后，页面并不能正常显示，如果编译运行，会出现如下错误：

即无法找到页面。
在看了一些博客以及微信小程序开发文档后，找到了解决方案：在.js文件中加上如下代码，页面即可正常显示：

Page({

})

官方对于Page()的解释如下：

总结：在写完视图层之后，我们需要在.js文件中对页面进行注册，页面才能正常显示。

4. 静态配置文件.json

写完了.js文件后，.json文件自动生成了如下代码：

{
  "usingComponents": {}
}

• 暂时还不知道啥意思。。。

四、编译运行

如果想要初始界面为我们刚刚写的页面，需要在全局配置文件app.json中的键pages的第一行加入刚刚写的页面的路径作为值。（.json文件中都是key-value形式的元素）