微信小程序设置表单中输入内容的必填项提示

微信小程序的WeUI样式以及微信小程序开发文档中发现并没有表单必填前的required属性

以及input组件：

中都没有required属性，所以，只能自己创造了。

首先，利用WeUI的flex布局，

官方WeUI代码是这样的：
Form：

<view class="weui-form__control-area">
			<view class="weui-cells__group weui-cells__group_form">
				<view class="weui-cells__title">表单组标题</view>
				<view class="weui-cells weui-cells_form">
					<view class="weui-cell weui-cell_active">
						<view class="weui-cell__hd"><label class="weui-label">微信号</label></view>
						<view class="weui-cell__bd">
							<input class="weui-input" placeholder="填写本人微信号" placeholder-class="weui-input__placeholder" />
						</view>
					</view>
					<view class="weui-cell weui-cell_active">
						<view class="weui-cell__hd">							
                            <label class="weui-label">昵称</label>
                        </view>
						<view class="weui-cell__bd">
							<input class="weui-input" placeholder="填写本人微信号的昵称" placeholder-class="weui-input__placeholder" />
						</view>
					</view>
					<view class="weui-cell weui-cell_active">
						<view class="weui-cell__hd">							
                            <label class="weui-label">联系电话</label>
                        </view>
						<view class="weui-cell__bd">
							<input class="weui-input" placeholder="填写绑定的电话号码" type="number" placeholder-class="weui-input__placeholder" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="weui-form__tips-area">
			<view class="weui-form__tips">
                表单页提示，居中对齐
			</view>
		</view>
		<view class="weui-form__opr-area">
			<a class="weui-btn weui-btn_primary">确定</a>
		</view>

Flex布局：

<view class="weui-flex">
	<view class="weui-flex__item"><view class="placeholder">weui</view></view>
	<view class="weui-flex__item"><view class="placeholder">weui</view></view>
</view>

改写之后：

<view class="weui-cells weui-cells_after-title">
		<view class="weui-cell weui-cell_active">
			<view class="weui-cell__hd">
				<view class="weui-flex">
					<view class="weui-flex__item">
						<view class="placeholder" style="color:red;width:5vw;">*</view>
					</view>
					<view class="weui-flex__item">
						<view class="placeholder" style="width:20vw;">姓名</view>
					</view>
				</view>
			</view>
			<view class="weui-cell__bd">
				<input class="weui-input" value="{{stu.name}}" bind:input="onName" placeholder="请输入姓名" />
			</view>
		</view>
		<view class="weui-cell weui-cell_active">
			<view class="weui-cell__hd">
				<view class="weui-flex">
					<view class="weui-flex__item">
						<view class="placeholder" style="color:red;width:5vw;">*</view>
					</view>
					<view class="weui-flex__item">
						<view class="placeholder" style="width:20vw;">专业</view>
					</view>
				</view>
			</view>
			<view class="weui-cell__bd">
				<input class="weui-input" value="{{stu.profession}}" bind:input="onProfession" placeholder="请输入专业" />
			</view>
		</view>
		<view class="weui-cell weui-cell_active">
			<view class="weui-cell__hd">
				<view class="weui-flex">
					<view class="weui-flex__item">
						<view class="placeholder" style="color:red;width:5vw;">*</view>
					</view>
					<view class="weui-flex__item">
						<view class="placeholder" style="width:20vw;">班级</view>
					</view>
				</view>
			</view>
			<view class="weui-cell__bd">
				<input class="weui-input" value="{{stu.class}}" bind:input="onClass" placeholder="请输入班级" />
			</view>
		</view>
	</view>
	<view class="weui-btn-area">
		<button class="weui-btn" type="primary" bindtap="showTopTips">下一步</button>
	</view>

必填项就完成了。