一、实验目标

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

二、实验步骤

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

1.首先创建一个基本的导航栏

①我用的是淡紫色背景色，RGB配比是a0:a0:e0

②标题：”手动创建第一个小程序 “的颜色为black也就是黑色

代码为：

效果图为：

2.编写wxml和wxss

①wxml部分

补充view，text和button三个组件

也就是开始页面所显示的三个信息，由于一开始并未获得用户信息，所显示的图片是用得本地的图片logo.png先为替代

代码如下： 

②wxss部分

主要是设计下，各个部分在手机页面的布局情况，我设置的高度为100视窗，用flex布局模式，采取垂直分布，各个组件呈居中效果，头像所显示的图片占用300个宽度单位，采取圆形形状显示

代码如下：

③二者共同作用下的效果图

3.在js中补充自定义函数getMyInfo函数用来获取用户信息，并及时更新显示的昵称图片，data部分为设置scr和name的初始值，同时要有一个上传函数，使得用户数据得以上传以打到更新src和name的值

代码如下：

三、程序运行结果

列出程序的最终运行结果及截图。

初始为：

运行后（点击获取头像和昵称）：

可以看到昵称和头像都发生了变化，从Hello World和默认图片变成了我自己微信的昵称和头像，读取成功

四、问题总结与体会

描述实验过程中所遇到的问题，以及是如何解决的。有哪些收获和体会，对于课程的安排有哪些建议。

文章知识点与官方知识档案匹配，可进一步学习相关知识小程序技能树首页概览3895 人正在系统学习中