一杯茶的时间，上手 Taro 京东小程序开发

我们研发开源了一款基于 Git 进行技术实战教程写作的工具，我们图雀社区的所有教程都是用这款工具写作而成，欢迎 Star 哦

如果你想快速了解如何使用，欢迎阅读我们的 教程文档 哦

本文由图雀社区成员 pftom 写作而成，欢迎加入图雀社区，一起创作精彩的免费技术教程，予力编程行业发展。

如果您觉得我们写得还不错，记得 点赞 + 关注 + 评论 三连，鼓励我们写出更好的教程💪

小程序世界纷争不断，巨型 App 都在纷纷构建自己的小程序流量入口，希望在造福商家、用户的同时，也能巩固自家流量壁垒，我们已经熟知了微信小程序、支付宝小程序，我们可能还知道已经有了头条小程序，QQ 轻应用等，今天为大家带来的是一款新型小程序，是由电商巨头京东即将发布的一款小程序，电商巨头的小程序又会为中国互联网带来怎么样的改变了？让我们拭目以待吧！而我们今天将带大家使用 Taro 来编写京东小程序，并完成可以发文章的的多页面博客小程序。

初始化项目代码

我们将使用同属于京东凹凸实验室团队研发开源的多端统一开发解决方案 – Taro 来开发我们的京东小程序。首先我们来看一看最后的完成效果：

准备环境

手动初始化项目

确保你安装了 Node 开发环境，没有请参考图雀社区另外一篇 Node.js 文章，里面有完善的 Node.js 环境配置。

安装了最新的 Node.js 环境之后，我们使用 Node 安装时自带的包管理工具 Npm 来创建一个 Taro 项目，打开终端，运行如下命令：

$ npx @tarojs/cli init jd-mp

运行上面的命令之后，你会看到终端有如下输出：

稍等一会，当终端出现如下字样时，就代表项目初始化成功啦！

yarn install v1.21.1
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 158.43s.

创建项目 jd-mp 成功！
请进入项目目录 jd-mp 开始工作吧！😝

可以看到，我用了 158.43s ，所以初始项目的过程可能有点长，请耐心等待，如果最后你没有看到终端出现如上的字样，那么你可能遇到了问题，可以访问 Taro 的论坛去寻求解答。

提示

通过上面的命令初始化项目之后，默认是没有生成 .gitignore 文件的，这会导致你的版本系统中多了很多 node_modules/** 下面的文件，所以我们需要手动在初始化好的 jd-mp 项目根目录下添加一个 .gitignore 文件，并添加对应的规则如下：

node_modules # 忽略 `node_modules` 下面的文件

dist # 忽略之后构建项目生成的目录

使用准备好的代码

如果你安装了 Node 环境，但是不想或者自己初始化项目是遇到了问题，那么你可以 Clone 一下我们为你准备的初始项目代码，之后跟着教程对照着这份初始代码进行改进就可以啦！

如果你偏爱 Github，那么可以运行如下命令来获取初始代码：

$ git clone https://github.com/tuture-dev/jd-miniprogram.git

如果你偏爱 Gitee，那么可以运行如下命令来获取初始代码：

$ git clone https://gitee.com/tuture/jd-miniprogram.git

与自己使用命令初始化 Taro 项目不同，通过 Clone 我们为你准备好的代码，你需要手动安装依赖，打开终端，输入如下命令安装依赖：

$ cd jd-miniprogram && npm install

好的，通过上面的步骤，我们就准备好了初始代码，接下来就需要你实际动手写代码了，是不是有点期待呢？我们马上就可以尝试开发一个京东小程序了！

配置 JD 开发环境

安装 JD 的运行脚本

等等，因为京东小程序才刚刚出来，还没有正式开始推广，所以 Taro 初始化项目的脚本里没有生成京东小程序的开启依赖，所以我们需要手动安装一下对应的开启依赖，打开命令行，在 jd-mp 项目根目录下执行如下命令安装：

$ npm install @tarojs/taro-jd

安装好之后，我们还需要在 package.json 中添加如下两条开启京东小程序项目的脚本：

{
   
  "name": "jd-mp",
  "version": "1.0.0",
  "private": true,
  "description": "第一个京东小程序",
  "templateInfo"