一个月搞定微信小程序
- 以下微信小程序实际完成和发布是在半年前(也就是大一上学期的寒假完成的)。现在发布至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)已发布,想了解该小程序更多功能,请再微信中查看。此文档中展示的图片未微信开发者工具中呈现的图片,可能实际情况有所差异。