移动软件开发_lab1

Hockbest

已于 2024-08-19 17:16:35 修改

阅读量811

点赞数 15

文章标签： javascript 前端

于 2024-08-19 16:51:16 首次发布

本文链接：https://blog.csdn.net/m0_73768807/article/details/141329462

版权

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

姓名	李佳潼
本实验属于哪门课程？	中国海洋大学22夏《移动软件开发》
实验名称？	实验1：第一个微信小程序
Github仓库地址？	Physical2/mobile_software_1 (github.com)

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

一、实验目标

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

二、实验步骤

实验准备

安装 微信开发者工具，利用在平台完善信息后获取的小程序 AppID 将注册的小程序在工具中打开；

代码实现

针对实验要求，分别编写相应文件内容

app.json

实现导航栏颜色、文字的调整

  "window": {
    "backgroundColor": "#ffffff",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#663399",	//导航栏背景为紫色
    "navigationBarTitleText": "手动创建第一个",	//导航栏内容
    "navigationBarTextStyle": "black"	//文字为黑色
  },

index.wxml

实现主页内容框架，确定预使用的组件

<view class="container">
  <view  class="showUserInfo">
    <image class="showUserImg" src='{{userInfo.avatarUrl}}'mode='widthFix'/>
    <text class="showUserName">{{userInfo.nickName}}</text>
  </view>
  
  <button open-type='getUserProfile' bindtap='getUserProfile' class="button_1">
    点击获取头像和昵称
  </button>
</view>

index.wxss

对主页各组件样式进行调整，使用类选择器、标签名选择器等，使页面简洁直观

.container{
  height: 90vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.button_1{
  width: 80%;
  margin-top: -10%;
}

.showUserInfo{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.showUserName{
  margin-top: 10%;
}

.showUserInfo image{
  width: 300rpx;
  border-radius: 50%;
}

index.js

实现点击按钮获取用户信息并匹配到 userInfo 的函数功能

Page({
  data: {
    userInfo: {
      avatarUrl: '../../images/avatar.png',		//默认头像
      nickName: '匿名用户',		//默认名称
    },
    hasUserInfo: false,		//用于后续对无用户的情况进行单独测试
  },
 
getUserProfile: function(e){
  wx.getUserProfile({
    desc: '用于完善用户信息',
    success: (result) => {
      console.log(result);
      this.setData({
        userInfo: result.userInfo,	//将用户信息更新为获取后的用户信息
        hasUserInfo: true,
      })
    },
    fail: () => {
      wx.showToast({
        title: '授权失败',
      });
      this.setData({
        hasUserInfo: true,
      })
    },
    complete: (res) => {},
  })
}
  
});