Wechat applet development practice - realize the form page
problem background
This article will introduce how to implement a general form page in the development of WeChat applets.
problem analysis
Not much to say, let’s first look at the renderings, which mainly include functions such as basic form items, list box selection data, and local image selection.
problem solved
The complete code is as follows:
(1) index.wxml file, the code is as follows:
<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 class="lineItem">
<View class="kindInfo">
<View class="ringItem">
*
</View>
<View class="KindItem">
选择附件
</View>
</View>
<button class="btnChooseFile" bindtap="onChooseFile">选择图片</button>
</View>
</view>
<View class="fileItem" wx:if="{
{hasFile}}">
<View class="fileKindInfo">
<View class="fileInfo">
选择的文件路径:
</View>
<View class="fileNameItem">
{
{path}}
</View>
</View>
</View>
<button class="btnItem" type="primary">确认</button>
</scroll-view>
(2) index.wxss file, the code is as follows:
.outLayer{
margin:10rpx;
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;
}
.fileKindInfo{
height: 40rpx;
display: flex;
flex-direction: column;
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;
}
.btnChooseFile{
height: 70rpx;
width: 30rpx;
font-size: x-small;
}
.btnItem{
margin: 30rpx;
margin-bottom: 50rpx;
}
.fileItem{
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; */
}
.fileInfo{
height: 40rpx;
display: flex;
width: 30%;
flex-direction: row;
justify-content: flex-start;
}
.fileNameItem{
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 70rpx;
font-size: smaller;
}
(3) index.js file, the code is as follows:
// pages/pubu/pubu.js
Page({
/**
* 页面的初始数据
*/
data: {
publishInfoList: [],
arr:['体适能','足球','篮球','乒乓球'],
index:0,
path:"",
hasFile: false,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
let f = this;
wx.request({
url: 'https://geoapi.qweather.com/v2/city/lookup?location=beij&key=d4a619bfe3244190bfa84bb468c14316',
success(res) {
if (res.statusCode == 200) {
var allList = res.data.location
f.setData({
publishInfoList: allList
})
}
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
},
submitInfo(e) {
this.setData({
formId: e.detail.formId,
},
(res) => {
})
},
pickerChange(value) {
console.log(value)
this.setData({
index:value.detail.value
})
},
/**
* 选择图片
*/
onChooseFile() {
wx.chooseImage({
success:(resp)=>{
let imgPath=resp.tempFilePaths;
console.log(imgPath);
this.setData({
path: imgPath, hasFile: true});
}
})
}
})
conclusion of issue
This article introduces how to implement general form pages in the development of WeChat applets, including common list items, list selection boxes, picture selectors, etc. Interested students can further study in depth.