微信小程序编程：1.利用view、text、input和button组件实现如下图所示效果（50分）： 具体要求如下： （1）在桌面创建一个以“学号后两位 名字”命名的文件夹，用于存放项目代码。例如：00 张三；（5分） （2）在index页面中利用view、text、input和button组件完成页面效果。（10分） （3）对index页面进行页面配置，其中：导航栏背景颜色设置为蓝色（#369），文字颜色为白色（white），导航栏标题文字内容设置为“基本信息”。（10分） （4）对页面的样式进行设置，其中：view组件的外边距设置为“50rpx”，input组件的宽设置为“600rpx”，并加上颜色为灰色（#ccc）的下部边框线。（25分） 2.利用wx.createAnimation组件、animal组件实现在罗盘动画中对图片一系列的动画操作，包括旋转、缩放、移动、倾斜效果，并通过设置不同的button（按钮）实现相对应的变化效果。（50分） 效果图如下： 具体要求如下： （1）在pages 数组新增compass页面；（5分） （2）对compass页面进行页面配置，其中：导航栏标题文字内容设置为“罗盘动画”。（5分） （3）在compass页面中利用view、image、button组件完成页面效果。（10分） （4）实现在罗盘动画中对图片一系列的动画操作，包括旋转、缩放、移动、倾斜效果，并通过设置不同的button（按钮）实现相对应的变化效果。（25分） 对代码有一定的注释说明。（5分）

微信小程序的编程涉及到多个方面，包括页面布局、样式设置、动画效果等。以下是根据你的需求，给出的微信小程序编程的基本指导和代码示例。

1. 基本信息页面实现

（1）创建文件夹

在桌面创建文件夹，例如命名为“00 张三”。

（2）index页面布局

使用view、text、input和button组件来实现页面布局。

<!-- index.wxml -->
<view class="container">
  <view class="header">
    <text>学号：<input class="input-xuehao" placeholder="请输入学号" /></text>
    <text>姓名：<input class="input-name" placeholder="请输入姓名" /></text>
  </view>
  <button bindtap="submitInfo">提交</button>
</view>

（3）页面配置

在app.json或页面的.json配置文件中设置导航栏样式。

{
  "navigationBarBackgroundColor": "#369",
  "navigationBarTextStyle": "white",
  "navigationBarTitleText": "基本信息"
}

（4）样式设置

在index.wxss中设置样式。

/* index.wxss */
.container {
  margin: 50rpx;
}
.input-xuehao, .input-name {
  width: 600rpx;
  border-bottom: 1px solid #ccc;
}

2. 罗盘动画页面实现

（1）新增页面

在app.json的pages数组中新增compass页面。

{
  "pages": [
    // ... 其他页面配置
    "pages/compass/compass"
  ]
}

（2）页面配置

设置compass页面的导航栏标题。

{
  "navigationBarTitleText": "罗盘动画"
}

（3）页面布局

使用view、image、button组件来实现页面布局。

<!-- compass.wxml -->
<view class="compass-container">
  <image src="your-image-path.jpg" mode="aspectFit" class="compass-image"></image>
  <button bindtap="rotate">旋转</button>
  <button bindtap="scale">缩放</button>
  <button bindtap="move">移动</button>
  <button bindtap="skew">倾斜</button>
</view>

（4）动画实现

使用wx.createAnimation来创建动画，并在.js文件中绑定按钮事件。

// compass.js
Page({
  data: {
    animation: null
  },
  onLoad: function() {
    this.setData({
      animation: wx.createAnimation({
        duration: 1000,
        timingFunction: 'ease'
      })
    })
  },
  rotate: function() {
    this.setData({
      animation: this.data.animation.rotate(360).step()
    })
    this._applyAnimation()
  },
  scale: function() {
    this.setData({
      animation: this.data.animation.scale(1.5, 1.5).step()
    })
    this._applyAnimation()
  },
  move: function() {
    this.setData({
      animation: this.data.animation.translate(100, 100).step()
    })
    this._applyAnimation()
  },
  skew: function() {
    this.setData({
      animation: this.data.animation.skew(20, 10).step()
    })
    this._applyAnimation()
  },
  _applyAnimation: function() {
    this.setData({
      animation: this.data.animation.export()
    })
  }
})

（5）注释说明

在代码中添加注释，解释每个函数和步骤的作用。

请注意，以上代码仅为示例，实际开发中需要根据具体需求进行调整。例如，图片路径、动画的具体参数等都需要根据实际情况来设置。