【Copy攻城狮日志】借助Taro暴改Nideshop实现电商支付宝小程序雏形

码途觅雪鹤
• 阅读 4141

【Copy攻城狮日志】借助Taro暴改Nideshop实现电商支付宝小程序雏形
↑开局一张图,故事全靠编↑

从一个需求说起

作为底层的程序猿,哦不,我连猿都算不上,混的好的叫码神,混得一般的叫码农,混得有点差的叫码畜,混得极差的,就像我这样的,叫码渣。去年,2018年年底,12月份,运营的大佬提出了想做电商类支付宝小程序的想法,需求很简单:做一个自己的商城,上架到支付宝小程序应用市场。一句话,简单明了,需求很明确啊,可这句话对我来说,要实现的难度,比起李白上蜀道还难,比难于上青天还难。细细一想,做商城,得有后台管理系统吧?得有支付系统吧?得有订单管理等一系列业务支撑的后台吧?我一小小的前端,本身业务基础又差,每天上班8小时划水10小时,竟然让我独自完成一个电商支付宝小程序,哈哈哈哈哈。不过,本来没做实质性项目的我,怎么会畏惧,怎么能退缩,生死看淡,不服就干!谁给我的自信?开源社区啊!作为“资深”的Copy码渣,接到任务我就在github开始寻符合需求的demo,皇天不负有心人,我把github翻了个遍,收获寥寥无几,各位大佬有啥支付宝小程序开源的项目请一定推荐给我,Copy选不中对象,就无法愉快地进行Paste。为了快速交付,经过对比选用@tumobi大佬的Nideshop“全家桶”,于是就有了这次借助Tarotaro convert转化微信小程序为支付宝小程序的经历。在我看来,我写不出如此出色的开源项目,倘若我能借助这些项目快速完成自己的工作,享受开源带来的乐趣,对于现阶段的我而言,足矣!(绝逼不敢相信,从业多年的程序员依旧是这么low!)
【Copy攻城狮日志】借助Taro暴改Nideshop实现电商支付宝小程序雏形
(图片来源于网络)

环境准备

工欲善其事必先利其器。9102年了,还有谁在用notepad写代码?当然,对于我们前端而言,谁的电脑没装个nodegitvscode之类的软体?如果您还没装的话,赶紧装吧,装完您就会嘿嘿嘿,对于我而言没有ndoe我无法工作,没有前端开发环境,我就不快乐。
【Copy攻城狮日志】借助Taro暴改Nideshop实现电商支付宝小程序雏形
(图片来源于网络)

  • 在您的平台上下载 Node.js 源码或预编译安装包,然后即可马上进行开发。去下载
  • git--distributed-is-the-new-centralized。去下载
  • 小程序开发者工具定位于「一站式小程序研发工具」,专门为小程序开发打造,提供了项目管理、编码、调试、真机测试等功能。去下载
  • 其他的好像也没啥了,当年好像我的还装了Python|jJava|Android等环境,那是2016年的事了追忆,现在看来很傻很天真,其实没必要。

Copy进行时

Taro 可以将你的原生微信小程序应用转换为 Taro 代码,进而你可以通过 taro build 的命令将 Taro 代码转换为对应平台的代码,或者对转换后的 Taro 代码进行用 React 的方式进行二次开发。之前一直在期待taro的这个功能,虽然不会React,也要尝试一下,也希望通过这些实践更加了解React并好好学习,从我接触的内容来说,React是前端开发必备的技术栈。

Taro安装

    /** Quick Start With NPM Or Yarn **/
        $ npm install -g @tarojs/cli
        $ yarn global add @tarojs/cli

nideshop-mini-program下载

    git clone https://github.com/tumobi/nideshop-mini-program.git
    cd nideshop-mini-program

转化为taro

taro convert

通过以上步骤可以得到一个taroConvert的文件夹,就算暂时成功的了。
【Copy攻城狮日志】借助Taro暴改Nideshop实现电商支付宝小程序雏形

安装依赖

cd taroConvert
npm i

对于大多数前端项目来说,现阶段不可避免的问题是可能一个不算复杂的项目会依赖上百个npm包,也正是因为这些包,大大解放了生产力,一定程度上提高了开发效率。当然,如同硬币有两面,伴随着便捷高效的同时也带来了一定的安全风险。可能大厂都是自己造轮子吧!
【Copy攻城狮日志】借助Taro暴改Nideshop实现电商支付宝小程序雏形

打包成支付宝小程序

npm run build:alipay

理想状态是可直接打包成dist的,but……
接下来就捋一捋存在的问题,为什么要手动修改一些问题?

为什么要暴力修改

首先回到taro的官方文档看下 taro convet会遇到哪些坑

  • 在小程序 IDE 显示 _createData 错误☞了解
    这里我们好像暂时没遇到这个问题,也不知道是哪个小程序IDE会有如此问题,先忽略了。
  • 转换 wxParse 报错不存在文件☞了解
    这个问题我们要及时改正,在执行taro conver前先把wxParse.wxml中46行到128行的wxParse1修改为wxParse0
  • 不支持 relations 和 Behavior了解
    这个问题我们代码里好像没有这些组件,暂时忽略
  • 转换 wepy 文件不成功了解
    这个问题我们肯定不存在,因为这个项目没有使用wepy,继续忽略。

现在看来,以上问题貌似都不存在,那么我们先回到这个报错
【Copy攻城狮日志】借助Taro暴改Nideshop实现电商支付宝小程序雏形
凭我多年的copy经验,一定是文件不存在或者文件引用路径有问题。不慌,对比了原文件taro convert之后的taroConvert目录里边的wxParse,的确发现了小问题:wxParse目录下的文件缺失,除了wxParse.js过来了,其他的都没有被转换。那就暴力一回,使出我的Copy大法,手动转换过去,并修改几处引用的相对路径,继续build。
接下来,在支付宝小程序开发者工具中打,不出意外能跑起来一个电商支付宝小程序雏形。
github地址☞☞nideshop-alipay by taro convert

以上是我这个Copy攻城狮对使用taro convert转换原生微信小程序为支付宝小程序的一次微不足道的实践。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
美凌格栋栋酱 美凌格栋栋酱
6个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Wesley13 Wesley13
3年前
UIWebView长按保存图片和识别图片二维码的实现方案(使用缓存)
0x00需求:长按识别UIWebView中的二维码,如下图长按识别二维码0x01方案1:给UIWebView增加一个长按手势,激活长按手势时获取当前UIWebView的截图,分析是否包含二维码。核心代码:略优点:流程简单,可以快速实现。不足:无法实现保存UIWebView中图片,如果当前We
Stella981 Stella981
3年前
Python Challenge Level 18
初学Python,挑战一下流行的PythonChallenge,很不幸,卡在了18关~~被字符字节码之间的转换搞得焦头烂额,不过终于搞定了还是很happy的~~~主要的问题就是16进制形式的字符如何转成字节码(注意:不是encoding)如:\'89','50','4e','47','0d','0a','1a','0a','00
Wesley13 Wesley13
3年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Stella981 Stella981
3年前
Github标星5300+,专门为程序员开发文档开源管理系统,我粉了
!(https://oscimg.oschina.net/oscnet/a11909a041dac65b1a36b2ae8b9bcc5c432.jpg)码农那点事儿关注我们,一起学习进步!(https://oscimg.oschina.net/oscnet/f4cce1b7389cb00baaab228e455da78d0
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
PHP创建多级树型结构
<!lang:php<?php$areaarray(array('id'1,'pid'0,'name''中国'),array('id'5,'pid'0,'name''美国'),array('id'2,'pid'1,'name''吉林'),array('id'4,'pid'2,'n
Wesley13 Wesley13
3年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表:时辰时间24时制子时深夜11:00凌晨01:0023:0001:00丑时上午01:00上午03:0001:0003:00寅时上午03:00上午0
Stella981 Stella981
3年前
JVM 字节码指令表
字节码助记符指令含义0x00nop什么都不做0x01aconst\_null将null推送至栈顶0x02iconst\_m1将int型1推送至栈顶0x03iconst\_0将int型0推送至栈顶0x04iconst\_1将int型1推送至栈顶0x05ic