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

当归394

已于 2024-08-20 09:07:14 修改

阅读量729

点赞数 26

文章标签： notepad++

于 2024-08-19 21:56:30 首次发布

本文链接：https://blog.csdn.net/weixin_73600647/article/details/141335864

版权

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

姓名：冯欣怡学号：22020006029

姓名和学号？	冯欣怡，22020006029
本实验属于哪门课程？	中国海洋大学22夏《移动软件开发》
实验名称？	实验1：第一个微信小程序
博客地址？	XXXXXXX
Github仓库地址？	XXXXXXX

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

一、实验目标

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

二、实验步骤

（一）注册微信小程序

1. 访问微信公众平台官网首页（mp.weixin.qq.com），进行注册

填写邮箱和密码，注意每个邮箱只能申请一个公众号。

2. 注册成功后填写小程序信息+类

填写小程序的基础信息，我们的小程序便有打好了地基~，后续继填写解锁其他权限！

（二）下载微信开发工具并建立空项目

1. 下载微信开发者工具

在官方网站developers.weixin.qq.com/miniprogram/dev/devtools/download.html中下载适合自己的版本，

下载完成后打开微信开发工具

默认是游客模式，我们用刚刚认证小程序的微信号扫码登录。

2. 建立空项目

点击+号创建空项目

选择项目目录，在目录后面输入想命的名，上方项目名称自动更新

下拉AppID可以看到刚刚申请的小程序对应的ID号码，选择此码

选择不使用云服务

选择不使用模板，点击创建

打开后发现带有模板

删除components的所有内容，删除pages中index.wxml,index.wxs，index.json的代码，，删除index.js的代码，输入page点击第二个function补全函数。

清空app.js ，app.wxss；在app.js中输入app找第一个app function补全函数

然后编译，发现左侧的预览界面全空

即创建了一个空项目

（三）完成index的代码

1. 思路

我们需要实现：通过按一个按键，获得微信头像和微信昵称。

操作前：界面是默认头像和默认昵称+一个按键“点击获取头像和昵称”

操作后：微信头像、微信昵称+一个按键“点击获取头像和昵称”

获取用户头像和昵称操作需要用到的官方函数是getUserProfile或getUserInfo

2. 完成操作前页面

（1）上传默认的头像

新建一个photo文件夹，上传默认的图片

（2）编写index.wxml

<view>
   <block>
      <image  src="/photo/1.jpg"></image>
      <text>微信昵称</text>
      <button> 获取头像昵称 </button>
    </block>
</view>

呈现了一个非常乱的样子

在index.wxss中写页面的布置、滑动页面、container类、图片类和文本类，设置格式

/**index.wxss**/
page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 200rpx 0;
  box-sizing: border-box;
} 

.scrollarea {
  flex: 1;
  overflow-y: hidden;
}
.avatar{
  height: 200px;
  width: 200px;
  border-radius: 100px;
}
.te{
  padding: 10%;
}

3. 完成操作函数

点击button触发获取头像操作，使用bindtap，绑定函数

 <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>

设置data :hasUserInfo-false,canIUseGetUserProfile-false,

写onLoad函数，调用wx.getUserProfile函数，弹出一个弹窗，提醒用户是否同意共享自己的头像和昵称，如果用户选择确定，则canIUseGetUserProfile: true。

canIUseGetUserProfile= true才可以调用getUserProfile函数获取用户信息，这一逻辑在wxml中实现。

getUserProfile函数调用wx.getUserProfile，获得userInfo: res.userInfo, hasUserInfo:设为true

hasUserInfo用于控制在前端显示的头像是默认还是真实的，如果hasUserInfo=false,则显示默认，hasUserInfo=true显示获取到的userInfo

在index.js中写函数：

// index.js
Page({
  data: {
    userInfo: {},
    hasUserInfo: false,
    canIUseGetUserProfile: false,
  },
  onLoad() {
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },
  getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
    wx.getUserProfile({
      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
})

3. 完成获取信息操作后的页面

头像和昵称所在的位置在点击前是默认，点击后是获得的信息，这里设置if else

<block wx:if="{{!hasUserInfo}}">
      <image  src="/photo/1.jpg" class="avatar"></image>
      <text class="te">微信昵称</text>
      <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
    </block>
    <block wx:else>
      <image  src="{{userInfo.avatarUrl}}" class="avatar"></image>
      <text class="te">{{userInfo.nickName}}</text>
      <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
    </block>

如果hasUserInfo=1，显示第一个block

如果hasUserInfo=0，显示第二个block