report_template

一、实验目标

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

二、实验步骤

1.第一个微信小程序

1.1自动生成小程序

1.1.1创建小程序项目

​ 选择小程序，输入项目名称、目录、appID（需要注册，如果没有点旁边的注册或者直接使用注册号即可）等，即可创建好小程序项目。

​ 这里，appID可以在注册之后在个人的界面中的开发设置中找到。

1.1.2测试小程序

​ 在创建成功后，进入开发界面，在这里会有一个自动生成好的小程序供学习参考，在左侧有一个模拟移动端设备的模块，可以模拟在移动端设备上的显示情况。这样就完成了自动生成的一个小程序。

​ 同时还可以在手机端进行调试预览，点击真机调试生成二维码，可以在手机端测试。

手机上看到的界面。

1.2 手动创建小程序

1.2.1 项目创建

​ 同创建自动小程序一样，将小程序项目创建在空白文件夹中，这时同样会生成代码模板。

1.2.2 页面配置

1创建页面文件

​ 目录中会生成文件夹pages存放页面文件，首页默认为index，表示小程序运行的第一个页面，再手动创建时只保留index即可。

​ 将app.json文件内pages属性中的“pages/logs/logs”删除然后保存

2 删除和修改文件

​ 1.删除utils文件夹中的所有内容。

​ 2.删除pages文件夹下的logs目录及其所有内容。

​ 3.删除index.wxml和index.wxss中的所有代码。

​ 4.删除index.js中的所有代码，并且输入关键词“page”并且选择自动补全函数。

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

​ 6.删除app.js中的全部代码，并且输入关键词“app”并补全函数。

1.2.3 视图设计

1 导航栏设计

​ 通过在app.json文件中对window属性进行重新配置，可以更改导航栏颜色，文字内容和格式以及文字的颜色，代码如下：
​

{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle":"dark",			   	/*调节字体*/
    "navigationBarBackgroundColor": "#556686", 	/*调节颜色*/
    "navigationBarTitleText": "我的第一个小程序",	/*调节导航栏文字内容*/
    "navigationBarTextStyle":"white"			/*调节文字颜色*/
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

调节到了一个很奇妙的颜色。

2 页面设计

​ 页面上需要显示的是三个按钮，微信头像、微信昵称和“点击获取头像和昵称”按钮。

​ 需要用到的组件：

• 微信头像：(图像组件)；
• 微信昵称： （文本组件);
• 按钮：(按钮组件)。

​ 需要在index.wxml和index.wxss文件中进行实现，前者实现了各个组件，后者进行页面布局的调整。

​ 实现代码：

/*index.wxml*/
<view class="container">
  <image></image>
  <text>Hello world！</text>
  <button>点击获取头像和昵称 </button>
</view>

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

image {
  width: 300rpx;
  border-radius: 50%;
}

text {
  font-size: 50rpx;
}

​ 这样就完成了页面布局与样式设计。

1.2.4 逻辑实现

1 获取用户的信息

​ 在index.wxml中修改组件的代码，追加获取用户信息时间。

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

这里open-type=“getUserInfo"表示激活获取微信用户信息功能，然后使用bindtap属性进行传参，将获得的数据传递给函数"getMyInfo”。

2 使用动态数据显示头像和昵称

​ 在index.wxml文件中修改和 组件的代码，将图片来源和文本内容使用双花括号做成动态数据：

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

​ 修改index.js文件，在data属性中追加两个动态数据的值，使其仍可以显示原先的内容：

data: {
    src:'/images/logo.png',
    name:'歪比巴卜'
},

3 更新头像和昵称

​ 修改getMyInfo函数的代码，是获取到的信息更新到动态数据上：

getMyInfo:function(e) {
    wx.getUserProfile({
      desc: '展示用户信息',
      success: (res) =>  {
        console.log(res)
        this.setData ({
          src: res.userInfo.avatarUrl,
          name:res.userInfo.nickName
        })
      }
    })

​ 由于版本的更新，getUserInfo不再显示用户的信息，改用getUserProfile，这样在js文件的onload事件中添加代码：

 onLoad() {
    if(wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },

到此就完成了需要达到的效果。

三、程序运行结果

点击之后：

四、问题总结与体会

1 问题

1.在开始自动创建小程序项目时，创建完成后总是不显示预设头像和文字，显示空白界面，但是后面点了一下就好了，没有找到是什么原因。

2.后面按照文档中的做法，总是获取不到头像和昵称，后面想起来在自动创建小程序中的某一个文件中好像看到过，找了一下找到了这一段：

不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息。

和这一段：

 <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>

的做法，总是获取不到头像和昵称，后面想起来在自动创建小程序中的某一个文件中好像看到过，找了一下找到了这一段：

不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息。

和这一段：

 <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>

可以看出这里获取昵称头像用到的是“getUserProfile”，所以结合文档成功获得取到了头像和昵称