《移动软件开发》实验一：第一个小程序的设计（增加UI的美化）

一、实验目标

1、学习使用快速启动模板创建小程序的方法；2、学习不使用模板手动创建小程序的方法。

二、实验步骤

列出实验的关键步骤、代码解析、截图。

1. 创建空白项目

1. 导航栏设计

更改app.json中的window属性，达成自定义导航栏的目的。

 "window": {
​
  "navigationBarTextStyle": "white",
​
  "navigationBarTitleText": "手动创建第一个小程序",
​
  "navigationBarBackgroundColor": "#663399"
​
 },

1. 页面设计

• 微信头像 < image >

• 微信昵称 < text >

• 按钮 < button >

<view class = 'container'>
  <image src='{{src}}' mode='widthFix'></image>
  <text>{{name}}</text>
  <button open-type="getUserInfo" bindgetuserinfo="getProfile">点击获取头像和昵称</button>
</view> 

对应index.wxss文件的代码：

.container{
​
 height: 100vh;
​
 display: flex;
​
 flex-direction: column;
​
 align-items: center;
​
 justify-content: space-around;
​
}
​
image{
​
 width: 300rpx;
​
 border-radius: 50%;
​
}
​
text{
​
 font-size: 50rpx;
​
}

1. 设置本地图片，作为默认

• 创建images文件夹

• 将本地的默认图片logo.jpg放入文件夹内

• 编写index.js文件，实现逻辑

Page({
​
 data:{
​
  src: '/images/logo.jpg',
​
  name: 'Hello World'
​
 }
​
})

1. *获取微信用户信息**

• 按钮绑定js中的事件函数

<button open-type="getUserInfo" bindgetuserinfo="getProfile">点击获取头像和昵称</button>

• 编写获取微信信息的函数逻辑

 getProfile: function(e)
​
 {
​
  console.log(e.detail.userInfo)
​
  let info = e.detail.userInfo
​
  this.setData({
​
   src: info.avatarUrl,
​
   name: info.nickName
​
  })
​
 }

• 调试该函数

1. UI界面优化

   (1)增加text控件的阴影效果，使微信用户的用户名更加美观

   /* 增强字体阴影效果的 text 元素 */
   .custom-text {
     font-size: 50rpx;                
     color: #333333;                   /* 字体颜色 */
     text-shadow: 4rpx 6rpx 8rpx rgba(0, 0, 0, 0.7);  /* 增强的字体阴影效果 */
     text-align: center;              
     display: inline-block;           
     margin: 10rpx;                    
   }

   (2)对button控件（按钮）进行美化，使它更加美观。增加点击特效和悬停效果，更加易于用户使用和理解。

   .custom-button {
     width: 200rpx;             /* 按钮宽度 */
     height: 80rpx;             /* 按钮高度 */
     background: linear-gradient(45deg, #ff6b81, #ff9472); /* 渐变背景 */
     border-radius: 40rpx;      
     box-shadow: 0rpx 10rpx 30rpx rgba(0, 0, 0, 0.2); 
     color: white;             
     font-size: 30rpx;          
     text-align: center;       
     line-height: 50rpx; 
     border: none;             
     outline: none;             
   }
   ​
   /* 按钮的点击效果 */
   .custom-button:active {
     background: linear-gradient(45deg, #ff9472, #ff6b81); /* 点击时颜色变化 */
     box-shadow: 0rpx 5rpx 15rpx rgba(0, 0, 0, 0.2); 
     transform: translateY(5rpx); /* 点击时按钮下移 */
   }
   ​
   /* 按钮的悬停效果  */
   .custom-button:hover {
     background: linear-gradient(45deg, #ff8a90, #ffb084); /* 悬停时颜色变化 */
   }

2. （3）增加按钮禁用时的效果。

3. /* 禁用状态下的按钮样式 */
   .custom-button[disabled] {
     background: #d3d3d3;  /* 灰色背景 */
     color: #a9a9a9;       /* 灰色字体 */
     box-shadow: none;     /* 移除阴影 */
   }

   如图所示：

4. 

5. 1. 功能优化

   在点击获取头像和昵称后，禁止再次点击获取头像和昵称，并且将按钮置于灰色，便于用户理解。

   data:{
       src: '/images/logo.jpg',
       name: 'Hello World',
       isDisabled: false  //按钮可点击
     }
   // 点击按钮后执行下面代码, 放在getProfile中
   this.setData({
         isDisabled: true  // 设置按钮为不可点击状态
       });

   总体的wxml如下：

   <view class = 'container'>
     <image src='{{src}}' mode='widthFix'></image>
     <text class="custom-text">{{name}}</text>
     <button id="get_info" open-type="getUserInfo" bindgetuserinfo="getProfile" class="custom-button" disabled="{{isDisabled}}">点击获取头像和昵称</button>
   </view>

   功能结果如下：

三、程序运行结果

列出程序的最终运行结果及截图。

1. 打开小程序后，所显示的界面如下（按钮美化，用户名增加阴影效果）

1. 点击按钮后，首先出现获取头像、昵称申请：

1. 点击允许后，获取微信头像、昵称，并且显示出来，同时按钮禁用，外观改变

四、问题总结与体会

描述实验过程中所遇到的问题，以及是如何解决的。有哪些收获和体会，对于课程的安排有哪些建议。

问题：在新版本中，getUserInfo和getUserProfile在小程序中停止使用，无法获取微信用户信息。

解决方案：进入开发者工具，打开详细->本地设置->调试基础库，将调试基础库设为2.27.0版本以下。在这个基础库版本中，方法getUserInfo和getUserProfile没有被弃用。

收获和体会：本次实验主要学习了微信开发者工具的下载和安装，以及简易小程序的制作。学习了类似于html+js+css的方法，使用wxml+js+wxss的方法，进行了前端的编程。提升了对于类似前端框架的理解，以及对于控件的理解。