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

最新推荐文章于 2023-08-22 11:05:17 发布

ouclailailai

最新推荐文章于 2023-08-22 11:05:17 发布

阅读量324

点赞数

文章标签：微信小程序小程序前端

本文链接：https://blog.csdn.net/woxizhendimi/article/details/126384165

版权

一、实验目标

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

二、实验步骤

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

如图，填写项目名称、目录和AppID后自动生成一个基础模板：

利用这个基础模板可以进行小程序的设计

2、学习不使用模板手动创建小程序的方法

2.1 项目创建

如图，我使用的AppID是之前就申请好的，在这里继续使用。

2.2 页面配置

2.2.1 创建页面文件

项目创建完毕后，在根目录中会生成文件夹pages用于存放页面文件。

具体操作如下：

（1）将 app.json 文件内 pages 属性中的“pages/logs/logs”删除，并删除上一行末尾的逗号。

（2）按快捷键 Ctrl + S 保存当前修改。

2.2.2 删除和修改文件

具体操作如下：

（1）删除 utils 文件夹及其内部所有内容。

（2）删除 pages 文件夹下的 logs 目录及其内部所有内容。

（3）删除 index.wxml 和 index.wxss 中的全部代码。

（4）删除 index.js 中的全部代码，并且输入关键词“page”进行自动补全。

（5）删除 app.wxss 中的全部代码。

（6）删除 app.js 中的全部代码，并且输入关键词“app”进行自动补全。

2.3 视图设计

2.3.1 导航栏设计

修改 app.json 文件中代码如下，实现个性化窗口设计：

上述代码可以更改导航栏背景色位紫色，字体为白色，效果如下：

2.3.2 页面设计

页面上主要包含3个内容，即微信头像、微信昵称和“点击获取头像和昵称”按钮。

计划使用如下组件。

微信头像： <image> 组件；
微信昵称： <text> 组件；
按钮： <button> 组件；

相关 WXML（pages/index/index.wxml）代码片段如下：

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

相关 WXSS（pages/index/index.wxss）代码片段如下：

.container {
  height: 100vh;                    /*高100视窗*/
  display: flex;                    /*flex布局模式*/
  flex-direction: column;           /*垂直布局*/
  align-items: center;              /*水平方向居中*/
  justify-content: space-around;    /*垂直方向分散布局*/
}

.container image {
  width: 300rpx;                    /*图片宽度*/
  border-radius: 50%;               /*添加圆角边框*/
}

.container text {
  font-size: 50rpx;                 /*字体大小*/
}

当前效果如下：

此时页面布局与样式设计就已经完成

2.4 逻辑实现

相关 JS（pages/index/index.js）代码片段如下：

Page({
  data: {
    src: '/static/images/LOGO.jpg',             // 默认图片来源
    name: 'Hello World'                         // 默认昵称
  },
  getMyInfo: function (e) {
    wx.getUserProfile({
      desc: '用于获取用户头像和昵称',
      success: (res) => {
        this.setData({
          src: res.userInfo.avatarUrl,          // 更新图片来源
          name: res.userInfo.nickName           // 更新昵称
        })
      }
    })
  }
})

三、程序运行结果

保存后重新编译，最终效果如下：

四、问题总结与体会

1、问题总结：使用样例提供的“getUserInfo”获取用户信息失败，用户昵称为“微信用户”，用户头像为灰色。

解决方法：查看微信官方文档后发现，用户头像昵称获取规则已调整，后续获取用户信息将通过getUserProfile接口，页面产生点击事件（例如 button 上 bindtap 的回调中）后才可调用，每次请求都会弹出授权窗口，用户同意后返回 UserInfo。使用如下图：

wxml文件中使用如下图：

js文件中使用如下：

getMyInfo: function (e) {
    wx.getUserProfile({
      desc: '用于获取用户头像和昵称',
      success: (res) => {
        this.setData({
          src: res.userInfo.avatarUrl,
          name: res.userInfo.nickName
        })
      }
    })
  }