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

news2024/11/23 18:26:45

姓名和学号？
本实验属于哪门课程？	中国海洋大学22夏《移动软件开发》
实验名称？	实验1：第一个微信小程序
博客地址？	XXXXXXX
Github仓库地址？	https://github.com/enfantsRichesDeprimes/Mobile-Software-Development-Experiment-1

（备注：将实验报告发布在博客、代码公开至 github 是 加分项，不是必须做的）

一、实验目标

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

二、实验步骤

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

使用模板创建项目

在这里插入图片描述
需要新弄一个appid（相当于每一个小程序的唯一标识），不能用之前的

不使用模板创建项目

在这里插入图片描述

<view class="container">
  <image src='{{image}}' class="diamond-border"></image>
  <text>{{nickName}}</text>
  <button bind:tap="getUserProfile" open-type="getUserInfo" class="a">点击获取头像和昵称</button>
</view>

wxml代码，使用{{}}形成动态效果，{{}}中的内容对应 $j s$ 页面中的 $p a g e$ $d a t a$

getUserProfile(e) {
    wx.getUserProfile({
      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        this.setData({
          image: res.userInfo.avatarUrl,
          nickName: res.userInfo.nickName
        })
      }
    })
  },

$j s$ 页面中与按钮绑定的事件，获取到返回结果并赋值给对应变量，从而实现动态改变页面效果

.a {
  padding: 10px 16px; /* 调整按钮内边距，根据需要进行修改 */
  min-width: 30px; /* 设置最小宽度为自适应 */
  background-color: beige;
}


.container{
  height: auto;
  width: auto;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.diamond-border {
  margin-top: -35px;
  width: 60vw; 
  height: 60vh;  
  background-color: transparent;
  border: 2px solid black;
}

对于 $w x m l$ 控件实现外观格式调整的效果