当前位置: 首页 > news >正文

如何用微信小程序写春联

生活没有模板,只需心灯一盏。 如果笑能让你释然,那就开怀一笑;如果哭能让你减压,那就让泪水流下来。如果沉默是金,那就不用解释;如果放下能更好地前行,就别再扛着。

一、引入 Vant UI

1、通过 npm 安装

npm i @vant/weapp -S --production

​​在这里插入图片描述

2、修改 app.json

将 app.json 中的 “style”: “v2” 去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。

3、构建 npm 包

打开微信开发者工具,点击 工具 -> 构建 npm,并勾选 使用 npm 模块 选项,构建完成后,即可引入组件。

在这里插入图片描述

二、页面与功能

1、页面实现

<!--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">
http://www.lryc.cn/news/531030.html

相关文章:

  • LabVIEW无人机航线控制系统
  • C++哈希表深度解析:从原理到实现,全面掌握高效键值对存储
  • Vue.js组件开发-实现字母向上浮动
  • 自研有限元软件与ANSYS精度对比-Bar2D2Node二维杆单元模型-四连杆实例
  • 04树 + 堆 + 优先队列 + 图(D1_树(D11_伸展树))
  • c语言练习题【数据类型、递归、双向链表快速排序】
  • SliverAppBar的功能和用法
  • 五、定时器实现呼吸灯
  • Elasticsearch的索引生命周期管理
  • 【大模型理论篇】最近大火的DeepSeek-R1初探系列1
  • 【数据结构】(4) 线性表 List
  • 【C++ STL】vector容器详解:从入门到精通
  • OpenAI推出Deep Research带给我们怎样的启示
  • 洛谷[USACO08DEC] Patting Heads S
  • CSS 溢出内容处理:从基础到实战
  • Spring Boot项目如何使用MyBatis实现分页查询
  • 飞行汽车中的无刷外转子电机、人形机器人中的无框力矩电机技术解析与应用
  • FreeRTOS学习 --- 队列集
  • 【R语言】R语言安装包的相关操作
  • 15.[前端开发]Day15-HTML+CSS阶段练习(网易云音乐四)
  • 【基于SprintBoot+Mybatis+Mysql】电脑商城项目之用户登录
  • 测试方案和测试计划相同点和不同点
  • c++提取矩形区域图像的梯度并拟合直线
  • Unity Shader Graph 2D - 角色身体电流覆盖效果
  • 【LLM-agent】(task4)搜索引擎Agent
  • 携程Java开发面试题及参考答案 (200道-下)
  • GWO优化SVM回归预测matlab
  • QMK启用摇杆和鼠标按键功能
  • Unity实现按键设置功能代码
  • 基于物联网技术的实时数据流可视化研究(论文+源码)