移动软件开发实验1-2

一、实验目标

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

二、实验步骤

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

1.创建APPid:

 

2.使用官方给的模板，填写小程序的名称和所使用的APPid

 

3.创建好了之后进来的程序效果图：

 

4.真机预览：

 

二.手动创建一个小程序获取头像和昵称：

1.首先跟自动创建小程序一样，先输入它的appid和小程序的昵称，然后选择使用的模板，就可以进入小程序了，接下来把小程序删除utils文件夹和pages文件夹下面的logs目录及其所有的内容，然后再删除index页面下的wxml,wxss,js里面的全部代码，如图:

 

2.接下来先修改导航栏的颜色和字体，分别改为紫色和白色字体，window里面的第二个选项表示修改导航栏的背景颜色，第四个选项表示修改字体颜色。

 

3.在index.wxml中设计图像和文本的获取，并且设计一个按钮。然后在index.wxss中设计它们的位置居中，并给定合适的大小。

 

 

4.之后为了获取微信的logo图，我们需要在page这个页面下新建一个images文件里面放上微信的logo图片，然后在wxml里面的image组件给出图片的来源和显示该logo图片的正确比例。同时我们还需要在wxss里面给出image和text组件的相关样式，如下：

 

效果图如下：

 

5.使用动态数据显示头像和昵称，我们需要在index.js里面的data属性追加两个值，一个是src,表示图片的来源，另一个是name,表示昵称：

 

这时的效果图还没有发生变化，仍然是如下图：

 

6.更新头像和昵称，换成我们自己的微信头像和昵称：

在按钮里面使用bindtap='getMyInfo'来将获取到的信息进行更新：

 

然后在js代码段里面使用getMyInfo这个函数，依次更新获取到的头像和昵称，

 

最后的效果图如下：

 

三、程序运行结果

 

四、问题总结与体会

遇到的问题及解决方法：

1.刚开始动态获取头像和昵称的时候，点击获取头像和昵称的时候，没有显示头像和昵称，只有一个空白的头像和微信用户昵称。

解决办法：因为微信小程序版本的升级，wx.getUserInfo接口和<button open-type='getUserInfo'>无法获取用户的个人信息等，所以这里改成了wx.getUserProfile接口和getMyInfo.

 

2.心得体会：

微信小程序书写格式比较严格，刚开始书写的时候经常容易忘记分号和逗号。