移动软件开发实验一

2023年夏季《移动软件开发》实验报告一

一、实验目标

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

二、实验步骤

一、快速启动模板创建小程序

步骤：1.打开“创建小程序”界面，项目名称、目录可自定义；后端服务选择“不使用云服务”，完成后点击“确定”即可得到第二张图。


2.点击“预览” 、 扫描二维码后即可在手机上查看。

二、不使用模板手动创建小程序

步骤：

1.创建页面文件：将app.json文件内pages属性中的“pages/logs/logs”删除，并删除上一行末尾的逗号。

2.删除和修改文件：删除utils文件夹、pages文件夹下的logs目录、index.wxml和index.wxss中的全部代码、app.wxss中的全部代码；删除index.js中的全部代码，并输入关键词“page”找到自动补全函数的选项“Page”；删除app.js中的全部代码，并输入关键词“app”找到自动补全函数的选项“App”；

3.导航栏设计：在app.json中找到“navigationBarBackgroundColor”将其修改为“#663399”，导航栏背景色变为紫色、字体为白色。

4.页面设计：

微信头像：(图像)组件；

微信昵称： (文本)组件；
按钮：(按钮)组件；

5.逻辑实现：逻辑实现过程参考完整代码中的index.wxml和index.js。

完整代码如下：

1. index.js

Page({
  getUserProfile(e){
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
    // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    desc:'用于完善会员资料',
    wx.getUserProfile({
      desc: '展示用户信息',   //声明获取个人信息后的用途
      success:(res)=>{
        this.setData({
          src:res.userInfo.avatarUrl,
          name:res.userInfo.nickName
        })
      }
    })
  },
    
  /**
   * 页面的初始数据
   */
    data: {
      src:'/images/logo.png',
      name:'Hello World'
    }
})

2. app.json

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#663399",
    "navigationBarTitleText": "手动创建第一个小程序",
    "navigationBarTextStyle": "white"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

3. index.wxml

<view class="container">
  <image src='{{src}}' mode='widthFix'></image>
  <text>{{name}}</text>
  <button bindtap="getUserProfile" bindgetuserinfo="getMyInfo">点击获取头像和昵称</button>
 </view>

4. index.wxss

.container{
  height:100vh;
  display:flex;  /*flex布局模式*/
  flex-direction: column;   /*垂直布局*/
  align-items: center;   /*水平方向居中*/
  justify-content: space-around;   /*垂直方向分散布局*/
}
image{
  width:300rpx;
  border-radius: 50%;  /*4个角变为圆角形状*/
}
text{
  font-size: 50rpx;   /*字体大小*/
}

5. app.wxss

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 

三、程序运行结果

一、快速启动模板创建小程序运行结果截图

二、不使用模板手动创建小程序运行结果截图

四、问题总结与体会

1.我所遇到的大多数问题都是由于基础库不对导致的，需要点击”详情“ -> 本地设置 -> 调试基础库 -> 将基础库改为2.19.2后就可以运行了。

2.感悟：通过此次实验我具体了解了JavaScript和css的使用，学会了手动创建小程序的方法，对微信小程序的开发有了初步的了解。通过阅读微信的官方文档，让我学到了更多的东西。