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

gnehc 发布于2019-08-23 14:54 / 2691人阅读

摘要：接下来，在支付宝小程序开发者工具中打，不出意外能跑起来一个电商支付宝小程序雏形。地址以上是我这个攻城狮对使用转换原生微信小程序为支付宝小程序的一次微不足道的实践。

↑开局一张图，故事全靠编↑

从一个需求说起

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

（图片来源于网络）

环境准备

工欲善其事必先利其器。9102年了，还有谁在用notepad写代码？当然，对于我们前端而言，谁的电脑没装个nodegitvscode之类的软体？如果您还没装的话，赶紧装吧，装完您就会嘿嘿嘿，对于我而言没有ndoe我无法工作，没有前端开发环境，我就不快乐。

(图片来源于网络)

在您的平台上下载 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的文件夹，就算暂时成功的了。

安装依赖

cd taroConvert
npm i

对于大多数前端项目来说，现阶段不可避免的问题是可能一个不算复杂的项目会依赖上百个npm包，也正是因为这些包，大大解放了生产力，一定程度上提高了开发效率。当然，如同硬币有两面，伴随着便捷高效的同时也带来了一定的安全风险。可能大厂都是自己造轮子吧！

打包成支付宝小程序

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 convert之后的taroConvert目录里边的wxParse,的确发现了小问题：wxParse目录下的文件缺失,除了wxParse.js过来了，其他的都没有被转换。那就暴力一回，使出我的Copy大法，手动转换过去，并修改几处引用的相对路径，继续build。
接下来，在支付宝小程序开发者工具中打，不出意外能跑起来一个电商支付宝小程序雏形。
github地址☞☞nideshop-alipay by taro convert

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

专线服务云服务器支付宝小程序攻城狮获客宝小程序支付宝电商电脑网站支付

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101315.html

【Copy攻城狮日志】CML之5分钟入门多端统一框架

摘要：开局一张图，故事全靠编是啥变色龙又是啥自从有小程序以来，小程序的第三方框架便孕育而生，从原始时代的只基于微信小程序多如今多端统一开发框架，可以说前端技术从年到年又发生了天翻地覆的变化。 Created 2019-4-6 21:57:17 by huqi Updated 2019-4-7 22:54:55 by huqi showImg(https://segmentfault.c...

MycLambert 2019-08-23 16:47 评论0 收藏0
【Copy攻城狮日志】踩坑小程序之can't read property 'of

摘要：根据当时的情境，是在微信开发者工具中删掉该小程序然后重新载入就解决了，大家给出的结论是微信小程序开发者工具的。 Created 2019-4-2 22:17:34 by huqiUpdated 2019-4-2 23:17:34 by huqishowImg(https://segmentfault.com/img/bVbqOLH?w=1526&h=818); ↑开局一张图，故事全靠编...

hsluoyz 2019-08-26 13:42 评论0 收藏0
Antmove 缘起 - 好用的小程序多端解决方案

摘要：目前支持哪些平台的搬家目前对外开放版本释放了微信小程序转支付宝小程序的功能，这也是我们在调研中发现需求最多的。从笔者的了解来看，微信小程序框架原理更接近于，而支付宝小程序更接近于。原文地址： https://ant-move.github.io/we... 蚂蚁搬家工具（Antmove）是一个小程序开发辅助工具，致力于解决小程序跨平台开发的难题，借助于 Antmove，你只需要编写...

crelaber 2019-08-26 10:32 评论0 收藏0
【Copy攻城狮日志】踩坑小程序之canvas的显示层级问题

摘要：依旧是很简单的需求，但是对于资深的攻城狮来说，除了布局，其他的就只能去了。特别是真机跑的时候，问题特别多。还是坑在基础不牢固，文档看得不深入，对小程序原生组件应该注意的事项把握不准，才会掉入这个非常基础的坑。 Created 2019-4-3 18:29:53 by huqiUpdated 2019-4-3 19:12:22 by huqi showImg(https://segmen...

Coly 2019-08-23 16:43 评论0 收藏0
【Copy攻城狮日志】Docker部署D2Admin 人人企业版

摘要：介于目前项目的前端开发基于人人企业版有了快狗团队的手摸手，很快就能用部署这样一个后台管理平台。构建镜像，部署静态资源这里借助获取镜像，通镜像作为基础来构建人人企业版镜像。本许可协议授权之外的使用权限可以从处获得。 Created by huqi at 2019-5-24 21:01:30 Updated by huqi at 2019-5-26 00:00:42 前言最近后端的小...

JessYanCoding 2019-06-28 17:20 评论0 收藏0