ouc-exp1-blog

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

一、实验目标

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

二、实验步骤

列出实验的关键步骤、代码解析、截图。

1.自动生成小程序

根据实验步骤，选择项目名称，目录，注册好Appid，后端服务选择“不选择云开发”，语言使用JS，自动生成小程序。

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6eTH14Oh-1660724741287)(C:\Users\yuan\AppData\Roaming\Typora\typora-user-images\image-20220817101846685.png)]

试用预览按钮，则可以看到在真机上小程序的运行效果。（机型可以自己选择，个人偏好使用iPhone6进行预览更能贴近真实情况）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GWxK4kKj-1660724741290)(C:\Users\yuan\AppData\Roaming\Typora\typora-user-images\image-20220817102111329.png)]

2.手动创建小程序

我们跳过项目的创建。

2.1页面配置

创建完成项目后，进行项目的页面配置。

其中可以看到在根目录下生成文件夹pages用于存放这些页面文件，page的路径也在app.json文件里保存。

其中首页命名默认为index，这个是我们需要保留的。

进入app.json，删除pages下的logs，同时注意维持json格式，需要去掉上一行末尾的括号。保存即可。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I9A68QSN-1660724741292)(C:\Users\yuan\AppData\Roaming\Typora\typora-user-images\image-20220817102739363.png)]

根据实验文档，删除utils，pages文件夹logs目录下，index.html和index.js，app.wxss,app.js的全部代码。

这样模板代码就修改好了，日后开发可以直接在app.json文件的pages目录下直接添加路径即可生成对应的页面文件。

2.2视图设计

导航栏设计，在app.json的windows标签下，可以看到navigationBarBackgroundColor和navigationBarTitleText。

这两个分别对应了导航栏的背景颜色和导航栏的标题文本。

页面设计上，根据实验要求，我们需要在页面上包含：微信头像，微信昵称和“点击获取头像”的按钮。

查看官方文档，我们可以使用以下组件（compoment）来完成：

我们这里以头像为例。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MFly0S4s-1660724741295)(C:\Users\yuan\AppData\Roaming\Typora\typora-user-images\image-20220817104344492.png)]

可以找到在媒体组件中有image组件，可以用来存放图片。使用方法为：

`

其中src是图片的路径，mode是图片的打开模式，这里的widFix是宽度自适应。

同理，对于微信昵称和按钮，我们也可以在文档中找到text组件和button组件。使用方法类似，文档也有阐述，故不多赘述。

更改wxml代码，编辑我们想要的界面。为了美观，我们需要给他设置样式。类似于css，我们通过更改wxss的代码来控制样式。

![image-20220817105815094](C:\Users\yuan\AppData\Roaming\Typora\typora-user-images\image-20220817105815094.png)

![image-20220817105829423](C:\Users\yuan\AppData\Roaming\Typora\typora-user-images\image-20220817105829423.png)

完成结果如下（这里省略了图片）：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-njAMMwkb-1660724741297)(C:\Users\yuan\AppData\Roaming\Typora\typora-user-images\image-20220817111336831.png)]

2.3逻辑设计

为了给这个小程序添加一定交互功能，我们需要修改button组件，为其追加获取用户信息的事件。根据实验文档，我们增添获取自己个人信息的功能，利用微信自带的函数getUserInfo,

修改index.js文件如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KNzOgt3m-1660724741297)(C:\Users\yuan\AppData\Roaming\Typora\typora-user-images\image-20220817124852981.png)]

wxml如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PAcYiHOr-1660724741298)(C:\Users\yuan\AppData\Roaming\Typora\typora-user-images\image-20220817124944459.png)]

编译后点击按钮，成功获取个人信息。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HSCHrWVU-1660724741298)(C:\Users\yuan\AppData\Roaming\Typora\typora-user-images\image-20220817125131869.png)]

接下来就是获取用户头像和昵称了。

修改image和text标签如下：

`

` {{username}}

更新data属性，添加img_src和username成员，并利用setData来更新他们的值。

运行结果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oIVSz1kZ-1660724741299)(C:\Users\yuan\AppData\Roaming\Typora\typora-user-images\image-20220817133439629.png)]

三、程序运行结果

本次实验程序最终运行结果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kEqmwCIZ-1660724741299)(C:\Users\yuan\AppData\Roaming\Typora\typora-user-images\image-20220817133453012.png)]

四、问题总结与体会

遇到的问题

在调用系统的API，即getUserInfo函数时，遇到了无法获取到detail的问题，最后通过信息授权解决。

心得体会

本次实验让我初步了解的微信小程序，让我了解了其文件的构成，以及是如何运行和调试的。

并且微信自带的wxss和wxml和web中的css和html相互对应，学习起来也较为省力。

整体来说是我初探微信小程序的一次尝试，为后面的小程序开发打下了坚实的基础。

心得体会

本次实验让我初步了解的微信小程序，让我了解了其文件的构成，以及是如何运行和调试的。

并且微信自带的wxss和wxml和web中的css和html相互对应，学习起来也较为省力。

整体来说是我初探微信小程序的一次尝试，为后面的小程序开发打下了坚实的基础。