微信小程序基于movable-area实现DIY T恤logo定制

新手学堂022

微信小程序基于movable-area实现DIY T恤logo定制,第1张

可以通过上传两个,一个是可以定制的T恤/背包等背景图,一个是定制的logo。让用户可以可以拖动logo放置在背景图上粗略实现DIY的预览效果。具体要求:可手势放大/缩小,可面板操作切换,可面板操作放大缩小对应的,可本地选择。

原生容器组件的 movable-area | 微信开放文档 (qqcom) 已经内部实现了拖动和放大缩小,我们只需要理顺组件交互的思路以及注意事项,主要有以下:

1movable-view必须为movable-area的子级元素。

2两个movable-view不能同时设为可手势放大/缩小,存在冲突,因此需要在点击/拖动,还有点击下方tab切换背景图/logo时控制相应的movable-view是否可手势缩放。

3点击或拖动logo/背景时候,与下方的操作面板的tab元素互动,因此需要监听touchstart事件。

4点击/拖动logo时候,需要显示边框,在拖动结束的时候边框消失,显得更用户友好,因此需要在touchstart和touchend中做处理。

5手势放大/缩小时,需要同步下方操作面板的放大倍数,因此需要绑定scale的值(movable-view提供)。

6(重点)手势放大缩小事件是一种resize事件,如果每次resize都要更新一次面板计步器的话是十分浪费资源的,因此需要进行函数防抖(debounce),当触发时,如果规定时间间隔:500ms(个人设置的值)内再次触发resize事件,则把时间间隔更新,只有在最后一次resize事件执行后且500ms内没有再次触发resize事件,才进行计步器值的更新,具体防抖的原理和应用可以自行搜索。

1增加保存功能,对完成的进行保存。

2增加旋转功能

可以使用占坑法,再每次上传前,先生成n个顺序id,这样和绑定到一起,每次上传得时候带着id一起,这样就保证上传得是顺序得,有问题得,或者有得上传失败了,id还是顺序得

程序这个话题现在是越来越热了,很多知名大品牌和洞察到这块市场的商家早已经入驻小程序,当然也有很多商家目前还处于观望状态,毕竟很多疑问还没有弄懂,主要是不懂怎么入手制作小程序,那今天我们就来说说小程序注册到制作的怎么个流程吧,这边借用下目前小程序开发容易上手的小程序开发工具平台来给大家演示一下

第一步 注册小程序

怎么企业以及个人怎么注册微信小程序,这里不多说,不懂的可以去看下教程:

第二 制作小程序

1首先打开网站,创建一个账号 账号创建好之后点击制作

点击“制作”,选择“空白模板”即可进入编辑页面

进入编辑页面,可以看到左侧一栏的组件库。下面以"轮播banner"为例:添加“轮播”,点击“管理轮播图分组”往里,完成一个布局后保存,点击预览可以查看刚刚添加效果!(使用上有任何不懂的可以直接咨询他们客服)

添加店铺名称和导航,首页先点击左侧自由面板,然后选择文本进行编辑文字,导航点击左侧“”然后直接拖拽到“自由面板”空白的地方替换,修改尺寸就可以了。地图导航链接,点击事件,调用功能选择“地图导航”,添加之前先到地图管理里面添加地址

列表添加,点击左侧“列表”点击添加,先填写表填,然后点击更好,布局和排版更具自己的喜好来设计!

点击预约到店里的“技师列表”显示数量设置好,点击管理对象,跳转到后台添加技师基础设置、预约设置、详情页样式设置,保存后前端预览就能显示出来了。

底部导航设置:点击底部导航,然后点击“添加”设置底部导航和描述,替换设置好和描述,点击链接至“预约”然后保存就OK了

其他子页面点击右下角,添加页面或添加分组,其他操作或设置跟主要操作基本一样的。

编辑好页面以后,建议大家先点击保存,然后再点击上方的「管理」进入后台。看到左侧的后台功能列表,用户可以找到部分对应的模块上传数据。比如进入页面数据,展示的是用户制作好的页面。在这里可以添加店铺设置,服务管理,订单管理等

当前端和后台都调整好后,回到小程序编辑页面点击右上角的「保存」,然后「预览」看页面显示效果,确定界面显示没问题后点击右上角的「发布」,会自动跳转到后台,此时我们进行打包上传,选择微信小程序,可以选择一键上传至微信公众平台,直接登录小程序后台提交审核,或者下载代码包自己通过开发者工具上传。

上传好后,等待微信平台那边审核通过就可以发布啦,发布后就可以在微信搜索到专属你的微信小程序了。是不是特别简单?赶快来试试看吧~

有一点要给大家普及一下哦 :目前开发小程序的第三方平台都是要收费的哦,一般免费体验7天左右

若使用的是vivo手机,请参考以下方法:

尝试重启软件

在桌面长按软件图标--应用信息--强制停止,或在后台结束软件,然后重新打开软件。

将系统和软件升级至最新版本

新版本提升兼容性和稳定性,可以尝试升级系统,另外在应用商店或者软件内检测升级至最新版本。

检查软件兼容性

可以在应用商店搜索软件查看是否兼容手机最新版本,或与相同安卓版本手机对比测试。如果应用商店提示不兼容,或者同类手机也出现此问题,可能是应用自身问题,建议咨询软件客服寻找解决方案。

检查软件权限

如果手机禁止了软件的某些权限可能会导致软件闪退。可以长按桌面软件图标--应用信息--权限,打开相关权限。

清理运行内存和存储空间

使用"一键加速"清理后台应用

使用i管家及时清理手机存储空间,并卸载不常用的软件,保持存储剩余空间在20%以上。

更多使用疑惑可进入vivo官网--我的--在线客服--输入人工,咨询在线客服反馈。

本人记性极差,所以经常总结工作中遇到的一些难题笔记,用来加深记忆,下次用到同样的问题可以直接拿来看,提高工作中的效率。

此文章是工作中的笔记,描述可能不是那么清楚,有问题,大家可加我微信一起交流学习。

我的项目在config里面配置接口上传地址

indexwxml

indexjs

在这个过程中遇到了一些问题总结如下: