移动软件开发实验一

最新推荐文章于 2022-08-26 19:12:19 发布

爱吃章鱼的怪兽

最新推荐文章于 2022-08-26 19:12:19 发布

阅读量409

点赞数

文章标签：前端 javascript 小程序

本文链接：https://blog.csdn.net/Karthus77/article/details/126383550

版权

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

一、实验目标

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

二、实验步骤

1. 手动创建小程序

请添加图片描述

2. 页面配置

删除原有的wxml和和wxss中的html和css文件。删除原page的js文件，修改后的项目结构如下

请添加图片描述

3.视图设计

3.1导航栏设计

请添加图片描述

3.2页面设计

请添加图片描述

4.逻辑设计

给Button绑定方法并使用该方法修改html文件中命名为src和name的资源

   <button open-type='getUserInfo' bindtap='getUserProfile'>点击获取头像和昵称</button>

<image src='{{src}}' mode='widthFix'></image>
    <text>{{name}}</text>

getUserProfile(e) {
        // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
        wx.getUserProfile({
          desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
          success: (res) => {
            console.log(res)
            this.setData({
              name: res.userInfo.nickName,
              hasUserInfo: true,
              src:res.userInfo.avatarUrl,
            })
          }
        })
      }