移动软件开发实验1实验报告

一、实验目标

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

二、实验步骤

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

1.进入微信开发者工具，选项如下，然后创建小程序

 2.目录如下，其中images是需要我们自己创建的，用来保存用户的初始头像

 

3.关键代码

（1）app.json

 "pages": [
​
  "pages/index/index"
​
 ],
​
 "window": {
​
  "backgroundTextStyle": "light",
​
  "navigationBarBackgroundColor": "#665533",
​
  "navigationBarTitleText": "微信",
​
  "navigationBarTextStyle": "black"
​
 }

将index设为主页，然后调整背景颜色，导航栏颜色和文本，可自行选择。

（2）index.wxml

<view class='container'>
<text>{{name}}</text>
<button open-type='chooseAvatar'bind:chooseavatar='onChooseAvatar'>
<image src='{{src}}' mode='widthFix'></image>
</button>
​
<input type="nickname" placeholder="点击获取昵称"/>
​
</view>

因为wx.getUserInfo与<button open-type="getUserInfo"/>无法使用，这里获取用户头像和昵称分为两个部分。

使用open-type=“chooseAvatar”获取用户头像。

再使用input直接来获取用户昵称。

具体实现在index.js里实现

Page({
  /**
   * 页面的初始数据
   */
  data: {
    src:'/images/logo.png',
    name:"点击图片获取用户头像"
  },
  
  onChooseAvatar(e){
  var that=this
  console.log(e.detail);
  that.setData({
    src:e.detail.avatarUrl,
  })
  },

初始状态：

  

初始头像是由wxml里的src作为变量，然后在js里面赋初始值。

4.使用模版来创建小程序，如图，选择合适的模版

 

 

创建好以后得到的初始页面：

  

 

可以看到，它是直接为我们写了一些代码的，而且直接登录获取了用户信息

然后我们根据提示，在index.js里面修改部分代码，将canIUseOpenData改为false，再次运行就不会直接登录。然后我们在点击按钮，就可以成功登录得到用户头像和昵称了。

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    canIUseGetUserProfile: false,
    canIUseOpenData: false
    //wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
  },

三、程序运行结果

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

1.手动创建小程序，

在初始状态下，点击图片：

 

 

再点击下方获取昵称：

 

 

最后得到用户的头像和昵称。

 

 

2.用模版创建小程序：

这样就有了未登录时的初始页面：

 

 

点击获取头像昵称：

 

 

就可以登录，得到用户头像和昵称

 

 

四、问题总结与体会

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

遇到的最主要的问题，就是wx.getUserInfo过期无法使用，在寻找新的可以获取头像的方法中发现了open-type=“chooseAvatar”和input方法，成功获取用户信息。但是它也有缺点，对于如何排版的问题，始终没有找到合适的方法，导致排版看起来并不是非常美观，而且它是分别获取的，也说明了其实会有更好的方法存在，使得获取用户信息更快更简洁。

并且通过手动创建和模版创建小程序可以看到，模版创建会快的多，代码也很完善，我们只要根据提示修改，就可以得到我们想要的效果了。

本次实验让我了解学习了如何去创建小程序，以及如何获取微信用户的信息，对于写小程序中的不同文件的用处和如何却写代码也学习了很多。