实验1：第一个微信小程序

一、实验目标

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

二、实验步骤

1.创建项目

        注册微信小程序后，进入开发管理页面，复制AppID(小程序ID)用于创建小程序。

        下载微信开发者工具，登录后创建小程序，选择不使用云服务，模板选择JS基础。

2.视图设计

（1）导航栏设计

        app.json代码片段:

{

"pages": [

"pages/index/index"

],

"window": {

"navigationBarBackgroundColor": "#663399",



"navigationBarTitleText": "手动创建",



"backgroundTextStyle": "light"



},

"sitemapLocation": "sitemap.json"

}

（2）页面设计

        使用组件如下：1.微信头像： <image>图像组件；2.微信昵称： <text>文本组件；3.按钮： <button>按钮组件。

        index.wxml代码片段:

<view class='container'>

<image src='{{src}}' class='abc'></image>

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

点击获取头像和昵称

<!-- bindtap='getMyInfo' 表示点击按钮时调用自定义函数getMyInfo -->

</view>

        index.wxss代码片段，设计布局、图像形状、字体大小:

/* 样式设计 */

.container{

height: 100vh; /高100视窗，这里写100%无效的/

display: flex; /flex布局方法/

flex-direction: column;/垂直布局/

align-items: center;/水平方向居中/

justify-content: space-around;/垂直方向分散布局/

}

.abc{

width: 500rpx;/图片宽度/

border-radius: 50%;/4个角变为圆角形状/

}

text{

font-size: 50rpx;/字体大小/

}

        index.js代码片段:

/**

* 页面的初始数据

*/

data: {

name:'Hello World',

src:'/images/weixin.jpg'

},

3.获取用户昵称和头像

        index.js代码片段：

getUserProfile(e) {

wx.getUserProfile({

desc: '展示用户信息',

success: (res) => {//将获取到的信息给予变量res

console.log(res)

let info = res.userInfo;//定义变量info等于变量res的userInfo

this.setData({

name: info.nickName,//更改变量name为变量info的nickName,即用户授权的昵称

src:info.avatarUrl,//更改变量info为变量info的avatarUrl，即用户授权的头像

hasUserInfo: true

})

}

})

},

三、程序运行结果

四、问题总结与体会

        在这次实验中，我学习了微信小程序的开发。实验过程中，我遇到了以下问题：

1. 获取用户信息失败：在初次使用getUserInfo接口获取用户昵称和头像时，尽管编写了相关代码，但获取的信息是匿名的，改为使用getUserProfile接口并且调试时也无法获取到用户的实际信息。

   

   解决方法：经过多次调试，我发现问题的根源在于所使用的微信基础库版本。最初使用的版本为3.5.4，调整为2.14.0后，getUserProfile接口成功获取到了用户的实际昵称和头像信息。

2. 视图设计中的布局问题：在使用flex布局时，页面的某些元素无法达到预期的居中效果。

   解决方法：通过不断调试和调整flex的属性，如align-items和justify-content，最终实现了页面元素在水平方向和垂直方向的居中布局。

3. 调试工具的使用：在使用微信开发者工具进行调试时，部分功能未能正常工作，尤其是console.log打印的调试信息不完整。

   解决方法：通过查看文档和官方论坛，我逐渐熟悉了开发者工具的使用，并学会通过切换不同版本的基础库来解决部分兼容性问题。同时，我也发现清理缓存和重启工具有助于解决部分调试中的问题。

        通过本次实验，我掌握了如何使用微信开发者工具手动创建小程序，并对小程序的视图设计、布局方法有了更深的理解。此外，我还学会了如何通过调试工具排查问题，并根据不同的调试结果来调整代码。

        我认识到，不同版本的基础库可能会影响接口的使用，及时更新和调整版本是解决问题的关键。在开发过程中，确保正确配置权限并请求用户授权是获取用户信息的前提。通过调试信息和错误日志，可以快速定位和解决问题，提高开发效率。课程的安排对于初学者来说非常有帮助，尤其是在逐步引导我理解和应用各个功能时，提供了很大的支持。