移动软件开发第一课

哎呀别太离谱

已于 2024-08-19 20:47:28 修改

阅读量655

点赞数 12

文章标签：小程序

于 2024-08-19 20:46:21 首次发布

本文链接：https://blog.csdn.net/mengnanjie3527/article/details/141334528

版权

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

姓名：赵俊杰学号：22020007149

姓名和学号	赵俊杰，22020007149
本实验属于哪门课程	中国海洋大学24夏《移动软件开发》
实验名称	实验1：第一个微信小程序
博客地址	https://blog.csdn.net/mengnanjie3527?spm=1000.2115.3001.5343
Gitee仓库地址	https://gitee.com/zhao-junjie3527/projects

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

一、实验目标

1、学习使用快速启动模板创建小程序的方法；2、学习不使用模板手动创建小程序的方法。
在这里插入图片描述

二、实验步骤

####2.1 自动生成小程序
####2.1.1 项目创建
在完成开发前准备包括注册小程序、下载安装小程序开发工具等准备工作之后，打开开发工具开始项目创建工作。

此时开发者依次填写项目名称、目录和AppID就可以新建一个小程序项目。
在此可以先使用测试号appid来完成实验，选择不使用云服务，和JS基础模板完成创建工作。

####2.1.2 真机预览
在这里插入图片描述

在此测试学习了解预览功能和模拟器功能来调试

####2.2 手动创建小程序
#####2.2.1 项目创建

本项目创建任然会自动生成模板代码，后续进行手动修改配置。

####2.2.2页面配置

在这里插入图片描述

具体操作如下:
(1)将 app.json 文件内 pages 属性中的“pages/logs/logs”删除,并删除上一行逗号
(2)按快捷键 Ctrl+S 保存当前修改。
(3)删除utils 文件夹及其内部所有内容
(4)删除pages 文件夹下的 logs 日录及其内部所有内容。
(5)删除index.wxml和index.wxss 中的全部代码。
(6)删除 index.js 中的全部代码,并且输人关键词“page”找到第二个选项按回车自动补全函数。
(7)删除 app.wxss 中的全部代码。
(8)删除 app.js中的全部代码,并且输人关键词“app”找到第一个选项按回车键认补全函数

至此完成了模板代码修改

####2.2.3 视图设计
(1)导航栏设计，将默认黑底白字效果的导航栏重新配置,
如下代码则将导航栏背景色设置为紫色，字体为白色

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarTitleText": "手动创建第一个小程序",
    "navigationBarBackgroundColor": "#663399"

  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

在这里插入图片描述

（2)页面设计
页面上主要包三个内容，分别是微信头像，微信昵称和“点击获取头像和昵称”按钮。
·微信头像:(图像)组件:
·微信昵称:(文本)组件;
·按钮:(按钮)组件。
相关 WXML(pages/index/index.wxml)代码片段如下:

<view class='container'>
<image></image >
<text>Hello world</text>
<button>点击获取头像和昵称</button >
</view>

相关 WXSS(pages/index/index.wxss)代码片段如下:

<view class='container'>
<image src='{{src}}'mode = 'widthFix'></image>
<text>{{name}}</text>
<button open-type='getUserInfo'bindgetuserinfo='getMyInfo'>点击获取头像和呢称</button>
</view>

可见此时可以显示文本和按钮。由于尚未获得头像图片,所以无法显示内容临时使用本地图片代替,在点击按钮获取微信头像后再更改。
在项目中新建自定义文件夹images用于存放图片,右击此文件夹,选择“硬盘打开地图片666. png复制、粘贴进去等待使用。修改 WXML 页面的<'image >组件如下:

<image src='/images/666.png' mode = 'widthFix'></image >

上述代码中src属性用于指定图片来源为根目录下images 文件夹中的 logo.pn!mode属性表示图片随着指定的宽度自动拉伸高度以显示原图的正确比例。在 WXSS 页面追加<'image >和<'text>组件的相关样式代码如下:

image{
  width:300rpx;/*图片宽度*/
  border-radius:50%;/*4个角变为圆角形状*/
  }
  text{
  font-size:50rpx;/*字体大小*/
  }

在这里插入图片描述

####2.2.4 逻辑实现
(1)获取微信用户信息
在 WXML 页面修改<'button>组件的代码,为其追加获取用户信息事件,代码片段如下:

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

其中 open-type= getUserInfo’表示激活获取微信用户信息功能,然后使用 bindgetuser性表示获得的数据将传递给自定义兩数 getMyInfo,开发者也可以使用其他名称。在 JS 页面的 Page()内部追加 getMyInfo 函数,代码片段如下:

getMyInfo:function(e){
console.log(e.detail.userInfo)
},

保存后预览项目,如果点击按钮后 Console 控制台能够成功输出一段数据,就说明功,

(2)使用动态数据显示头像和昵称
在 WXML 页面修改< image>和< text >组件的代码,将图片来源和文本内容使用双花括号({{}))做成动态数据,代码片段如下

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

同时修改JS文件,在现有的data属性中追加这两个动态数据的值，使其仍然可以显示原先的内容
(3)更新头像和昵称
修改 JS 文件中 getMyInfo 函数的代码,使获取到的信息更新到动态数据上，代码片段如下:

getMyInfo:function(e)
{
let info =e.detail.userInfo;
this.setData({
src:info.avatarUrl
name:info.nickName
//更新图片来源
//更新昵称
})
},

到此已经完成全部内容，保存后预览此项目!

三、程序运行结果

列出程序的最终运行结果及截图。
在这里插入图片描述

点击按钮后！
在这里插入图片描述

四、问题总结与体会

##从中遇到的问题
期间由于我的开发工具版本是最新的，在本地基础库更新到2.27后不再支持此代码查询头像和昵称，情况如图

在这里插入图片描述

我通过上网查询，将库修改为2.20后成功解决此问题，下图为解决完成后，点击按钮后结果
在这里插入图片描述

##实验心得

经过实验一的学习与实践，我不仅掌握了基本的开发流程，还深刻体会到了小程序开发的魅力与挑战。我发现基础知识的积累至关重要，以及环境搭建与工具使用。微信开发者工具是开发小程序不可或缺的利器。我学习了它的界面布局、功能特性及快捷键操作。通过实践，我掌握了如何创建项目、编写代码、调试程序以及预览效果。此外，我还学习了如何使用版本控制工具（如Git）来管理我的代码，确保项目的有序进行。微信小程序的技术栈不断更新迭代，新的功能和API层出不穷。同时，我也乐于将自己的学习成果和经验分享给周围的人，通过交流和讨论，我获得了更多的灵感和启发。