今天小编要和大家分享的是如何用微信小程序制作加V头像，希望能够帮助到大家。
在我们的手机桌面上找到微信app并点击它（如果你的手机上没有微信，小编建议大家下载一个），如下图所示。
然后点击屏幕下方的发现，如下图所示。
点击小程序，如下图所示。
接着输入我要加v并点击搜索，如下图所示。
点击我要加v小程序，如下图所示。
然后点击屏幕中央的授权登录，如下图所示。
接着点击屏幕中的允许，如下图所示。
最后点击保存就可以了。
微信小程序开发实战——实现表单页面
## 问题背景
本文将介绍如何在微信小程序开发中，实现一般的表单页面。
## 问题分析
话不多说，先上效果图。
## 问题解决
完整代码如下：
（1）index.wxml文件，代码如下：
<scroll-view class="scroll-view_H" scroll-y="true"> <view class="outLayer"> <View class="lineItemFirst"> <View class="kindInfo"> <View class="ringItem"> * </View> <View class="KindItem"> 联系人: </View> </View> <input class="inputItem" placeholder="请输入联系人"></input> </View> <View class="lineItem"> <View class="kindInfo"> <View class="ringItem"> * </View> <View class="KindItem"> 联系电话: </View> </View> <input class="inputItem" placeholder="请输入联系方式"></input> </View> <View class="lineItem"> <View class="kindInfo"> <View class="ringItem"> * </View> <View class="KindItem"> 固定电话: </View> </View> <input class="inputItem" placeholder="请输入固定电话"></input> </View> <View class="lineItem"> <View class="kindInfo"> <View class="ringItem"> * </View> <View class="KindItem"> 服务类型: </View> </View> <picker class="picker" bindchange="pickerChange" range="{{arr}}"> <view> {{arr[index]}} </view> </picker> <image class="selectImg" src="../../static/img/ic_arrow_right.png"></image> </View> <View class="lineItem"> <View class="kindInfo"> <View class="ringItem"> * </View> <View class="KindItem"> 服务事项: </View> </View> <picker class="picker" bindchange="pickerChange" range="{{arr}}"> <view> {{arr[index]}} </view> </picker> <image class="selectImg" src="../../static/img/ic_arrow_right.png"></image> </View> <View class="lineItem"> <View class="kindInfo"> <View class="ringItem"> * </View> <View class="KindItem"> 联系人邮箱: </View> </View> <input class="inputItem" placeholder="请输入联系人邮箱"></input> </View> <View class="colItem"> <View class="kindInfoQuestion"> <View class="ringItem"> * </View> <View class="KindItem"> 问题简述: </View> </View> <input class="inputItemBig" placeholder="请输入问题详情"></input> </View> </view> <button class="btnItem" type="primary">确认</button></scroll-view>
（2）index.wxss文件，代码如下：
.outLayer{ margin:40rpx; display:flex; flex-direction: column; background: rgb(153, 149, 149); /* border-top: 3rpx solid lightgrey; */}.lineItemFirst{ margin-top:25rpx; height: 100rpx; display: flex; flex-direction: row; align-items: center; justify-content: space-between; background-color: white; /* border-bottom: 1rpx solid lightgrey; */}.lineItem{ margin-top:3rpx; height: 100rpx; display: flex; flex-direction: row; align-items: center; justify-content: space-between; background-color: white; /* border-bottom: 1rpx solid lightgrey; */}.kindInfo{ height: 40rpx; display: flex; flex-direction: row; justify-content: flex-start;}.ringItem{ height: 70rpx; color: red;}.KindItem{ height: 70rpx; font-size: smaller;}.kindInfoQuestion{ margin-top: 15rpx; height: 40rpx; display: flex; flex-direction: row; justify-content: flex-start;}.inputItem{ height: 70rpx; font-size: smaller; width: 70%; text-align: center;}.inputItemBig{ margin-top: 10rpx; font-size: smaller;}.picker{ height: 40rpx; font-size: smaller; width: 70%; text-align: center;}.colItem{ margin-top:30rpx; height: 300rpx; display: flex; flex-direction: column; justify-content: flex-start; background-color: white; /* border-bottom: 1rpx solid lightgrey; */}.scroll-view_H { /*设置display:flex无效*/ height: 100vh; padding-bottom: 150rpx;}.selectImg{ width: 25rpx; height: 25rpx;}.btnItem{ margin: 30rpx; margin-bottom: 50rpx;}
## 问题总结
本文介绍了如何在微信小程序开发中，实现一般的表单页面，有兴趣的同学可以进一步深入研究。
