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

注：文章原地址：blog.csdn.net/weixin_5237…

一个月搞定微信小程序

• 以下微信小程序实际完成和发布是在半年前（也就是大一上学期的寒假完成的）。现在发布至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代码

<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）已发布，想了解该小程序更多功能，请再微信中查看。此文档中展示的图片未微信开发者工具中呈现的图片，可能实际情况有所差异。