微信小程序概述第一章总结-CSDN博客

本文链接：https://blog.csdn.net/Jay_ZL01/article/details/136351625

认识微信小程序简介

小程序简介： 小程序由2011年1月推出 2017年1月上线。

小程序的特点：无需安装、触手可及、用完即走、无需卸载。

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

微信小程序开发流程

第一步：在微信公众号平台上注册小程序账号

第二步：下载开发者工具进行编码

第三步：通过开发者工具提交代码，通过审核后便可发布

我的第一个微信小程序项目

{
  "usingComponents": {
    "navigation-bar": "/components/navigation-bar/navigation-bar"
  }
}

/**index.less**/
page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.scrollarea {
  flex: 1;
  overflow-y: hidden;
}

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #aaa;
  width: 80%;
}

.userinfo-avatar {
  overflow: hidden;
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.usermotto {
  margin-top: 200px;
}
.avatar-wrapper {
  padding: 0;
  width: 56px !important;
  border-radius: 8px;
  margin-top: 40px;
  margin-bottom: 40px;
}

.avatar {
  display: block;
  width: 56px;
  height: 56px;
}

.nickname-wrapper {
  display: flex;
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
  border-top: .5px solid rgba(0, 0, 0, 0.1);
  border-bottom: .5px solid rgba(0, 0, 0, 0.1);
  color: black;
}

.nickname-label {
  width: 105px;
}

.nickname-input {
  flex: 1;
}

/**index.wxss**/
page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.scrollarea {
  flex: 1;
  overflow-y: hidden;
}

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #aaa;
  width: 80%;
}

.userinfo-avatar {
  overflow: hidden;
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.usermotto {
  margin-top: 200px;
}

.avatar-wrapper {
  padding: 0;
  width: 56px !important;
  border-radius: 8px;
  margin-top: 40px;
  margin-bottom: 40px;
}

.avatar {
  display: block;
  width: 56px;
  height: 56px;
}

.nickname-wrapper {
  display: flex;
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
  border-top: .5px solid rgba(0, 0, 0, 0.1);
  border-bottom: .5px solid rgba(0, 0, 0, 0.1);
  color: black;
}

.nickname-label {
  width: 105px;
}

.nickname-input {
  flex: 1;
}

  <!--index.wxml-->
  <navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF"></navigation-bar>
  <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>