微信小程序的创建-CSDN博客

本文链接：https://blog.csdn.net/lysall/article/details/141335012

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

姓名：刘演森学号：22020007064

姓名和学号	刘演森，22020007064
实验课程	中国海洋大学22夏《移动软件开发》
实验名称	实验1：第一个微信小程序
博客地址	XXXXXXX
Github仓库地址	XXXXXXX

一、实验目标

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

二、实验步骤

快速启动启动模板创建小程序

下载好微信开发者工具并打开创建小程序，appID使用测试号，最后确定创建即可得到一个模板小程序。

**不使用模板创建小程序 **

我们重复第一个步骤，我们依然会得到一个模板小程序。我们将通过修改页面配置得到我们自己的小程序。

修改步骤：

1、删除utils文件夹及其所有内容

2、删除log目录及其所有内容

3、删除index.wxml、index.wxss、index.js、app.wxss、app.js文件所有的代码

4、在index.js、app.js文件中分别输入page、app补全函数

试图设计
1、在app.jaon更换我们导航栏颜色和标题
"window": {
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "第一个小程序",
    "navigationBarBackgroundColor": "#0000ff"
  },
2、页面内容：微信头像、昵称还有获取头像昵称按钮

使用三个组件

在index.wxml文件中实现以下代码
<view class='container'>
 <image src='{{src}}' mode="widthFix"></image>
 <text>{{name}}</text>
 <button open-type="getUserInfo" bindgetuserinfo="getMyInfo">点击获取头像昵称</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;
}
在app.js完成逻辑实现
Page({
  data:{
    src:'/images/OIP-C.jpg',
    name:'hello world'
  },
  getMyInfo:function(e){
    let info = e.detail.userInfo;
    this.setData({
      src: info.avatarUrl,
      name:info.nickName
    })
  }
})