《移动软件开发》课程：实验一：第一个微信小程序

一、实验目标

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

二、实验步骤

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

1. 创建空白项目

1. 导航栏设计

更改app.json中的window属性，达成自定义导航栏的目的。

 "window": {
​
  "navigationBarTextStyle": "white",
​
  "navigationBarTitleText": "手动创建第一个小程序",
​
  "navigationBarBackgroundColor": "#663399"
​
 },

1. 页面设计

• 微信头像<image>

• 微信昵称<text>

• 按钮<button>

<view class = 'container'>
  <image src='{{src}}' mode='widthFix'></image>
  <text>{{name}}</text>
  <button open-type="getUserInfo" bindgetuserinfo="getProfile">点击获取头像和昵称</button>
</view>

对应index.wxss文件的代码：

.container{
​
 height: 100vh;
​
 display: flex;
​
 flex-direction: column;
​
 align-items: center;
​
 justify-content: space-around;
​
}
​
image{
​
 width: 300rpx;
​
 border-radius: 50%;
​
}
​
text{
​
 font-size: 50rpx;
​
}

1. 设置本地图片，作为默认

• 创建images文件夹

• 将本地的默认图片logo.jpg放入文件夹内

• 编写index.js文件，实现逻辑

Page({
​
 data:{
​
  src: '/images/logo.jpg',
​
  name: 'Hello World'
​
 }
​
})

1. *获取微信用户信息**

• 按钮绑定js中的事件函数

<button open-type="getUserInfo" bindgetuserinfo="getProfile">点击获取头像和昵称</button>

• 编写获取微信信息的函数逻辑

 getProfile: function(e)
​
 {
​
  console.log(e.detail.userInfo)
​
  let info = e.detail.userInfo
​
  this.setData({
​
   src: info.avatarUrl,
​
   name: info.nickName
​
  })
​
 }

• 调试该函数

三、程序运行结果

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

1. 打开小程序后

1. 点击按钮

四、问题总结与体会

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

问题：在新版本中，getUserInfo和getUserProfile在小程序中停止使用，无法获取微信用户信息。

解决方案：进入开发者工具，打开详细->本地设置->调试基础库，将调试基础库设为2.27.0版本以下。

全部代码如下：

index.wxml

<view class = 'container'>
  <image src='{{src}}' mode='widthFix'></image>
  <text>{{name}}</text>
  <button open-type="getUserInfo" bindgetuserinfo="getProfile">点击获取头像和昵称</button>
</view>

index.js

Page({
  data:{
    src: '/images/logo.jpg',
    name: 'Hello World'
  },
  getProfile: function(e)
  {
    console.log(e.detail.userInfo)
    let info = e.detail.userInfo
    this.setData({
      src: info.avatarUrl,
      name: info.nickName
    })
  }
})

.container{
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
image{
  width: 300rpx;
  border-radius: 50%;
}
text{
  font-size: 50rpx;
}