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

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

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

1.movable-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.增加旋转功能

微信小程序制作激仿自己的程序方法：

工具/原料：华为MateBook 14s、Windows10、百度浏览器8.6.3。

方法/步骤明旁纤：

1、点击立即注册

在微信启枯公众平台官网里面，点击立即注册，进入新界面里。

2、点击小程序

在新界面里，找到小程序按钮，点击它进入小程序界面里。

3、点击注册

在新界面中，输入信息后点击注册，即可制作自己的程序。

01

申请注册微信小程序账号，注册账号后会有一个appid，非常重要需模滚物要记住。新项目创建完毕，可进入开发者工具进行编辑。了解app.js、app.json、app.wxss等文件功能，搜集一些精美组件可让小程序更有特色。编辑好后，准确分类，点击提交，等待审核即可。一键生成小程序比较简单，例如用凡科网，进入网站后，选择想要的模板，进行相应修改即可。

首先注册小程序制作平台【码元素】商城，类似平台还有不少，大家可以多找几个对比试试。进入【码元素】后台接下来选择点击添加小程序商城，再下来是点击“营销中心”的“diy装修”选择小程序模板，也就是你喜欢的风格样式，然后会打开对应的模板，备源然后根据自己想要的进行选择即可！按照小程序制作向导进行编辑修改。自己的小程序制作好了之后，最后就是保存即可。

首先是需要注册小程序帐号，百度找到微信公众平台，单击右上角的“立即注册”。点击“立即注册”之后，进入如下页面，选择“小程序”模块，进入小程序注册页面，填写好资料注册好小程序。然后是打开浏览器，复制或者输入免费小程序.网站，然后点击免费制作。选择适合自己行业或者喜欢的模版，这样子可以节省大量的开发时间。

通过修改图标，拖拽模块，添加功能的方式，设计出自己的小程序。打开微信公众号，点击左侧开发栏目，选择开发设置，获取AppID和AppSeret 。在小程序编辑界面点击生成选择已绑定的域名，如果要使用自己的域名必须要安装https证书。同时填写配置好request、socket、uploadfile、downloadfile 。打开微信公众号，在小程序官方平台点击开发，选择开旦液发设置，录入合法域名。（以下4个都填同一个域名即可）

---