一款制作励志标语的小程序,使用uniapp+canvas合成

博主分享了自己制作励志语相框小程序的过程,该小程序允许用户自定义文字、调整字体和大小,选择不同相框。目前1.0版已具备基本功能,2.0版计划加入更多个性化选项。欢迎提出建议和想法。

看到网上很多励志相框的图片,但找不到自己最喜欢的那句话,于是就自己ps一个好了,后面想着如果要改排版或是文字的话,又要去ps更改,是不是有些麻烦了,所以想到做一个程序来实现自己的想法。

分享一下自己制作的过程,同时也记录一下。

打开小程序“DIY励志语相框”(ps:呃,暂叫它这个吧,也许你们有更适合的名字),小程序主页是展示了一些励志标语相框的好看效果,点击进去可以尝试移动文字排版,字体风格切换、字体颜色改变,最后相框+文字合成保存到相册,这就是1.0版的功能,赶紧来试试吧。

目前效果图(部分截图):

 

2.0上线规划功能:

 1、支持打字输入文字

 2、支持对单个文字的大小修改

 3、支持相框多样化选择

版本更新:

10-22 :自定义文字,使用自己喜欢的句子

10-23 :实现单个文字的大小修改

 

我相信未来它的功能会更多,更有趣,更受欢迎。

如果你有好的建议和想法,欢迎留言交流或私信!

微信小程序使用 UniApp 和 Vue 3 集成 ECharts 可以按照以下步骤进行: ### 1. 创建 UniApp 项目 如果还没有 UniApp 项目,可以使用 HBuilderX 或者命令行工具创建一个新的 UniApp 项目。使用命令行创建的示例如下: ```bash npx @dcloudio/uni-cli-init@latest init hello-uniapp my-project cd my-project ``` ### 2. 安装 ECharts 在项目根目录下,使用 npm 安装 ECharts: ```bash npm install echarts --save ``` ### 3. 配置 ECharts 支持微信小程序 由于微信小程序不支持直接使用 ECharts 的 DOM 操作,需要使用 `echarts-for-weixin` 这个适配库。可以通过以下方式使用: ```bash npm install echarts-for-weixin --save ``` ### 4. 创建 ECharts 组件 在 `components` 目录下创建一个新的 ECharts 组件,例如 `ECharts.vue`: ```vue <template> <view class="echarts-container"> <canvas id="mychart" canvas-id="mychart"></canvas> </view> </template> <script setup> import * as echarts from 'echarts'; import { onMounted } from 'vue'; onMounted(() => { const canvas = uni.createCanvasContext('mychart'); const chart = echarts.init(canvas, null, { renderer: 'canvas', devicePixelRatio: uni.getSystemInfoSync().pixelRatio }); const option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line' }] }; chart.setOption(option); }); </script> <style scoped> .echarts-container { width: 100%; height: 300px; } </style> ``` ### 5. 在页面中使用 ECharts 组件 在需要使用 ECharts 的页面中引入并使用该组件: ```vue <template> <view> <ECharts /> </view> </template> <script setup> import ECharts from '@/components/ECharts.vue'; </script> <style scoped> </style> ``` ### 6. 运行项目 在 HBuilderX 中运行项目到微信小程序模拟器,或者使用命令行运行: ```bash npm run dev:mp-weixin ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Julian向前冲

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值