关于Taro

京东- 凹凸实验室
Taro 是⼀套遵循 React 语法规范的 多端开发 解决⽅案。
现如今市⾯上端的形态多种多样，Web、React-Native、微信⼩程序等各种端⼤⾏其道，当业务要求同
时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然⾮常⾼，这时候只编写
⼀套代码就能够适配到多端的能⼒就显得极为需要。
使⽤ Taro，我们可以只书写⼀套代码，再通过 Taro 的编译⼯具，将源代码分别编译出可以在不同端
（微信/百度/⽀付宝/字节跳动/QQ/京东⼩程序、快应⽤、H5、React-Native 等）运⾏的代码。

快速开始
快速开始⽂档：https://taro-docs.jd.com/taro/docs/GETTING-STARTED.html
node 环境（>=8.0.0）

CLI ⼯具安装

⾸先，你需要使⽤ npm 或者 yarn 全局安装 @tarojs/cli ，或者直接使⽤npx:

# 使⽤ npm 安装 CLI
$ npm install -g @tarojs/cli
# OR 使⽤ yarn 安装 CLI
$ yarn global add @tarojs/cli
# OR 安装了 cnpm，使⽤ cnpm 安装 CLI
$ cnpm install -g @tarojs/cli

项⽬初始化
使⽤命令创建模板项⽬

$ taro init myApp

项⽬⽬录结构
!"" dist 编译结果⽬录
!"" config 配置⽬录
| !"" dev.js 开发时配置
| !"" index.js 默认配置
| #"" prod.js 打包时配置
!"" src 源码⽬录
| !"" pages ⻚⾯⽂件⽬录
| | !"" index index ⻚⾯⽬录
| | | !"" index.js index ⻚⾯逻辑
| | | #"" index.css index ⻚⾯样式
| !"" app.css 项⽬总通⽤样式
| #"" app.js 项⽬⼊⼝⽂件
#"" package.json

 ⼊⼝⽂件
 ⼊⼝⽂件默认是 src ⽬录下的 app.js 。

项⽬组织
以下⽂件组织规范为最佳实践的建议
所有项⽬源代码请放在项⽬根⽬录 src ⽬录下，项⽬所需最基本的⽂件包括

  • ⼊⼝⽂件 以及 ⻚⾯⽂件
  • ⼊⼝⽂件为 app.js
    ⻚⾯⽂件建议放置在 src/pages ⽬录下
    ⼀个可靠的 Taro 项⽬可以按照如下⽅式进⾏组织

!"" config 配置⽬录
| !"" dev.js 开发时配置
| !"" index.js 默认配置
| #"" prod.js 打包时配置
!"" src 源码⽬录
| !"" components 公共组件⽬录
| !"" pages ⻚⾯⽂件⽬录
| | !"" index index ⻚⾯⽬录
| | | !"" banner ⻚⾯ index 私有组件
| | | !"" index.js index ⻚⾯逻辑
| | | #"" index.css index ⻚⾯样式
| !"" utils 公共⽅法库
| !"" app.css 项⽬总通⽤样式
| #"" app.js 项⽬⼊⼝⽂件
#"" package.json

微信⼩程序转taro
https://taro-docs.jd.com/taro/docs/taroize.html
微信原⽣⼩程序转 Taro 的操作⾮常简单，⾸先必须安装使⽤ npm i -g @tarojs/cli 安装 Taro 命令
⾏⼯具，其次在命令⾏中定位到⼩程序项⽬的根⽬录，根⽬录中运⾏：
⼩程序的⽬录，不是云函数的

$ taro convert

即可完成转换。转换后的代码保存在根⽬录下的 taroConvert ⽂件夹下。你需要定位到
taroConvert ⽬录执⾏ npm install 命令之后就可以使⽤ taro build 命令编译到对应平台的代
码。
把转换后的代码⽬录，粘贴到taro⼩程序的src⽬录
进⼊taro⼩程序⽬录的⼊⼝ app.js/app.jsx，添加⽬录⻚⾯

class App extends Component {
 config = {
 pages: [
 "pages/booksList/booksList",
 "pages/book/book",
 "pages/index/index"
 ],
 ...
 cloud: true
 }

⾥⾯会含有微信⼩程序和taro的混合语法，需要安装

npm i @tarojs/with-weapp

就可以在taro⾥⽀持微信⼩程序的语法了。

taro-UI

依赖taro脚⼿架
进⼊项⽬⼩程序⽬录执⾏

npm install taro-ui

使⽤ Taro UI

// page.js
import { AtButton } from 'taro-ui'
// 除了引⼊所需的组件，还需要⼿动引⼊组件样式
// app.js
import 'taro-ui/dist/style/index.scss' // 全局引⼊⼀次即可

美化图书列表⻚

import { AtCard } from "taro-ui";
class _C extends Taro.Component {
 config = {
 onReachBottomDistance: 100
 };
 render() {
 const { books } = this.data;
 return (
 <Block>
 <Text>mp/pages/booksList/booksList.wxml</Text>
 {books.map((item, index) => {
 return (
 <AtCard extra={index} title={item.title} thumb={item.image}>
 {item.summary}
 </AtCard>
 );
 })}
 </Block>
 );
 }
}

⼩程序⽀付

微信⽀付发起API⽂档：
https://developers.weixin.qq.com/miniprogram/dev/api/open-api/payment/wx.requestPayment.h
tml

wx.requestPayment(Object object)
...
wx.requestPayment({
 timeStamp: '',
 nonceStr: '',
 package: '',
 signType: 'MD5',
 paySign: '',
 success (res) { },
 fail (res) { }
})

⽀付所需要⽤到的配置：
https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=3_1#

  • APPID：appid
    appid是微信⼩程序后台APP的唯⼀标识，在⼩程序后台申请⼩程序账号后，微信会⾃动分配
    对应的appid，⽤于标识该应⽤。可在⼩程序–>设置–>开发设置中查看。
  • 微信⽀付商户号：mch_id
    商户申请微信⽀付后，由微信⽀付分配的商户收款账号
  • API密钥：key
    交易过程⽣成签名的密钥，仅保留在商户系统和微信⽀付后台，不会在⽹络中传播。商户妥
    善保管该Key，切勿在⽹络中传输，不能在其他客户端中存储，保证key不会被泄漏。商户可
    根据邮件提示登录微信商户平台进⾏设置。也可按以下路径设置：微信商户平台
    (pay.weixin.qq.com)–>账户设置–>API安全–>密钥设置
  • Appsecret: secret
    AppSecret是APPID对应的接⼝密码，⽤于获取接⼝调⽤凭证时使⽤。

字段解释：

  • AppID （个⼈号不可以）
    申请⼩程序账号⽂档：https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter
    =7_11&index=2
    ⼩程序申请认证
    wx.requestPayment(Object object)
    …
    wx.requestPayment({
    timeStamp: ‘’,
    nonceStr: ‘’,
    package: ‘’,
    signType: ‘MD5’,
    paySign: ‘’,
    success (res) { },
    fail (res) { }
    })
    档：https://developers.weixin.qq.com/miniprogram/introduction/#%E5%B0%8F%E7%A
    8%8B%E5%BA%8F%E7%BB%91%E5%AE%9A%E5%BE%AE%E4%BF%A1%E5%BC%80%E6
    %94%BE%E5%B9%B3%E5%8F%B0%E5%B8%90%E5%8F%B7
  • 商户号
    商户平台申请地址：https://pay.weixin.qq.com/index.php/core/home/login?return_url=%
    2F
    微信⽀付商户号，获取商户号和商户密钥在微信⽀付商户管理平台中，【账户中⼼】→【商户信
    息】 下可以获取微信⽀付商户号。
    在这里插入图片描述
    在【账户中⼼】 ‒> 【API安全】 下可以设置商户密钥
    在这里插入图片描述
    ⼩程序⽀付发起流程：
    https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=23_9&index=1#menu1.1
    举个栗⼦:
    ⽤户⼩明在某电商⼩程序上购买⼀块肥皂，从浏览、下单到⽀付经历了什么样的过程呢？
  1. 打开电商⼩程序，搜索浏览到某雕肥皂，点击查看详情后，发现⼤⼩、丝滑程度都很合适，点击直接下单
  2. 肥皂的价格：0.01元
  3. wx.login获取⽤户临时登录凭证code，发送到后端服务器换取openId
  4. 在下单时，⼩程序需要将⼩明购买的商品Id，商品数量，以及⼩明这个⽤户的openId传送到服务器
  5. 服务器在接收到商品Id、商品数量、openId后，⽣成服务期订单数据，同时经过⼀定的签名算法，向微信⽀付发送请求，获取预付单信息(prepay_id)，同时将获取的数据再次进⾏相应规则的签名，向⼩程序端响应必要的信息(必须字段信息将在下⽂进⾏详细说明)
  6. ⼩程序端在获取对应的参数后，调⽤wx.requestPayment()发起微信⽀付，唤醒⽀付⼯作台，进⾏⽀付

云开发⽀付
博客：
1.借助⼩程序云开发实现⼩程序⽀付功能
https://www.jianshu.com/p/ddccf5f95e8c
2.⼩程序⽀付003～借助云开发10⾏代码快速实现⼩程序⽀付
https://blog.csdn.net/qiushi_1990/article/details/106679387
代码发布
https://developers.weixin.qq.com/miniprogram/introduction/#%E6%8F%90%E4%BA%A4%E5%AE
%A1%E6%A0%B8

Logo
开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

操作系统大会&openEuler Summit 2024参会指南，请查收！

avatar 开放原子开发者工作坊

推动工业软件核心技术攻关，开源工业软件算法集成大赛正式启动！

推动工业软件核心技术攻关，开源工业软件算法集成大赛正式启动！

avatar 开放原子开发者工作坊

第二届openEuler生态大会（中国·湖南）成功举办

10月30日，第二届openEuler生态大会（中国·湖南）成功举办。

avatar 开放原子开发者工作坊