第一章总结

章节内容总结

在本章节中，我们首先对微信小程序这一概念进行了全面的了解。微信小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。我们了解了微信小程序的核心特征，包括其轻量级、无需安装、易于分享、跨平台兼容性以及与微信生态的无缝对接等。
接下来，章节介绍了微信小程序开发工具的使用。我们了解了开发工具的功能，包括代码编辑、调试、预览、性能分析等，以及如何利用这些工具来优化开发过程和提高开发效率。

微信小程序的界面主要包括以下几个部分：

1.​菜单栏：位于界面顶部，包含文件、编辑、视图、工具、帮助等菜单项，用于管理项目文件、编辑代码、调整视图设置等。

2. 工具栏：位于菜单栏下方，包含小程序的编译、预览、上传、模拟器、调试器等按钮，用于控制小程序的编译、运行和调试。

3. 模拟器：位于工具栏右侧，模拟小程序在手机端的显示效果，可以实时预览小程序的界面和交互。

4. 编辑器：位于界面中央，用于编写小程序的代码。编辑器支持代码高亮、自动补全、代码折叠等功能，方便开发者编写和维护代码。

5. 调试器：位于编辑器下方，用于调试小程序的代码。调试器提供了控制台、网络、性能、存储、日志等调试功能，帮助开发者定位和解决问题。

6. 项目面板：位于界面左侧，显示当前项目的文件结构，包括页面、组件、配置文件等。

7. 模拟器控制面板：位于模拟器下方，可以控制模拟器的显示效果，如屏幕旋转、模拟网络环境等。

8. 状态栏：位于界面底部，显示小程序的编译状态、错误信息、版本信息等。

第一个小程序项目示列代码

// index.js

const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'

Page({

  data: {

    motto: 'Hello World',

    userInfo: {

      avatarUrl: defaultAvatarUrl,

      nickName: '',

    },

    hasUserInfo: false,

    canIUseGetUserProfile: wx.canIUse('getUserProfile'),

    canIUseNicknameComp: wx.canIUse('input.type.nickname'),

  },

  bindViewTap() {

    wx.navigateTo({

      url: '../logs/logs'

    })

  },

  onChooseAvatar(e) {

    const { avatarUrl } = e.detail

    const { nickName } = this.data.userInfo

    this.setData({

      "userInfo.avatarUrl": avatarUrl,

      hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,

    })

  },

  onInputChange(e) {

    const nickName = e.detail.value

    const { avatarUrl } = this.data.userInfo

    this.setData({

      "userInfo.nickName": nickName,

      hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,

    })

  },

  getUserProfile(e) {

    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗

    wx.getUserProfile({

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

      success: (res) => {

        console.log(res)

        this.setData({

          userInfo: res.userInfo,

          hasUserInfo: true

        })

      }

    })

  },

})

小程序代码执行结果