第一个微信小程序

# 2022年夏季《移动软件开发》实验报告

 

| 姓名和学号？         | XXXX，200023230                  |

| -------------------- | -------------------------------- |

| 本实验属于哪门课程？ | 中国海洋大学22夏《移动软件开发》 |

| 实验名称？           | 实验1：第一个微信小程序          |

| 博客地址？           | XXXXXXX                          |

| Github仓库地址？     | XXXXXXX                          |

（备注：将实验报告发布在博客、代码公开至 github 是 **加分项**，不是必须做的）

## **一、实验目标**

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

## 二、实验步骤

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

方法1：只需提供APPID即可，选择模板，会提供相应函数

方法2：

代码解析：定义了一个叫pages的页面。然后使用导航栏颜色和文本的标签，定义颜色和标题

代码解析：view标签的class属性，可以对class中所对应的全局或者当前页面进行样式定义

比如，这里设置了一个mode符合页面的图片区域，设置了一个文本行，以及一个按钮

并且我们会在index.Js文件中对其进行定义其中的内容；然后就按钮赋予了功能，调用能获取用户信息，然后要注意的就是加了双花括号后就变成动态的数据，

代码解析：这个时候我们，就通过获取用户数据的函数返回的数据赋值给图片和文本栏，而我们的button区域并没有动态化，所以不变

## 三、程序运行结果

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

## 四、问题总结与体会

问题1：如在手动创建小程序中，page，app补写提供的函数和模板提供的函数不太一样

问题2：在使用老师提供的项目，编译会出现Component “pages/index/index“ does not have a method “onGetOpenid(p)“ to handle event “tap“，

解决办法，先登录自己的账号，将获取用户信息的函数改成getMYinfo，可能是函数不支持。

建议：其实我还是不太理解为什么这么做，之前只学过一点点前端开发，会一些标签的使用，却不懂为什么这样做，只是按照文档给的代码敲上去而已。

遇到困难，由于不能分析是什么问题，也找不到解决办法

// index.js

// 获取应用实例

const app = getApp()

Page({

  data: {

    src : '../../images/logo.png',

    name : 'Hello world'

  },

  onLoad() {

    if (wx.getUserProfile) {

      this.setData({

        canIUseGetUserProfile: true

      })

    }

  },

  // 获取用户信息

  getMyInfo(e) {

    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，

    // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗

    wx.getUserProfile({

      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写

      success: (res) => {

        console.log(res)

        this.setData({

          src: res.userInfo.avatarUrl,

          name: res.userInfo.nickName

        })

      }

    })

  },

})

<!--index.wxml-->

<view class="container">

  <image src='{{src}}' mode='widthFix'></image>

  <text>{{name}}</text>

  <button open-type="getUserInfo" bindtap="getMyInfo">

        点击获取头像和昵称

  </button>

</view>

// app.js

App({

  onLaunch() {

    // 展示本地存储能力

    const logs = wx.getStorageSync('logs') || []

    logs.unshift(Date.now())

    wx.setStorageSync('logs', logs)

    // 登录

    wx.login({

      success: res => {

        // 发送 res.code 到后台换取 openId, sessionKey, unionId

      }

    })

  },

  globalData: {

    userInfo: null

  }

})

{

  "pages":[

    "pages/index/index"

  ],

  "window":{

    "backgroundTextStyle":"light",

    "navigationBarBackgroundColor": "#663399",

    "navigationBarTitleText": "第一个微信小程序",

    "navigationBarTextStyle":"white"

  },

  "style": "v2",

  "sitemapLocation": "sitemap.json"

}