从零开始学微信小程序开发－－－3、小程序静态启动页面的制作

现在正式开始编码啦！~

我的IDE版本：

首先，新建一个小程序项目，然后创建所需要的文件以及目录：

然后在index.wxml中编写小程序的页面骨架：

<!-- index.wxml是编写小程序骨架的文件，相当于HTML -->
<!-- <view>相当于HTML中的<div> -->
<view>
  <image style='width:200rpx;height:200rpx;' src='/images/tx.jpg'></image>
  <text>Hello, Mini Program</text>
  <view>
   <!-- 只有被<text>组件包起来的文字才能在客户端被长按选中 -->
    <text>加油！！开启小程序之旅吧！</text> 
  </view>
</view>

但是，一开始就出错了？？？

对哦，目录和文件都是我自己创建的，没有在app.json中配置页面路径信息，无法找到页面。

//app.json 这个文件里面不要随意加注释，会报错

{
  "pages": [
    "pages/index/index"
  ]
}

然后才后知后觉是因为我没有对logs进行配置，不过好像logs文件没用到，我就把它删了（删了之后可能会出现没法保存的情况，重启IDE即可），这时候至少不报这个错了。

{

"pages": [

"pages/index/index"

],

"window":{

"navigationBarBackgroundColor": "#f5f4a7"

}

}

但是，出现了新的错误：没有再index.js中调用Page()

怎么办呢？我是初学者呀，我咋知道Page()里面要写啥？还有为什么一定要有page()呢？

莫慌！我们先看看参考文档注册页面 Page 这里怎么写的：

上一节学习中也提到过：在程序与页面这一小节里面，有这样一段话：

你可以观察到 pages/logs/logs 下其实是包括了4种文件的，微信客户端会先根据 logs.json 配置生成一个界面，顶部的颜色和文字你都可以在这个 json 文件里边定义好。紧接着客户端就会装载这个页面的 WXML 结构和 WXSS 样式。最后客户端会装载 logs.js，你可以看到 logs.js 的大体内容就是:
Page({
  data: { // 参与页面渲染的数据
    logs: []
  },
  onLoad: function () {
    // 页面渲染后 执行
  }
})
Page 是一个页面构造器，这个构造器就生成了一个页面。在生成页面的时候，小程序框架会把 data 数据和 index.wxml 一起渲染出最终的结构，于是就得到了你看到的小程序的样子。

在渲染完界面之后，页面实例就会收到一个 onLoad 的回调，你可以在这个回调处理你的逻辑。

我们说过，logs和index其实是两个不同的页面，logs.js和index.js对它们对应的页面的作用也是一样的。

微信客户端通过app.json中的"pages"配置项找到pages/index/index之后，会先根据index.json生成一个界面（这还不是我们最后要渲染出来的页面！），接着装载wxml和wxss文件，最后装载index.js，而index.js里面的Page({})是一个页面构造器，这个构造器生成一个页面，所以每一个页面的js文件里面都应该有一个这样的页面构造器，才能生成对应的小程序页面。

那么，在index.js里面可以写那些内容呢？又是求助于帮助文档的时候了！

index.js是页面脚本文件，在这里放监听并处理页面的生命周期、获取小程序实例、声明并处理数据、响应页面交互事件等的脚本。

这些内容我们还没用到，看一下QuickStart中这里的代码是怎样的:

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

去掉里面的相关配置和应用实例的获取（const app = getApp()）就剩下这个了：

//index.js
Page({
})

不报错，然后就出来如下界面啦~

将样式style='width:200rpx;height:200rpx;margin-top:0rpx;'移植到index.wxss文件中：

.user_avatar{
height: 200rpx;
width: 200rpx;
margin-top: 160rpx;
}

注意：当wxml的style属性中定义的样式和wxss文件中定义的样式发生冲突时，以wxml的style属性中定义的为准。

<!-- wxml是编写小程序骨架的文件，相当于HTML -->
<!-- <view>相当于HTML中的<div> -->
<view>
  <image src='/images/tx.jpg' class='user_avatar'></image>
  <text>Hello, Mini Program</text>
  <view>
   <!-- 只有被<text>组件包起来的文字才能在客户端被长按选中 -->
    <text>加油！！开启小程序之旅吧！</text> 
  </view>
</view>

.user_avatar{
  height: 200rpx;
  width: 200rpx;
  margin-top: 160rpx;
}

我们知道在html中要引入CSS和JS的文件路径，才能找到对应的文件，但是在wxml中，无需引用wxss文件，因为在app.json中已经配置过页面路径，在这里之所以没有写后缀名是因为框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理，故，直接在wxss文件中直接引用在wxml中的类选择器名即可为之定义相应的样式。

接下来我们想要让图片和两行文字分别垂直排列，那么就要先把它们放在弹性容器里面（display:flex 具体见菜鸟教程中关于CSS3弹性盒子的介绍），然后让他们垂直排列（flex-direction:column）

三者已经乖乖地排成一列了，接下来就让它们水平居中（align-items:center,通常垂直居中是通过设置行高line-height实现的）

接下来就是改变一下图片、字体的样式、设置行高啦，这些都和html+css所差无几，就不一一介绍，直接贴代码：（align-items:center是居中对齐弹性盒子各项，text-align:center是设置文字书水平居中）

//index.wxml

<!-- wxml是编写小程序骨架的文件，相当于HTML -->
<!-- <view>相当于HTML中的<div> -->
<view class='container'>
  <image src='/images/tx.jpg' class='user_avatar'></image>
  <text class='say_hello'>Hello, <text class='user_name'>Mini Program</text></text>
  <view class='encourage_container'>
   <!-- 只有被<text>组件包起来的文字才能在客户端被长按选中 -->
    <text class='encourage'>开启小程序之旅</text> 
  </view>
</view>

//index.wxss

.container{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.user_avatar{
  height: 200rpx;
  width: 200rpx;
  margin-top: 160rpx;
  border-radius: 50%;
}
.say_hello{
  font-size: 32rpx;
  font-weight: bold;
  margin-top: 80rpx;
}
.user_name{
  color: red;
}
.encourage_container{
  border: 1px solid #405f80;
  width: 200rpx;
  height: 80rpx;
  border-radius: 5px;
  text-align: center;
  margin-top: 120rpx;
}
.encourage{
  font-size: 22rpx;
  font-weight: bold;
  
}

//app.json

{
  "pages": [
    "pages/index/index"
  ]
}

为整体页面设置一个背景色：但我们为container设置背景色时会发现并不能实现整个页面覆盖，

这是因为我们并没有为container设置过宽高，这时候的解决方法有两个：

1、为container设置宽高，如iPhone6下设置height: 667px;这就可以解决这个问题，但是我们不可能要求所有用户都用iphone6啊，换一种设备同样会出现这个问题，所以这种方法不够灵活！但是，对container设置height:100%也是没有用。

2、我们找到Wxml，可以发现小程序默认为我们的程序加上了<page>组件，

也就是说，<page>才是真正的顶级容器，我们同时为container和page设置height:100%看看会怎样：

很好，完美的解决了这个问题！但是导航栏的黑色太突兀了，不想要怎么办呢？通过上一节的学习我们知道app.json中window配置项是用于设置小程序的状态栏、导航条、标题、窗口背景色的，

我们试一下为它设置同样的背景色：

最后呈现出来的页面效果如下：

至此，启动页面就做完啦！

参考资料：

小程序API文档：https://developers.weixin.qq.com/miniprogram/dev/api/

上一篇：小程序项目的创建、相关文件的作用及小程序IDE

从零开始学微信小程序开发－－－3、小程序静态启动页面的制作

猜你喜欢