如何用微信小程序写春联

时间:2025-02-03 11:50:04
<!--index.wxml--> <van-cell-group inset> <van-cell title="上联" required title-width="3.2em"> <input class="weui-input" maxlength="10" placeholder="春联对歌民安国泰" bindinput="onChangeValue1" /> </van-cell> <van-cell title="下联" required title-width="3.2em"> <input class="weui-input" maxlength="10" placeholder="喜字成双花好月圆" bindinput="onChangeValue2" /> </van-cell> <van-cell title="横批" required title-width="3.2em"> <input class="weui-input" maxlength="10" placeholder="国泰民安" bindinput="onChangeValue3" /> </van-cell> <van-cell required title-width="3.2em" title="字体" is-link value="{ {font}}" bind:click="showFontsPopup" /> <van-popup show="{ { showFonts }}" bind:close="onFontClose" round position="bottom" custom-style="height: 40%"> <van-picker show-toolbar title="春联字体" columns="{ { fontsColumns }}" bind:cancel="onFontCancel" bind:confirm="onFontConfirm" default-index="{ { 0 }}" /> </van-popup> <van-cell required title-width="3.2em" title="方向" is-link value="{ {direction}}" bind:click="showDirectPopup" /> <van-popup show="{ { showDirect }}" bind:close="onDirectClose" round position="bottom" custom-style="height: 40%"> <van-picker show-toolbar title="字体方向" columns="{ { directionColumns }}" bind:cancel="onDirectCancel" bind:confirm="onDirectConfirm" default-index="{ { 0 }}" /> </van-popup> </van-cell-group> <van-button disabled="{ {disabled}}" color="linear-gradient(to right, #FF6034, #EE0A24)" block size="large" bind:click="onSubmit">{ {submitText}}</van-button> <van-button disabled="{ {previewDisabled}}" color="linear-gradient(to right, #4bb0ff, #6149f6)" block size="large" bind:click="onPreviewImage">预览图片</van-button> <van-grid column-num="3" border="{ { false }}"> <van-grid-item use-slot wx:for="{ {localImgUrlArray}}" wx:key="index" bind:click="onImgTap" id="{ {index}}" data-imgsrc="{ {item}}"> <image style="width: 100%; height: 90px;" src="{ {item}}" mode="aspectFit">