微信小程序开发实验1

一、实验目标

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

二、实验步骤

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

1.自动生成小程序

1.1 项目的创建

 

 

1.2小程序点击效果演示

 

如图左边是小程序登录界面，自动获取用户的昵称和头像。点击用户图像跳转进入来了主界面如右图所示

1.3 真机预览

 

 

2.手动创建小程序

2.1项目创建和页面配置

创建一个无模板的小程序项目，如下图所示。删除app.js、app.wxss、index.html、index.js、index.wxss的内容，用自动补全功能重新生成app.js和index.js的内容。

 

 

2.2视图设计

1、导航栏设计

在app.json中写入如下语句，设置导航栏的颜色和标题。

 

 

2、页面代码设计

在index.html页面写入如下语句。

注意这里用到了四个标签view、image、text、button

view标签上装载了另外的三个标签，同时view标签设置了样式为container

image标签加载了一张图片，图片的地址由src给出，图片的样式为widthFix

text标签加载用户名

button标签关联了一个函数getmyinfo，通过点击触发函数

 

 

在项目文件夹下创建一个image文件夹，存放要用到的图片

 

 

在index.wxss中加入如下的样式

 

 

上述工作完成后预览效果如下

 

 

2.3逻辑的实现

1、动态加载用户信息

对index.html做如下的修改 

 

 

在index.js中加入如下代码

 

 

如此，在index.html中初始的信息全部储存在index.js的data中。只要修改相应的变量就可以动态的修改页面中相应的值。

2、获取用户的信息并更新

通过函数getUserProfile获取用户信息，在button关联的getmyinfo函数中加入如下语句

 

 

注意，这里修改用户信息的时候并没有用“=”直接赋值，而是通过函数setdata对变量赋值。用等于号直接修改，页面中的数据不会动态更新。

三、程序运行结果

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

1、登录前

 

 

2、获取成功

 

 

 

四、问题总结与体会

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

1、getuserinfo函数功能变化，获取的信息不是用户信息

解决： 改用getuserfile函数来获取用户信息