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

咱们研制开源了一款根据 Git 进行技能实战教程写作的东西，咱们图雀社区的一切教程都是用这款东西写作而成，欢迎 Star 哦

假如你想快速了解怎么运用，欢迎阅览咱们的 教程文档 哦

本文由图雀社区成员 pftom 写作而成，欢迎加入图雀社区，一起创造精彩的免– – h K – 9 * ! {费技能教程，予力编程职业发展。

假如您觉得{ V R咱们写得还不错，记住 点赞 + 关注 + 评论 三连，鼓舞咱们写出更好的教程

小程序世界纷争不断，巨型 App 都在纷纷构建自己的小m . g l ( 0 f + B程序流量进口，希望在造福商家、用户的同时，也能稳固自家流量壁垒，咱们已经熟知了微信小程序、支付宝小程序，咱们或许还知道已D ) & 3 l y经有了i N &头条小程序，QQ 轻运用等，今日为大家带来的是一款新式小程序，是由电商巨头京东行将发布的一款小程序，电商巨头的小程序又会为我国互联网带来怎s M w – 0 R么样的改变了？让咱们拭目而待吧！而咱们今日将带大家运用 Taro 来编写京东小程序，并完成能够发文章的的多页面博客小程序。

初始化项目代码

咱们将运用同归于京东凹凸实验B R = . 3 @ 9室团队研制开源的多端统一开发解决方案 — Taro 来开发咱们的京东小程序。首先咱们来看一看终究的完成作用：

预备环境

手动初始化项目

保证你装置了 Node 开发环境，没有请参阅图雀社区别的一篇 Node.js 文章，里边有完善的 Node.js 环境装备。

装置了最新的 Node.js 环境之后，咱们运用 Node 装置时自带的包管: ` n & @ ;理东西 Npm 来创立一个 Taro 项目，翻开终端，运转如下指令：

$ npx @tarojs/cli init jd-mp

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

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

yarn install v1.21.1
info No lockfile found.
[1/4] Resolving packages...
[2/4] FetchinH T k  u M /g packages...
[3/4] Linking dependencies...
[4/4] Bub 3 iilding ; X y m Z ; 6 k fresh packages...
successm ^ V { 7 ` U t [ Saved lockfile.
Done in 1[ z 5 m w W z58.43s.
创立项目 jd-mp 成功！
请进入项目目录 jd-mp 开端工作吧！

能够看到，U Q S我用了 158.43s ，所以初始项目的进程或许有点长，请耐心等候，假如终究你没有看到终端呈现如上的字样，那么你或许遇到了问题，y 2 c C J 0 Y能够拜访 Taro 的论坛去寻求解答。

提示

经过上面的指令初始化项目之后，默许是没有生成 .gitignore 文件的，这会导致你的版本体系中多了很多 node_modules/** 下面的文件，所以咱们需p r D – L C 3求手动在初始化好的 jd-mp 项目根目录下增加一个 .gitignore 文件，并增加对应的规则如下：

node_modulx ] oes # 忽略 `nodeq 2 6 X k j z {_modu} 8 = , { D gle7 O Js` 下面的文q P ] X S ` ~ } 1件
dist # 忽略之后构建项目生成的目录

运用预备好的代码

假如你装置了 Node 环境，但是不想或者自己初始化项目是遇到了问题，那么你能够 Clone 一下咱们为你预备的初始项目代码，之后跟x c ~ 1 q `着教程对照着这份初始代码进行改进就能够啦！

假如你偏心 Github，那么能够运转H – * d 4如下指令来获取初始代码：

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

假如你偏心 Gitee，那么能够运转如下指令来获取初始代码：

$ git clone https://gitee.co= q N Wm/tuture/jd-E w C 4 )miniprogram.git

与自己运用指令初始化 Taro 项目不同，经过 Clone 咱们为你预备好的代码，你需求手动装置依靠，翻开终端，输入如下指令装置依靠：

$ cd jd-miniprogram && npm install

好的，经过上面的过程，咱们就预备好了初始代码，接下来就需求你实践动手写代码了，是不是有点期待呢？咱们立刻就能够测验开发一个京东小程序了！

装备 JDk A L 5 @ B 开发环境

装置 JD 的运转脚本

等等，由于京东小程序才刚刚出来，还没有z C t 5 v k 正式开端推行，所以 Taro 初始化项目的脚本里没有生成京东小程序的敞开依靠，所以咱们需求手动装置一下对应的敞开依靠( k Y % z，翻开指+ . I ) L令行，在 jd-mp 项目根目录下执行如下指令装置：

$ npP : r ? Y $ qm install @tarojs/taro-jd

装置好之后，咱们还需求在 packagC j ^ s h ( P me.json 中增加如下两条敞开京东小程序项目的脚本：

{
"name": "jd-mp",
"version": "1.0.0",
"private": true,
"descriptionL v 3 Y p . q x": "第一个京东小程序",
"templateInfo": {
"name": "defaulz f J l % 3 F ;t",
"typescript": fj G 4 S a /alse,
"css": "sass"
},
"scripts": {
// ...
"build:quickapp": "taro build --type quickapp",
"build:jd":1 u 1 @ o X d "taro build --type jd",
// ...
"dev:quickapp": "npm run build:qui$ Y & T Lckapp -- --watch",
"dev:jd": "npm run build:jd -- -1 | g $ - H-watch"
},
"authU D 8 [ r N ) :or": "",
"G y F * {license": "MIT",
"dependencies": {
// ...
"@tarojs/taro-jd": "l ] C v B^2.1.5",
// ...
},
// ...
}

装置并增加对应的指令之后，咱们就能够在终i Q # 2 }端项目根目录执行如下指令来运转咱们的京东小程序：

$ npx taro built _ h 1 - P jd --type jd --watch

留意要加上 --watch 参数，这样当咱们在编辑器（如^ % 2 VSCode）修正内容并保存之后，项目m p 6会自动编译更新，然后刷新开发者东西就能够查看修正后的作用，上面这条指令会实践运转咱们 package.json 里边增加的脚本指令：

"dev:jd": "npm run build:jd -- --watch"

注册京东小程序

当进行了上面的装备之后，并把项目开起来8 ~ [ 8 5 O / v D之后，这个时分咱们就需求去注册一个京东小程序x Y L j + (，拿到对应的小程序; @ v k S e X N的 AppId ，你能够拜访京东小程序官网，根据过程注册小程序，并创立项目，然后取到项8 F h g F b J目的 AppId ，相似如下：

然后下载京东开发者东西，新建一个小程序项目，并输入拿到的 AppId ：

并在京东开发者里边点击上面圆圈圈出的那个文件夹图标，翻开上面创立的 jd-mp 项目，不过请留意，咱们需求选中项目里边编译好的 dist 目录：

这个时分，你的项目运转着，翻开之后，你会在京东小程序开发者东西里边看到如下作用：

当然上面这个指示的作用是我终究写好的项目，你初次翻开应该能够看到一个 Hello World

编写第一个 JD 组件并装备款式

一切预备就绪，能够开端编写咱们的京东小程序了！

编写第一个 JD 组A q G Y m C件

Taro 小程序 2.x.x 暂时支撑 React 来写小程序，而 Taro 3.x.x 答应 React，Vue 和 Nerve 来写，之后咱们图雀F $ G $ Z 6 社区会出 Taro 3.x.x 的教程，让 Vue 的读者也能够运用 Taro 来写小程? X r j 0 6序。

已然现在只能用 React，那么就让咱们新潮一点，运用 React Hooks 来简化组件编写，翻开 src/pages/i0 } h ^ ~ t G &ndex/index.jsx ，将类组件重构成函数式组件，并增加一点发帖相~ z ` _ ~关的内容：

import Taro from "@tarojs/taro";
import { View, Button, Textarea } from "@tarojs/components";
import "./index.scss";
export default functD y e E 0 W v Fion Index() {
return (
<View className="index">
<TeD B ;  Sxtarea
placeholder="编撰优质教程..."
className="post-input"
autoHeight
/>3 b Y . W k ? t /;
<Button className="po? ! B 9 ) j ~ jst-i q v |  . = Ebutton">宣布</Button>
</View>
);
}
Index.config = {
navigationBarTitleText: "主页"
};

能够看到咱们将p – i p Q类组件改成了函数式组件，并从 @tarojs/components 里边导入并增加了两个组件 Text& M E |area 和 Button ，用于帖子表单的内容输入和宣布。

接着，咱们将之前的类特点 config 移动到 Index.config 上面来界说，这个 config 只在页面级组件里边存在，用于界说页面的一些特点，比方这个的 navigationBarTitleText 便是此页面的标题，在小程序里边代表顶部的标题：

为组件^ J = .增加款式

当咱们增加了上面两个组件之后，组件的原生款式开起来比较普通，为了让咱们的小程序愈加专业一点，咱们给其加点款式，其实运用 Taro 开发京东小程序时，写款式和咱们x o m M H u平时开发 Web 运用差不多，这儿咱们运用了 SCSS 来写款式，在组件里边界说了对应的类名并导入了 CSS 文件，之后D x f Q V t x V ^再 CSS 文件里边写款式。

翻开 src/pages/index/index.scss ，在其间增加对应的款式文件如下：

.index {
display: flex;
flex-direction: column;
ali| E O 3 d pgn-; / sitems: centee 2 x o 4 x 5 -r;
}
.pov 9 D 8 M Kst` . L + B-input {
margin-top: 24px;
background: #fff;
width: 80%;
min-height: 80px;
padding: 16px 30px;
border: 1px solid #eee;
font-* p z ; [ M Esize: 14px;
}
.post-button {
margin-top: 24px;
width: calc(80% + 60px);
border-radius: 0;
background-color: #00bc87;
color: white;
}

当增加了款式之后，咱们的运用变成了如下样子：

怎么样，是不是变得有点专业了呢？

运用 React Hooks 并处理事情

在编写了第一个组件之后，咱们测验来处理咱们帖子的内容输入，这个时分就涉及到事情处理了，咱们需求将之前在 src/pages/index/index.jsx 里边界说的 TextArea 做成 “受控组件”，咱们运用 React Hooks 供给的 useState 来做到这一点。

翻开 src/pages/i/ b ` t X z h Mndex/index.jsx，对其间的内容作出对应的修正如下：

import Taro, { us8 { { ` . h geState } from "@tarojs/taro";
import { View, Button, Textarea } from "@tarojs/components";
import "./index.scss";
export default funV T T ( ) { bction Index() {
const [post, setPost] = useState("");
function handleChange(e) {
setPost(e.target.valuP [ : 1 Ae);
}
return (
<View cb % Q r MlassNamX 4 ` oe="indexQ # f h 9 B $">
<Textarea
placeholder="编撰优质教程..."
className="post-input"
value={post}
onInE S ~ iput={handleChange}
autoHeigs q a 3ht
/>
<But& I tton className="post-button">宣布</Button>
</View>
);
}
Index.config = {
navigationBarTitleText: "主页"
};

能够看到，上面咱们导入了 useState 钩子，然后调用生成了一个 post 和 setPosto q x ( 2 f ，接着咱们界说了一个 handleChange 函数来处理 Textarea 的 onInput 事情，接纳用户输入来设置 post 值，并经过将 post 设置e m S回 Textarea 的 value 来达到 “受控组件” 的目的。

组件组合和处理 UIi d | ^ h ~ I p 3 反应

当咱们的内容多起来之后，在一个组件里边放太多内容会导致逻辑不清晰，所以咱们测验新建组件来抽出归于它的一部分逻r ~ y 5辑。接下来咱们立刻要处理帖子宣布逻辑) ] ^ Q ! g c 0 J，而且还要展现宣布之后的作用，所以咱们需求额定新建一个组件来展E E p u & ( m现帖子逻辑。

新建组件

在 src 目录先新建 comD k M Oponents 文件夹，然后^ N – ( T {在里边新建 PostCard 文件夹，接着在这个文件Z J ! b A t ~ : i夹里边建一个 index.jsx 文件，用于放置组件逻辑和 UI，咱们在这儿组件里边编写如下逻辑：

import T] _ ? y s 0 p O karo from "@tarojs/tE ( ! # l yaro";
import { View, Text, Id % 2 Z w ; D Kmage }J F u ! from "@tarojs/components";
import "./styles.scss";
export default function PostCard(props) {
const { post } = props;
reture { Qn (
<View className="post"&U J ( [gt;
<Text className="postK ^ ! 0 /-nG Q V s  1ame"&g} O O U ] h Dt;{post}</Text>
</View{ | A t  k N G>
);
}

能够看到咱们创立了一个 PostCard 函数& # X ( p | T j式组件，然后渲染了其父组件传下来的参数 post ，而且导入了一个 styles.scss 文件，咱们将立刻来创立它。

在 src/components/PostCard 文件夹下) C h创立一个 styles.3 = }scss ，并编写如下内容：

.post {
width: cald i Hc(80% + 60px);
margin: 0 auto;
padding: 32px 0;
border-bottom: 1px solid #eee;
}
.post-name {
font-size: 20px;
font-weight: 600;
width: 100%;
}

处/ S i = | d理 UI 反应

当编写了渲染帖子的组件之后，咱们回到 src/pages/| f , 8 Qindex/index.jsx 组件，来导入咱们写好的 PostCard 组件，并同时d V O ] ^ 9处理帖子宣布逻辑：

import Taro, { useState } from "@tarojs/taroD m I q 9 A # D";
import { View, Button, Textarea } from "@tarojs/components";
import PostCard from "../../components/PE } PostCi T A ? G n u y Eard";
import "./index.scss";
exp~ o } x !ort default function Index() {
const [post, setPost] = useState("");
const [postList, setPostList] = useState([]);
function handleChange(e) {
setPost(e.target.value);
}
function handleSubmit() {
console.log("hK X 7 C X - ello world", post);
if (!Z i ` l J y $post) {
Taro.showToast({
title: "内H 5 R q x容不能为空",
icon: "none"
});
} else {
Taro.showToast({
tt ) d V $ z ( b !itle:X E = b 3 . G = 0 "宣布成功",
icon: "success"
});
setPost("` N 7 9 5 H ^ ");Q 2 w X / 5 Q
setPostList(postList.concat(post));
}
}
return (
<View className="index">
<Textarea
placeholder="编撰优质教程..."
classNamer n g  r +="post-input"
value={post}
onInput={handleChange}
autoHeight
/>
<Button className="post-button" onClick={handleSubmit}>
宣布
</Button>
<View className="post-box">
{postList.map(postItem => (
<h  f  aPz r xostCard post={postItem} />
))}
</View>
<h 7 ,  ;;/View>
);
}
Index.config = {
navigationBarTitleText: "主页z % S $ . b A ]"
};

能够看到上面咱们运用 useState 钩子创立了一个新的状况 postList ，接着咱们在 Button 上界说了一个 onClick 的处理函数 handleSubmit ，在这个函数里边，咱们判断输入的 post 是否为空，假如为空提示用户不能够发布，假如有内容，则提示用户新帖子发布成功，并将 post 增加到 postList 中，以及i T W | ! H K t 8置空 post 内容，等候下次输入。

留意到这儿咱们运用 Taro.showToast API 来提示用户，Tarog X M L F D 9 n 还有很多便利的 API，比方弹出模态框等，能够参阅文档。

提示

这儿额定的 conl K / ) r zsb ? A lole 句子能够忽略，归于开发时的调试句子。

终究，咱们加{ u e一点款式来让咱们的界面愈加专业，翻开 src/pages/index/index.scss ，修正内容如下：

.index {
display: flex;
flex-direction:- @ ` x C a d column;
align-items: center;
}
.post-input {
margin-top: 24px;
bacS 7 b 3 kground: #fffl p 8 G - {;
width: 80%;
min-height: 80px;
padding: 16px 30px;d U $ 3 N 5
border: 1px sa  D = #olid #ee8 . !  !e;
font-size: 14px;
}
.post-button {
margJ o qin-top: 24px;
width: calc(80% + 60px);
border-radius: 0;
backgroP 7 q ` jund-{ P s 9 V 0 ? &color: #00bc87;
color: white;
}
.post-box {
width: 100%;
margin-top: 24px;
}

大功告成！咱们现在能够宣布帖子并展现作用了，这个时分测试你的京东小程序，应该能够看到如下作用：

咱们成功的处I M Q * J E理了组件的组合，而且在宣布帖子的时分运用 Taro 的 API 给与了用户 UI 反应。

多页面与R | ( I路由跳转

经过上面的= L ? – Z C M 6 l过程，咱们能够展现帖子列表，但是咱们都知道，帖子的内容或许很长，所以咱们需求额定的页面来展现帖子概况，所以咱们接下来将新建页面并运用 Taro 供给的 API 进行多页面的跳转。

新建页面

咱们在 src/pages 文h V k 1 ] U 0 7件夹下建一个 post 文件夹，并在里边建y ? m u $ : Q m %一个 post.jsx 文件，并编写对应的内f 2 % v容如下：

import Taro, { useRouter } f , z vrW * 2 : = 4 C ) 9om "@tarojs/taro1 J N S g A Z";
import { View, Text } from "@tarojs/components";
import "./post.scss";
export default function Post() {
const { pO Z q 7 L R *arams } = useRouter();
const { post = "" } = params;
return (
<VieM & X D w { j +w classNX 1 - 9 B `ame="post">
<Text className="post-nH { Came">{post}</Text>
</Viewc , C O q M z>
);
}
Post.config = {
navigationBarTitleText: "帖子页"
}A W * B _ (;

能够看到上面咱们创立了一个 Post 函数式组件，然后增加了 config 装备，在标题改为 “帖子页”，接着咱们运用 Taro 供给的 useRouter 钩子来获取路由传递过来的参数，取到参数里边的 post 并渲染。

留意

一般情况下，咱们是经过路W ` P O } r ` }由传递 postId ，然后在帖子概况里边建议 HTTP 恳求获取帖子概况$ j a E } ; ] D，这儿为了演示京东小程序的才能，所以简化了写法。

注册页面

当创立了新页面之后，咱们还要告知运用咱们创立的这个页面，也便是在运用注册这` 0 /个页面，翻开 src/app.jsx ，在对应 App 组件的 con6 a I Q i e C Lfig.pav - l )ges 特点里边增加刚刚创立的帖子 D / Q Y J *概况页的途径如下：

import Taro, { Component } from "@tarojs/taro";
import Index from "./page8 % ms/index";
import "./app.scss";
// 假如需求在 h5 环境中敞开 React Devtools
// 撤销以下注释：
// if (E }  {process.env.NODE_ENV !== 'production' && process.env.TARO_ENV === 'h5')  {
//   require('nerv-devtoolI u b ]s')
// }
class App extends Component {
componentDidMount() {}
componentDidShow() {}
componentDidHL  ( B C , 4ide() {}
componentDidCatchError() {}
config = {
pagesA = ^ S h I * m: ["pages/in- w x E  o R *dex/indeu C o a n } Ex", "pages/post/post" R 9 b I / z % U],
window: {
backgroundTextStyle: "light",
navigationBarBackgroundD ] ;  D k y f /Color: "#fff",
navigationBarTitleText: "WeChat",
navigationBarTextStyle:% S . "black"
}
};
// 在 App 类中的 render() 函数没有实践作用
// 请勿修正此函数
render() {
return <Index />;
}
}
Taro.render(<App />, document.getElementById("a^ b + j ( O 1 t ]pp"));

处理路由跳转

创立并注册了页面之后，咱们就能够在 src/componp = ( u 0ents/PostCard/index.jsx 组件里边处理点击帖子列表单个帖子的路由跳转了：

import Taro from "S p i o@tarojs/taro";
impo% C S q A . [rt {] F i L 1 W W 4 ViewZ L 0 k, Text }H M V 9 # { P from "@tarojs/components";
import "./styles.scss";
export default function PostCard(propz 4 ] 1 6 & W bs) {
const { post } = pro1 L a * E k , &ps;
func) e X 8 g ation handleClick()6 @ m 6 D {
Taro.navigateTo({
url: `/pages/post/post?post=${post}`
});
}
return (
<View className="post" onCl= G @ H c 6ick={handleClick}5 b * %>
<Text className="post-name">{post}</Text>( p u R;
</View>
)7 U ( v +;
}

能够看到，咱们新增了 onClick 事情的Z k m处理办法 handleClick ，并调用 Taro 供给的 navigateTo API 进行页面之间的跳转，更多页面导航的 API 能够参阅文档。

现在你能够在增加帖子之后，点击单个帖子，你会发现页面发作跳转到帖子概况页，并展现了帖子的内容：

增加 TabBar

处理了多页面的跳转，一个小程序还存P D D /在一些 TarBar 的需求，即底部有几个按钮进行多种类型的页面跳转，咱们也来开掘一下在京东小程序里边怎么增加 TabBar。

编写新 TabBar 页面

咱们首先来树立 TabBar 需求切换的别的一个G E q g 4 :页面，一般逻辑里边是 “我的” 页面，在 src/pages 目录下新建 mine 文件夹，B 7 B g | r N 然后在里边创立 mine.jsx 文件，编写对应的内容如下：

import Taro, { useRouter } from "@tarojs/taro";
import { VieN w 4 C 7 )w, Text,x y 4 Image } from "@tarojs/componenty = _ k  C J 1s";
import "./mine.scss";
import avatar from "../../images/avaN l q $ A A R G tara h 8 @ F q f.png";
export defau0 1 jlt function Minz 3 J 8 g Q ?e() {
return (
<b i A S Q d v D;View className="mine">G | K 4 n;
<Image src={avatar} classNamM v } [ % 9 Ce="mC , $ Z ~ ! G kine-avl { 2ata1 T Rr" />
<View className="slogan">
<Text className="slogan-name">
图雀社区：予力内容创造，加快技能传播
</Text>
</View>
< H R x Z n 4 N O;/VG _  h Jiew>
);
}
Mi) M r G 4 ? kne.config = {
navigationBarTitleText: "我的"
};

能够看到是咱们熟悉的函数式组件，而且 config 咱] l = c们设置了 “我的” 的标题，而且还在组件中渲染了一张图片和` ( o 1 | [标语，图片能够在项目中获取。1）Github 2）Gitee

接F _ Z o e @ 0 . 着咱们能够创立对应的款式文件，在 src/pages/mine/下创立对应的 mine.scss 文件，并编写如下的内容：

.mine {
padding-top: 40px;
display: flex;
fs D - f e g Y j nlex-direction: column;
align-items: center;
}
.mine-avatar {
width: 300px;
height: 300px;
border] c 0 k 1 `-radius: 50%;
}
.slogan {
margin-top w #: 247 y ; / u ~ hpx;
}
.slogY l /an-name {
font-size: 32px;
}

装备 TabG W d W ~ + x ~Bar

预备好了 TabBar 的第二个页面之后，咱们在 src/app.jsx 里边装备京东小程序的 TabBar：

import Taro, { CompoL x U W r F _nent } from "@tarojs/taro";
im/ 9 | E e 4port Index from ".1 7 {/pages/index";
import "./aB - K P /pp.scss] * N c = q & , M K Y l ) & +";
// 假如需求在 hC m #5 环境中敞开 React Devtoolsr d 6 u m h $ j m
// 撤销以下z X ? u z x a注释：
// if (procV _ sess.env.NODE_EN@ N ] vV !== 'production' && process.env.TAROF ) ! C b_ENV === 'h5')  {
//O p $   require('nerv-devtools')
// }
class App ex1 p c ` /tends Component* _ I H c {
cor m o ) n J vmponentDidMount() {}
componef E PntDidShow() {}
componentDidHid] I e 7e() {}
componentDidC} v q  0 atchError() {}
config = {
pages: ["pages/index/index", "pages/post/post", "pages/mine/mine"],
windowl A l d t b z n: {
backgroundTextStyle: "light",
navi] ~ # Z Z N ] WgationBarBackgroundColor: "#fff",
navigationBarTitl[ 6 t 7 / $eText: "WeChat",
naB ) y j avigationBL j AarTextStyle: "black"
},
tabBar: {
list: [
{
pagePath: "pages/index/index",
text: "主页",
iconPath: "./images/home.png",
selectedIconPath: "./images/homeSelected.png"
},
{
pagePath: "pages/mine/mine",
text: "我的",
iconPath: "./images/mine.png",
selectedIconPath: "./images/mineSelected.png"
}
]
}
};
// 在 App 类中的 render() 函数没有实践作用
// 请勿修正此函数u B 1 Y w D b 7
render() {
return <Index />;
}
}
Taro.render(<App />, document.getElementById("app"));

能? r ! s 5 o够看到，首先咱们在 config.pages 里边声明V J 5了 pages/mine/mine.jsx 的途径，然后咱们给 config 额定增加了一个 tabBar 特点，这个对象里边是一个 list 特点，然后在里边加入了两个 TabBar 页面的装备信息：

• pagePath 代表当时选中 TabBar 渲染的页面途径
• text TabBar 的展现标题
• iconPath TabBar 未选中时; 4 @展现的图标
• selectedIconPath TabBar 选中时展现的图标

更多 TabBar 的装备信息能/ t o p够参阅文档。用到的图标文件能够在项目中获取：1）Github 2）Gitee。

当装备好% 2 ] 8 Q 6 ) D Q上面的内容之后咱们应该能够在京东小程序开发者界面里边看到如下作用：

建议网络恳求

前面一切的都A q $ V )是了解小程序本地编写的一些内容，大多数运用还需求网络恳* x T求获取远程数据来进行展现，当然咱们的京东小程序尝鲜也不能漏掉这 u J f一点。

咱们翻开 src/pages/index/_ q {index.js7 ; @ . M Mx 文件，对其间的Q r C内容作出对应的修正如下：

import Taro, { useStu z + b H W eate, useEffect } from "@tan A W @ jrojs/taro";
import { View, Button, Textarea } from "@t; N 5 q i karojs/components";
import PostCard from5 7 ( i g [ 5 9 "../../components/PostCard";
import "./index.scss";
exu H ? 6 s & F m 0port default function Index() {
const [post, setPost] = useState(""C  T n });
c3 J , ( + : @ ?onst [postList, setPostList] = useState([]);
function handleChange(e) {
setPost(eH ! j @ y V.target.value)m 1 + E 8 v;
}
function handleSubmit() {
console.log("hello world", post);
if (!post) {
Taro.showToast({
title: "内容不能为空",
icon: "none"
});
} else {
Taro.showToast({
title: "宣布成功",
icon: "success"
});
setPost("");
setPostList(postList.concat(post));
}
}
useEffect(()I K ? B I i F u 8 => {
async functi^ e  5 6 5 j yon getPosts() {
try {
const res = await TaB f e D $ / E 3ro.request({
url:
"https://9ff4272f-ce60-4be6-9376-f9f462482edc.mocS M X M : i G o `k.pstmn.io/articles"
});
const postList = res.data.map(item => item.name);
setPost* Q d ` gList(postList);
} catch (err) {
console.log("err", err);
}
}
getPosA m  &ts(= / @ l);
}, []);
return (
<View className="indeK - ) S D W =x">
&3 a T , F  R r 4lt;Textarea
placeholder="编x e | & w . a s撰优质教程..."
classNa~ P ! : 1 o & Ome="post-input"
value={post}
onInput=9 n ) O{handl( e k D ; HeChange}
autoHeight
/>
<ButtonN I c = m z className="post-button" onCle J 7 $ F B P ?ic3  Gk={handlA ` R qeSubmit}>
宣布
</Butt- h Yon>
<View className="post-box">
{postList.map(postItem => (
<PostCard post={postItem} />
))}
</View>
</View>
);
}
Index.config = {
navigationBarTitleText: "主页"
};

能够看到，咱们导入了 useEffect 钩子，并在其间界说了一个异步 getPosts 函: 7 J K N V L X数，用于获取初始的帖子列表，接着咱们在这个函数中运用 Taro 的恳求 API Taro.request 来建议网络恳求，并将恳求到的数据进行处理更新B } X到 postList 中，关于更多恳求的 API 请参阅 Taro 文档。

当增加了上面内容之后，咱们能够收成如下的作用：

总结

经过这篇教程快速上手京东小程序开发，咱们能够发现得益于 Taro 的优秀跨端特性. t k _ / I w W，即使是最新刚推出的京东小程序也能够游刃有余的开发咱们需求的功能，这不禁让我想起了 Taro Next 发布之际，Taro 团队清晰的初心和任务：“降低开发成本，提高开发体验和开发功率”，不忘初心，牢记任务，这便是 Taro 团队拥抱变化的方P z _ { ~式！

想要学习更多精彩的实战n g , A k技能教程？来图雀社区L @ + ? 1 I # |逛逛吧。