导航

    Taro 社区

    Taro

    • 注册
    • 登录
    • 搜索
    • 版块
    • 最新
    • 话题
    • 热门
    • 群组
    1. 主页
    2. ab_xy163
    A
    • 资料
    • 关注
    • 粉丝
    • 主题
    • 帖子
    • 最佳
    • 群组

    ab_xy163

    @ab_xy163

    0
    声望
    16
    帖子
    2277
    资料浏览
    0
    粉丝
    0
    关注
    注册时间 最后登录

    ab_xy163 关注

    ab_xy163 发布的帖子

    • RE: 空闲时间,用taro给自己撸了一个小程序

      @jd_40246345c79d1 感觉产品总监已经拖着40米大砍刀缓缓而来~~

      发布在 Taro 实践 + 案例
      A
      ab_xy163
    • RE: 空闲时间,用taro给自己撸了一个小程序

      可以啊,欢迎转载~~

      发布在 Taro 实践 + 案例
      A
      ab_xy163
    • 空闲时间,用taro给自己撸了一个小程序

      项目背景

      笔者是个非常健忘的人,经常会忘记一些重要的事情,比如银行卡密码什么的,O(∩_∩)O哈哈~为此经常遭到老婆大人的嘲笑。偶尔有一天突然萌生了一个想法,为啥不做一个保存密码的小程序呢。“我的云密码”就此诞生。老婆再也不能嘲笑我密码记不住了😀

      这里我要毫无节操地插播一下广告哈。

      扫码_搜索联合传播样式-标准色版.jpg

      说做就做,从开始构思到发版上线一共花了一个月左右(晚上),因为白天要正常上班,呵呵。上线那天还是有点小激动的。从头到尾一个人完成,同时兼任了产品、设计、开发、测试、运维、推广软文等一系列的工作。哈哈。。。。着实过了一把全栈的瘾。。

      下面是一些记录,请看图:

      出自一位非专业产品的手,原型图-v1版,哈哈~~太丑了,

      微信图片_20200605214015.jpg

      微信图片_20200605214042.jpg

      v1版原型总结一句话就是:思路有点乱+想的有点多~。深思熟虑后,决定对原型进行大刀阔斧的改动,于是v2改良版,Duang的一声诞生啦~~

      微信图片_20200605214107.jpg

      微信图片_20200605214114.jpg

      最后,感觉还没有v1好,好吧,就这样吧,这实在不是我的强项,但好呆对产品有了一个初略的感觉,这种感觉就像隔着一层纱,看不清摸不着。

      好了原型图有了,赶紧去找设计师出图吧。。喂,醒醒,醒醒,设计狮不就是你自己吗。好吧,对PS一窍不通的我,这个时候想起了一句话,内事不决找百度,外事不决找阿里。嘿嘿,最后我用了阿里图标fonticon,收集了一些好用图标,就完事了,是挺草率的,O(∩_∩)O哈哈~

      025975cf-aa8d-42ef-bd54-d236a5235a6e-image.png

      至此,设计的事算搞完了。哦,差点忘了(瞧我这记性),还差了一个Icon,本来想搞个美国队长的盾牌的,但想想现在美国对我们不太友好,还是算了,最后选了个盾牌的标记,黄色代表轻松+愉快(其实是因为笔者喜欢黄色)

      安全.png

      产品和设计的事都搞定了,那就开始正儿八经的开发吧。本着对产品负责任的态度(实际是对之前自己画的原型图极度不自信),开发过程中又对产品进行了大刀阔斧的优化,该砍的砍,该调整的调整,总算是将业务的流程搞顺了,一些流程进行了简化处理,加强了安全性的方面的考虑。

      抱着能偷懒就偷懒的精神,后台功能与接口开发直接在github上找了一个开源的框架,在此基础上开发,省去了大量时间,因为这部分工作没有灵魂,O(∩_∩)O哈哈~,无非就是一些增删改查罢了。。

      虽说没有灵魂,但还是要感谢一下开源博主,确实帮了大忙。若依,开源地址:https://gitee.com/y_project/RuoYi, 框架非常简单好用,再次感谢若依大神。

      前面写了这么多内容,接下来才是真正的主菜,Taro前端代码开发。

      使用的技术taro + mobx + cryptojs

      代码结构如图:

      f350c6ba-c16d-4ed4-b2f9-f11370493fd8-image.png

      自定义组件:

      54fa2607-6cd2-4474-83ba-fb449ac1ed08-image.png

      页面结构:

      e98fe6e6-a16f-4b82-8457-8d4a6a8a036e-image.png

      以下是功能图,相比原型,功能做了大胆的简化,更符合用户使用习惯。

      1、首页。我保存的密码,置顶、删除。

      微信图片_20200605225223.jpg

      微信图片_20200605224752.jpg

      2、创建密码。常用APP选择、通用图标选择

      微信图片_20200605224927.jpg 微信图片_20200605224922.jpg 微信图片_20200605224901.jpg 微信图片_20200605224857.jpg 微信图片_20200605224852.jpg 微信图片_20200605224846.jpg 微信图片_20200605224841.jpg 微信图片_20200605224837.jpg 微信图片_20200605224826.jpg 微信图片_20200605224821.jpg 微信图片_20200605224812.jpg

      3、其他功能

      微信图片_20200605224938.jpg 微信图片_20200605224933.jpg

      经过反反复复修改打磨,最终效果,貌似还不错,应该比原型图强一点哈。。其实后面还有一些服务器部署、发布上线的事这里就一笔略过。。

      最最后面再强调一点,我的云密码小程序系统设计是安全可靠地,这点就跟笔者是一样的,O(∩_∩)O哈哈~,因为采用的是前端加解密技术,不存在数据泄露的事情,至于原理我就不班门弄斧,相信咱作为程序员都懂得,哈哈。并没有什么高深的技术。

      最后照例还是搞个技术交流群把,大家一起交流交流,如果您有什么好的意见和建议,请务必提出。

      宇宙警备队群二维码.png

      发布在 Taro 实践 + 案例
      A
      ab_xy163
    • RE: taro如何渲染html字符串

      @couxiaozi1983 RichText

      发布在 Taro
      A
      ab_xy163
    • RE: Taro支持分页加载吗?

      @lsc993 加载多少数据是后端自己控制的,而不是前端控制的。

      发布在 微信小程序
      A
      ab_xy163
    • RE: 可以在taro编译出来的微信小程序上进行小程序的原生开发吗

      @jd_444cdac22e074 taro转换后的weapp代码(其他代码也一样)基本不具有可读性,与人类的思维不一样。除非你是js大神级别的高手,否则难度很大。

      发布在 微信小程序
      A
      ab_xy163
    • RE: taro 如何实现过渡动画?

      @1222445 css3

      发布在 Taro
      A
      ab_xy163
    • RE: taro sass mobx

      不知道从哪个版本起,taro init 后从github拉取下来的项目package.json变成了pkg文件,需要手动把文件名改成package.json,在手动install下就OK了。

      发布在 微信小程序
      A
      ab_xy163
    • Taro有支持微信直播live-pusher与live-player的计划吗?

      Taro有支持微信直播live-pusher与live-player的计划吗?

      发布在 Taro
      A
      ab_xy163
    • mobx common包的疑问

      急!!官方示例中有引入@tarojs/mobx-common这个包,请问这个包的作用是什么?是必须要引入吗?

      发布在 Taro
      A
      ab_xy163