OUC移动软件开发 实验一

一、实验目标

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

二、实验步骤

（一）.注册开发者身份

通过mp.weixin.qq.com网址在微信官网注册开发者身份：

输入邮箱后通过邮箱验证进去身份信息验证界面：

选择中国大陆并选择个人，然后进行信息登记和微信绑定，完成注册后进行信息完善即可。

（二）.创建空项目

打开小程序开发工具，选择小程序选项并创建一个空项目（实验时一因为微信使命认证问题使用的是游客身份进入的，所以appID没有进行填写）：

课后解决实名认证问题后，加入appID：

创建完成后的空项目：

（三）.导航栏设计

在app.json文件中对导航栏效果进行调整，文件代码如下：

设置完后导航栏的颜色改为紫色，效果展示如下：

（四）.页面设计

页面上包括三个内容：头像，名称和按钮，这三者用列的方式进行排列。

使用到的组件如下：

微信头像：<image>组件

微信昵称：<text>组件

按钮：<button>组件

之后需要编写.wxml和.wxss文件，对应的代码片段如下：

.wxml文件：

.wxss文件：

此时因为image还没有指定图片的信息，因此图片暂不显示，效果如下：

在image加入src属性并写入图片相应的url，在.wxss文件中对图片的样式和字体进行调整：

此步骤完成后效果如图：

（五）.动态获取用户信息

1.为按钮添加获取信息的事件

使用getUserInfo来获取用户信息并使用bindgetuserinfo将获得的数据传递给自定义的函数getMyInfo（该函数在JS页面中编写）

在getMyInfo中添加以下代码来检测是否获取成功：

控制台中输出数据（此处为游客状态下输出的信息）：

2.动态更新头像和名称

首先使用双花括号将图片和文本做成动态数据：

然后在JS文件中修改data属性，从而使主页保留原先的内容：

此时展示的效果仍然与原来相一致。

最后编写getMyInfo函数，以获取动态的头像以及名称，具体代码如下：

三、程序运行结果

编译之后的展示：

点击按钮后的效果（游客身份）：

当输入appID号时，点击后出现的页面如下：

点击允许，就能成功看到结果：

四、问题总结与体会

问题总结

作为第一次实验课，一上来就碰见了一个让人感觉很头疼的问题：微信验证通过不了。

选择中国大陆并选择个人，然后进行信息登记和微信绑定，在这跟最开始微信绑定时我出现了以下问题：

扫码之后手机上显示的信息是这样的：

之后尝试了好多次，又从qq邮箱换成网易邮箱，都没有解决问题，最后还是用游客身份在课上练习的，由于游客身份的限制一些功能是无法使用的，直到课下才对该问题进行解决，解决的办法其实也很简单：首先将原来的银行卡解除绑定，之后再重新绑定一次，再进行验证就可以验证成功了。

心得体会

此次小程序开发实验让我对小程序开发有了初步的了解和实践。然而，在一开始的微信验证中出现了问题，这导致我在课上没能完整地完成实验的要求，直到课后解决验证的问题才完整地完成了实验，这个过程是让人好奇的，怎样建立一个小程序，怎样实现页面的布局，怎样实现数据的传递。通过这次实验，我对小程序开发的兴趣得到进一步激发，期待在今后的学习中能够实现更多有趣的功能，也更期待完成个人的综合项目。