《移动软件开发》实验1
一、实验目标
1、学习使用快速启动模板创建小程序的方法;2、学习不使用模板手动创建小程序的方法。
二、实验步骤
1.使用快速启动模板创建小程序
1.1为小程序命名、建立目录,AppID选择使用注册号,具体参考下图
1.2小程序的预览界面
预览界面,与教程示例存在不同,没有触发“获取头像昵称”的button,直接对用户的公开信息直接显示;
原因分析:在index.wxml中,判断是否有用户的公开信息,如果有则直接显示opendata,没有才将获取信息的button显示,执行绑定的函数。
可以看到代码中注释也对此处进行了提醒;
修改后,可以实现示例的button效果;
1.3 修改后,真机预览效果:
2、不使用模板手动创建小程序
2.1创建项目
与之前步骤相似创建项目,按实验步骤删除部分文件,保留index界面
删除”pages/logs/logs“路径
删除及修改后,当前显示的为index界面,index界面js文件中为空,wxml文件中的前端设计也删除了,所以小程序预览界面上是没有之前显示的元素的。
2.2对小程序进行设计
导航栏设计,在app.json中对导航栏进行修改,包括标题文本颜色、文本风格等
2.2.1页面设计
在index的wxml文件中设计基本的界面,包括图片、文本、按钮;
在前端设计时view使用了一个叫”container“的样式,在index的wxss中进行声明和参数设置,后续一些组件的样式也在此处设计;
2.2.2组件具体设计
包括image,text等组件;
image需要为src设置图片源,对于一些小程序中可能使用到的图标,我们可以在iconfont上进行下载,选择png格式即可,放入项目中一个新建文件夹icons:
对样式进行添加,效果如下:
2.2.3 逻辑设计
获取微信用户头像和昵称,
通过动态数据来显示头像和昵称,在index.js的page中data内,声明image_src和user_name两个变量,并在wxml中使用;
在Page中声明函数GetMyInfo,在其中调用getUserProfile,完成对变量的更新;
对wxml进行修改,为btn绑定函数GetMyInfo;
运行效果:
授权后进行更新:
三、程序运行结果
1.使用快速启动模板创建的小程序
2.不使用模板手动创建小程序的方法
四、问题总结与体会
1.根据模板创建的项目在预览时,没有使用按钮获取用户信息,便直接显示;根据index.wxml的代码进行分析,了解其原因是先尝试直接获取用户的opendata,若获取失败再进行后续分支的获取方式,故没有用到btn绑定的函数;
2.对js初始化Page中的生命周期函数的功能和何时使用不是很清楚。
PS:第一次写博客,难免有些不足,还需努力!