移动软件开发实验一：第一个微信小程序

·午后葡萄冰·

已于 2023-08-28 15:22:03 修改

阅读量272

点赞数

文章标签： notepad++

于 2023-08-22 15:18:16 首次发布

本文链接：https://blog.csdn.net/m0_63773979/article/details/132428354

版权

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

一、实验目标

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

二、实验步骤

1.快速启动模板创建小程序

只需要在微信开发者工具中选择创建小程序，填写项目名称，目录和AppID就可以新建一个小程序了

可以生成小程序的预览效果

2.手动创建小程序

开始依旧是和快速启动创建一样生成模板，然后我们只需要手动修改页面配置就可以了

（1）首先按照快速启动模板创建小程序的步骤，我们得到了一个小程序模板

（2）创建页面文件并删除和修改其他文件

将app. json文件内 pages属性中的“pages/logs/logs”删除,并删除上一行末尾的逗号。按快捷键Ctrl+S保存当前修改。

删除 utils文件夹及其内部所有内容。删除 pages文件夹下的 logs目录及其内部所有内容。删除 index. wxml和 index. wxss中的全部代码。删除 index. js中的全部代码，并且输入关键词“page”找到第二个选项按回车键让其自动补全函数

删除 app. wxss中的全部代码。删除 app. js中的全部代码，并且输入关键词“app”找到第一个选项按回车键让其自动补全函数

（3）视图设计

在app.json中对window属性重新配置，自定义导航栏效果，在这里我将导航栏背景改为了粉色，字体为黑色，文字为“贩卖日落”

设计包含微信头像，微信昵称和“点击获取头像和昵称”按钮的页面，分别使用<image><text><button>组件

<image></image>
<text>Hello World</text>
<button>点击获取头像和昵称</button>

设置布局

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

}

原始头像是放入images文件夹下的图片user.jpg,代码中的src属性用于指定图片来源，mode属性表示图片随着指定的宽度自动拉伸高度以显示原图的正确比例

设置组件样式

image{
  width:300rpx;
  border-radius:50%;
}
text{
  font-size:50rpx;
}

原始界面效果图如下

（3）逻辑实现

给<button>组件加上获取用户信息的功能

将图片来源和文本内容使用双花括号做成动态数据

在data属性中追加这两个动态数据的值，使其仍然可以显示原来的内容

data: {
    src:'/images/user.jpg',
    name:'Hello World'
  },

使用getMyInfo函数使获取到的信息更新到动态数据上

getMyInfo:function(e){
   wx.getUserProfile({
     desc:'展示用户信息',
     success:(res)=>{
       console.log(res)
       this.setData({
         src:res.userInfo.avatarUrl,
         name:res.userInfo.nickName,
       })
     }
   })
  },