案例简介
【定位说明】为设计师创建的文字图片灵感，记录分享工具。
【产品描述】该小程序的核心功能体验流程就是：“记录”、“分享”和“收藏”，而且简洁易用。人们可以用它来用作记录一闪而过的灵感创意、以及书摘笔记，并与他人快速分享。
1、记录：扫码添加读书心得，或者自己上传图片，记录文字。
2、分享：你在首页长按列表卡片，即可快速“分享”或“删除”对应内容。（在详情页底部，轻点小飞机按钮也可以分享，仅开发版！）
3、收藏：当你收到别人微信分享过来的灵感时，你可以一键收藏。
4、体验完整性：添加了默认分享配图，内容被删除后有404页面、关于产品的介绍页面。
5、彩蛋：收藏动画（礼花绽放效果，详见6截图）、详情页分享动画（小飞机起飞，详见10截图）。
【技术方案】
1、通过调用云函数，完成数据存储、读取、删除操作，更加安全。
2、当用户扫码时，通过调用豆瓣的API的数据，来获取书籍的公开信息。
3、优化了<textarea>组件在输入时的用户体验，避免<textarea>被键盘遮挡，或溢出屏幕可视区域。
【应用前景】任何人想要与好友分享自己的新奇想法、优质图书、或者创意灵感，都可以借助这个工具。我们可以把它当做是一个灵感、创意的分发器，和收纳盒。
—
以下是关键页面，以及核心功能展示。
1.首页
底部的“+”展开菜单目录，分别为：书摘、记灵感、关于。
设计思路：“+”按钮置于底部，相比其它位置，会更方便用户操作。
按钮动画的实现技术
预先写好按钮的动画CSS样式，并取命名为不同的Class类名。当用户点击时，通过JS给视图层的<view>组建，动态添加Class类名。
2.记灵感（编辑页）
拍摄或者上传一张照片，然后写下文字记录。因此，我是鼓励用户添加封面图，用作辅助记忆的。
功能体验1：当用户没有添加封面图，点击保存时，有Model弹窗询问用户是否真的不添加！（通过wx.ShowModal()函数实现）
功能体验2：当用户添加封面图后，也可以临时更换、删除图片。
△添加数据前，添加数据后！
3.灵感（详情页）
页面信息：详情页是用户添加的信息，以及创建时间的辅助信息。
设计思路：底部按钮，刻意引导用户回到首页，避免用户迷路。按钮放在底部，更便于操作。
4.书摘（详情页）
扫描书籍条形码，获取书籍基本信息，并添加你的读书笔记。（通过豆瓣API实现，数据获取！）
5.长按分享
在主页，长按卡片，可删分享该条灵感日记。
实现技术：首页的长按分享功能，通过添加button组件实现，即：<button open-type='share'></button>，但是该组件，无发完美嵌套<image>分享图标、以及<text>文字。所以，小程序的<button>组件，实际上只是一个通过绝对定位，重叠在分享图标、及文字上的透明遮罩。
<view class='option-do option-do1'> <image src='../../images/share.png' class='option-icon'></image><text>分享</text> <button open-type='share'></button> </view> |
button{ /* 这只是一个透明遮罩 */ opacity: 0; position: absolute; margin-left: -15rpx; border-radius: 31rpx; width: 135rpx; height: 62rpx; line-height: 44rpx;} |
6.收藏灵感
功能：如果别人分享给你了一条灵感日记，你可以一键收藏。
亮点：收藏按钮，做了情感化动效设计，增加趣味！
如果该条分享，被原作者删除，你将看到这样的页面。
7.长按删除
功能：在主页，长按卡片，可删除该条日记。
亮点：删除动画，采用了平滑的折叠动画，优雅舒适。
8.其它页面
1、关于页面。包含小程序的基本介绍，以及开发者个人信息。
2、当用户分享出去的灵感日记没有配图时，小程序会自动匹配一张系统预设图片。
9.优化输入体验（仅开发版）
该小程序，文字输入用的是<textarea>组件，键盘弹起时，默认会上推页面 adjust-position = "{{true}}"。用户正常输入时，光标位于<textarea>里的最后一个字符，随着输入文字的文字增多，<textarea>逐渐被撑开，这一切看起来都很正常！
但是，
1、当用户想要修改前面的文字，无法快速将光标定位到最前面的几行文字。如下图：
因此，
用户只能通过折叠键盘后，才能将光标重新定位到第一行（或前几行）文字。而此时<textarea>的可视区域变得极小，弹出键盘遮挡了该区域的文字，用户无法直接滑动到最后几行文字，进行编辑修改。如下图：
所以，
用户只能通过来回折叠键盘，将光标定位到靠前、或者靠后的位置。这种输入体验，可以说是非常不友好的，打断了用户的连贯思维，需要做些优化处理。
我的优化方案
不自动上推页面，键盘弹出后重新定位textarea布局。通过绑定focus和blur事件，动态设置其高度。这样一是能够保证输入区域的可视高度，始终为最大化，不会出现遮挡。再者，用户可以快速将光标定位到任何想要修改、标记的地方，而不再需要来回折叠键盘。这使得用户的输入体验更加流畅。
1、首先不自动上推页面，adjust-position='{{false}}'
2、获取当前窗口TotalHeight，获取弹出的键盘高度keyBordHeight。此时可视区域高度 VisualHeight = TotalHeight - keyBordHeight
3、在textarea输入文字时，将<textarea>上面组件的margin-top设置为负值，使得当前输入textarea刚好在窗口顶部，与此同时，设置当前textarea的高度为VisualHeight。
参考代码如下：
<textarea class='comment-text' placeholder='捕捉灵感，记下脑中闪过的想法！(限500字)' bindinput='onInput' maxlength='500' bindblur='onBlur' bindfocus='onFocus' adjust-position='{{false}}' style="height:{{inputHeight}};" cursor-spacing='30rpx'></textarea> |
/*关键css，通过渲染层的三元运算调用 */.no-uploader{ margin-top: -400rpx;} |
data: { focus: false,
// 优化输入体验，聚焦时，动态设置 onFocus: function (event) { console.log('focus'); console.log(event); var keybordH = event.detail.height; console.log('键盘高度', keybordH); var windowHeight = wx.getSystemInfoSync().windowHeight; console.log('窗口高度', windowHeight); //设置输入区域高度 var inputHeight = windowHeight - keybordH; this.setData({ inputHeight: inputHeight + 'px', focus: true, })
onBlur: function () { console.log('blur'); this.setData({ focus: false, inputHeight: '100%', }) }, |
优化后的输入展示
10.详情页分享动画（仅开发版）
—
然而，这个优化后的最终开发版本，未能通过小程序官方审核。
主要原因是因为个人开发的小程序，限制太多！但我还是要把自己能做的优化都做了，毕竟这是我跟着老师学习后，开发的第一款微信小程序，肉眼可见的不完美，搁在心理可是相当难受的啊。
当然了，由于我的认知格局有限，我肉眼可见的东西也十分有限，这个小程序应该还可以无限优化下去吧，那就等以后再说吧，这个小程序就此告一段落了。
—
