微信小程序第一章总结

微信小程序简介：

微信小程序是一种无需下载和安装即可使用的应用程序，用户可以通过扫描二维码或搜索关键词来打开使用。这种应用程序的设计理念是“用完即走，无需安装”，旨在为用户提供轻量级的移动应用体验，同时节约手机存储空间。

小程序特征：

1无需安装：小程序内嵌于微信小程序之中，用户在使用过程中无须在应用商店下载安装外部应用。

2触手可及：用户通过扫描二维码等形式直接进入小程序，实现线下场景与线上应用的即使联通。

3用完即走：用户在线下场景中，当有相关需求时，可以直接接入小程序，使用服务功能后便可以对其不理会，实现用完即走。

4无需卸载：用户在访问小程序后可以直接关闭小程序，无须卸载。

小程序特点：简单的业务逻辑，低频的使用场景

开发工具界面功能介绍

1.工具栏：在工具栏中可以实现多种功能，列入账号的切换，模拟区，编辑区，调试区的显示/隐藏，小程序的编译，预览，切换后台，清理缓存等。

2.模拟区：在模拟区中选择模拟手机类型，显示比例，网络类型后，模拟器中会显示小程序的运行效果。

3.目录文件区：目录文件区用来显示当前项目的目录结构，单击左上角的“+“按钮可以进行目录和文件的创建，右键单击目录文件区中的文件或目录可以进行”硬盘打开“'重命名”“删除”等相关操作。

4.编辑区：编辑区用来实现对代码的编辑操作，编辑区中支持对.wxml,.wxss,.js及.json文件的操作，使用组合键能提高代码的编辑效率。

5.调试区：调试区的功能是帮助开发者进行代码调试及排查有问题的区域。

<!--index.wxml-->
<scroll-view class="scrollarea" scroll-y type="list">
  <view class="container">
    <view class="userinfo">
      <block wx:if="{{canIUseNicknameComp && !hasUserInfo}}">
        <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
          <image class="avatar" src="{{userInfo.avatarUrl}}"></image>
        </button>
        <view class="nickname-wrapper">
          <text class="nickname-label">昵称</text>
          <input type="nickname" class="nickname-input" placeholder="请输入昵称" bind:change="onInputChange" />
        </view>
      </block>
      <block wx:elif="{{!hasUserInfo}}">
        <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
        <view wx:else> 请使用2.10.4及以上版本基础库 </view>
      </block>
      <block wx:else>
        <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
        <text class="userinfo-nickname">{{userInfo.nickName}}</text>
      </block>
    </view>
    <view class="usermotto">
      <text class="user-motto">{{motto}}</text>
    </view>
  </view>
</scroll-view>