《移动软件开发》实验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:第一次写博客,难免有些不足,还需努力!

微信小程序入门:学习demo以及自己的第一个小程序相关推荐

【python教程入门学习】Python实现自动玩贪吃蛇程序
这篇文章主要介绍了通过Python实现的简易的自动玩贪吃蛇游戏的小程序,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学一学实现效果先看看效果这比我手动的快多了,而且是单机的,自动玩没惹 ...
小马同学学习python实操的第一天
学习python实操的第一天第一个实操案例任务1:向文件输出"一段属于你自己的话" ##方法一 fp= open('d:/test.txt','w') ##open('文件存储 ...
我的第一个安卓应用程序_我如何设计我的第一个应用程序
我的第一个安卓应用程序 by Daniel Novykov 丹尼尔·诺维科夫(Daniel Novykov) 我如何设计我的第一个应用程序 (How I Designed My First App) ...
我的微信小程序入门学习-地图定位
微信小程序开发者工具安装和创建小程序 (地图定位代码) 地图定位案例:最后附带小程序地图定位代码小程序简介小程序特点体验好(编译包不超过1M) "无须安装,即用即走"的特性让 ...
微信小程序入门学习笔记
初体验 app生命周期函数 onLaunch() //一般用来获取用户信息 onShow() //用来判断小程序进入场景里面可以传入参数options,通过options.scene来判断用户场景, ...
小程序入门学习17--springboot环境配置01
别问,问就是电脑重装了啥都没了 [NEXT公开课]微信小程序+SpringBoot 开发新闻资讯应用 1 环境配置 mysql下载与安装 Install/Remove of the Service ...
小程序入门学习18--springboot环境配置02
springboot官方中文文档 1 pom.xml配置,第一次配置完成需要下载许多文件 <project xmlns="http://maven.apache.org/POM/4.0 ...
小程序入门学习16--上传小程序至github
1 配置hosts,使电脑可以访问github 修改hosts(进入hosts方法) 2 注册进入github,点右上角sign up,填写注册信息 3 创建仓库点击New,新建仓库复制HTTP ...
小程序入门学习14--用户管理
<button class="call" open-type="getUserInfo" bindgetuserinfo="onInfo&quo ...

微信小程序入门:学习demo以及自己的第一个小程序