微信小程序+轮播图+弹窗等设置

一个月搞定微信小程序

• 以下微信小程序实际完成和发布是在半年前（也就是大一上学期的寒假完成的）。现在发布至CSDN是为了以另一种方式来纪念一下我的第一次个人开发，当然也希望更多的人看到（算是一种推广吧）。
• 下面放上我的小程序界面图
• 首页

• 发布
  
  代码实现

  <!--分享新鲜事区域-->
  <view class="text">
    <textarea class='input' placeholder=" 分享新鲜事..." value="{{content}}" bindinput="bindContentInput" maxlength="-1" />
  </view>

  <!--选择图片区域-->
  <view class="image-list" >
    <block wx:for="{{imageList}}" wx:key="*this">
      <view class="q-image-wrap">
        <!-- 图片缩略图  -->
        <image class="q-image" src="{{item}}" mode="aspectFill" data-idx="{{index}}" bindtap="handleImagePreview"></image>
        <!-- 移除图片的按钮  -->
        <view class="q-image-remover" data-idx="{{index}}" bindtap="removeImage">
          <icon class='iconfont icon-chuyidong'></icon>
        </view>
      </view>
    </block>
    <view class='uploadImgBtn' bindtap="uploadImage" wx:if="{{imageList.length < 10}}">
      <icon class='iconfont icon-tianjiatupian'></icon>
    </view>
  </view>

• 我的
  
• 登录界面
  
  wxml代码

<!--pages/auth/auth.wxml-->

<!--Logo区域-->
<view class="logo">
    <image src='/static/picture/shipin.png'></image>
    <text>大头照</text>
</view>

<!--登录区域和登录注册按钮-->
<view class="form">
    <!--登录区域-->
    <view class="row-group">
        <text>手机号</text>
        <input placeholder="请填写手机号码" placeholder-class='txt' maxlength='11' value="{{phone}}" bindinput="bindPhoneInput" />
    </view>
    <view class="row-group">
        <text>验证码</text>
        <input placeholder="请填写验证码" placeholder-class='txt' maxlength='6' value="{{code}}" bindinput="bindCodeInput" />
        <view class="code" bindtap="onClickCheckCode">{{time}}</view>
    </view>

    <!--登录注册按钮-->
    <view>
        <button class="submit"  open-type="getUserInfo" bindgetuserinfo="onClickLogin">登录 | 注册</button>
    </view>
</view>

wxss代码

/* pages/auth/auth.wxss */

/*Logo区域*/
.logo{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.logo image {
    margin-top: 140rpx;
    width:400rpx;
    height:400rpx;
}
.logo text {
    margin-top: 26rpx;
    margin-bottom: 50rpx;
    font-size: 24rpx;
    line-height: 24rpx;
    font-weight: 400;
    color: #8c8c8c;
    text-align: center;
}

/*登录区域*/
.form{
    padding: 40rpx;
}
.form .row-group{
    padding: 20rpx 0;
    border-bottom: 1rpx solid #ddd;
    position: relative;
}
.form .row-group text{
    font-size: 28rpx;
    padding:10rpx 0;
}
.form .row-group input{
    padding: 10rpx 0;
}
.form .row-group .txt{
    color: #ccc;
}
.form .row-group .code{
    position: absolute;
    right: 0;
    bottom: 26rpx;
    z-index: 2;
    width: 206rpx;
    height: 60rpx;
    border: 2rpx solid #836FFF;
    border-radius: 12rpx;
    font-size: 26rpx;
    font-weight: 400;
    color: #836FFF;
    display: flex;
    align-items: center;
    justify-content: center;
}
/*登录注册按钮*/
.form .submit{
    margin-top: 80rpx;
    color: #fff;
    border: 2rpx solid #836FFF;
    background-color: #836FFF;
    font-size: 32rpx;
    font-weight: bold;
}

• 弹窗界面
  wxml代码

<!--点击 去评分 触发的弹窗-->
    <view class="screen3" bindtap="grade" data-statu="close" wx:if="{{showModalStatus3}}"></view>
    <view animation="{{animationData3}}" class="drawer_box3" wx:if="{{showModalStatus3}}">
      <view class="big-title3">给我们打分</view>
      <block wx:for="{{stars}}" wx:key='key'>
        <image class="star-image" style="left: {{item*150}}rpx" src="{{key > item ?(key-item == 0.5?halfSrc:selectedSrc) : normalSrc}}">
          <view class="item" style="left:1rpx" data-key="{{item+0.5}}" bindtap="selectLeft"></view>
          <view class="item" style="left:25rpx" data-key="{{item+1}}" bindtap="selectRight"></view>
        </image>
      </block>
      <view class="button3" bindtap="onCancel" data-statu="close">提交</view>
    </view>

wxss代码

/*点击 去评分 弹出的弹窗*/
.screen3 {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  opacity: 0.5;
  overflow: hidden;
}
.drawer_box3 {
  width: 700rpx;
  height: 400rpx;
  overflow: hidden;
  position: fixed;
  top: 30%;
  z-index: 1000;
  background: #fdfcfc;
  justify-content: center;
  margin: 0rpx -10rpx 10rpx -15rpx;
  border-radius: 3px;
}
.big-title3 {
  padding:15px;
  font: 25px "microsoft yahei";
  text-align: center;
}
.star-image {
  position: absolute;
  top: 150rpx;
  width: 100rpx;
  height: 100rpx;
}
.star-image .item {
  position: absolute;
  top: 0rpx;
  width: 45rpx;
  height: 100rpx;
}
.button3 {
  padding: 180rpx;
  font: 20px "microsoft yahei";
  text-align: center;
  border-top: 1px solid #E8E8EA;
  color: #8470ff;
}

• 因为代码实在太多不能一一放在文中，如有需要请私信作者。另外该微信小程序（RedL）已发布，想了解该小程序更多功能，请再微信中查看。此文档中展示的图片未微信开发者工具中呈现的图片，可能实际情况有所差异。