微信小程序转Taro  (转发https://nervjs.github.io/taro/docs/taroize.html

Taro 可以将你的原生微信小程序应用转换为 Taro 代码,进而你可以通过 taro build 的命令将 Taro 代码转换为对应平台的代码,或者对转换后的 Taro 代码进行用 React 的方式进行二次开发。

微信原生小程序转 Taro 的操作非常简单,首先必须安装使用 npm i -g @tarojs/cli 安装 Taro 命令行工具,其次在命令行中定位到小程序项目的根目录,根目录中运行:

$ taro convert

即可完成转换。转换后的代码保存在根目录下的 taroConvert 文件夹下。你需要定位到 taroConvert 目录执行 npm install 命令之后就可以使用 taro build 命令编译到对应平台的代码。

二次开发

假设已有一个转换后文件如下:

import { View } from '@tarojs/components'
import Taro from '@tarojs/taro'
import withWeapp from '@tarojs/with-weapp'
import './index.scss' var app = Taro.getApp() @withWeapp('Page')
class _C extends Taro.Component {
state = {} componentWillMount(e) {
var orderId = e.id
this.data.orderId = orderId
} componentDidShow() {
var that = this
Taro.request({
url: 'https://api.it120.cc/' + app.globalData.subDomain + '/order/detail',
data: {
token: Taro.getStorageSync('token'),
id: that.data.orderId
},
success: res => {
Taro.hideLoading()
if (res.data.code != ) {
Taro.showModal({
title: '错误',
content: res.data.msg,
showCancel: false
})
return
}
that.setData({
orderDetail: res.data.data,
logisticsTraces: res.data.data.logisticsTraces.reverse()
})
}
})
} config = {
navigationBarTitleText: '物流详情'
} render() {
const {
orderDetail: orderDetail,
logisticsTraces: logisticsTraces
} = this.state
return (
<View className="container">
<View className="top-sec">
<View className="a-row">
<View className="label">物流单号</View>
<View className="text">{orderDetail.logistics.trackingNumber}</View>
</View>
<View className="a-row">
<View className="label">物流公司</View>
<View className="text">{orderDetail.logistics.shipperName}</View>
</View>
</View>
<View className="sec-wrap">
<View className="details-info">
<View className="line-box" />
{logisticsTraces.map((item, index) => {
return (
<View className="a-row" key={index}>
<View className="dot">
<View
className="active-dot"
hidden={index == ? false : true}
>
<View className="yuan-red" />
</View>
<View
className="default-dot"
hidden={index == ? true : false}
/>
</View>
<View className="info">
<View className="date-box">{item.AcceptTime}</View>
<View className="text">{item.AcceptStation}</View>
</View>
</View>
)
})}
</View>
</View>
</View>
)
}
} export default _C

它看起来就像普通的 Taro 组件,最重要的区别就在于 @withWeapp() 这个装饰器,你可以将它理解为转换代码的运行时,@withWeapp() 会增加一些原来 Taro 没有方法和属性,例如:

this.setData

转换后的 this.setData 的 API 相当于小程序的 this.setData 的 polyfill,他和 this.setState 最大的区别就在于,this.setData 之后 data 的数据是同步更新,而渲染是异步更新,而 setState 两者都是异步的。

this.data 和 this.properties

this.data 和 this.properties 相当于 Taro 的 this.state 和 this.props 的 alias,当它们的数据更新时,对应的 state 和 props 也会同步更新。

生命周期

Taro 会将原始文件的生命周期钩子函数转换为 Taro 的生命周期,完整对应关系如下:

Page.onLoad componentWillMount
onShow componentDidShow
onHide componentDidHide
onReady componentDidMount
onUnload componentWillUnmount
onError componentDidCatchError
App.onLaunch componentWillMount
Component.created componentWillMount
attached componentDidMount
ready componentDidMount
detached componentWillUnmount
moved 保留

常见问题

在小程序 IDE 显示 _createData 错误

这个错误通常是由于原始代码的初始 data 中没有对应的数据,后来通过 this.setData 补充数据造成的。在 Taro 中推荐不管是 state(data) 还是 properties(props) 都要设置一个默认值。你可以在类构造器或修改原始代码提供一个默认值解决这个问题,这也应该是编写代码的最佳实践。

转换 wxParse 报错不存在文件

这是由于 wxParse 的源码使用了一个不存在的 template 声明造成的。你可以修改 wxParse 的源码文件 wxParse.wxml 134 行到 207 行:

<!--循环模版-->
<template name="wxParse1">
<!--<template is="wxParse1" data="{{item}}" />-->
<!--判断是否是标签节点-->
<block wx:if="{{item.node == 'element'}}">
<block wx:if="{{item.tag == 'button'}}">
<button type="default" size="mini">
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">
<template is="wxParse0" data="{{item}}" />
</block>
</button>
</block>
<!--li类型-->
<block wx:elif="{{item.tag == 'li'}}">
<view class="{{item.classStr}} wxParse-li" style="{{item.styleStr}}">
<view class="{{item.classStr}} wxParse-li-inner">
<view class="{{item.classStr}} wxParse-li-text">
<view class="{{item.classStr}} wxParse-li-circle"></view>
</view>
<view class="{{item.classStr}} wxParse-li-text">
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">
<template is="wxParse0" data="{{item}}" />
</block>
</view>
</view>
</view>
</block> <!--video类型-->
<block wx:elif="{{item.tag == 'video'}}">
<template is="wxParseVideo" data="{{item}}" />
</block> <!--img类型-->
<block wx:elif="{{item.tag == 'img'}}">
<template is="wxParseImg" data="{{item}}" />
</block> <!--a类型-->
<block wx:elif="{{item.tag == 'a'}}">
<view bindtap="wxParseTagATap" class="wxParse-inline {{item.classStr}} wxParse-{{item.tag}}" data-src="{{item.attr.href}}" style="{{item.styleStr}}">
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">
<template is="wxParse0" data="{{item}}" />
</block>
</view>
</block>
<block wx:elif="{{item.tag == 'table'}}">
<view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">
<template is="wxParse0" data="{{item}}" />
</block>
</view>
</block> <block wx:elif="{{item.tag == 'br'}}">
<template is="WxParseBr"></template>
</block>
<!--其他块级标签-->
<block wx:elif="{{item.tagType == 'block'}}">
<view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">
<template is="wxParse0" data="{{item}}" />
</block>
</view>
</block> <!--内联标签-->
<view wx:else class="{{item.classStr}} wxParse-{{item.tag}} wxParse-{{item.tagType}}" style="{{item.styleStr}}">
<block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">
<template is="wxParse0" data="{{item}}" />
</block>
</view> </block> <!--判断是否是文本节点-->
<block wx:elif="{{item.node == 'text'}}">
<!--如果是,直接进行-->
<template is="WxEmojiView" data="{{item}}" />
</block> </template>

把 <template name="wxParse1"> 的模板内所有 <template is="wxParse2" data="{{item}}" /> 修改为 <template is="wxParse0" data="{{item}}" /> 再运行 taro convert 即可。这样修改之后还会取消原来 wxParse 只能处理 11 级 HTML 嵌套的问题,理论上内存不爆栈可以处理无限级 HTML 嵌套。

不支持 relations 和 Behavior

目前转换暂只支持转换 PageComponent 、App 三种构造器创造的小程序组件实例。 relations 和 Behavior在其他许多小程序端中还没有对应的实现,我们认为实现这两个功能意义不大。

转换 wepy 文件不成功

目前只能支持转换使用原生微信小程序开发的应用。

Taro -- 原生微信小程序转taro的更多相关文章

  1. 迅速上手:使用taro构建微信小程序基础教程

    前言 由于微信小程序在开发上不能安装npm依赖,和开发流程上也饱受诟病:Taro 是由京东·凹凸实验室(aotu.io)倾力打造的 多端开发解决方案,它的api基于react,在本篇文章中主要介绍了使 ...

  2. Taro开发微信小程序

    Taro开发微信小程序 https://www.cnblogs.com/rynxiao/p/9230237.html 了解Taro 听说Taro是从几个星期前开始的,在一次饭桌上,一个小伙伴说:&qu ...

  3. 【Taro全实践】Taro在微信小程序中的生命周期

    一.Taro的本身生命周期 生命周期componentWillMount在微信小程序中这一生命周期方法对应页面的onLoad或入口文件app中的onLaunch componentDidMount在微 ...

  4. Taro开发微信小程序的初体验

    了解Taro 听说Taro是从几个星期前开始的,在一次饭桌上,一个小伙伴说:"Hey, 你听说了Taro么,听说只需要写一套程序就可以生成H5,小程序以及RN的代码模板,并且类似于React ...

  5. 如何在原生微信小程序中实现数据双向绑定

    官网:https://qiu8310.github.io/minapp/ 作者:Mora 在原生小程序开发中,数据流是单向的,无法双向绑定,但是要实现双向绑定的功能还是蛮简单的! 下文要讲的是小程序框 ...

  6. 原生微信小程序数据渲染

    一直在写vue,第一次接触微信小程序,还是原生,最开始做的时候真的很闹心啊啊啊啊啊啊啊啊啊啊啊啊!!所以最近大概更新的都是微信小程序原生的内容了~~么么哒!!一定会继续努力的!!tips:在小程序项目 ...

  7. 原生微信小程序脚手架(支持npm)

    微信小程序支持npm 为了支持生态扩展,社区贡献者可以提供更加丰富的功能,已经支持了第三方小程序开发功能,见如下地址. 微信小程序支持npm https://developers.weixin.qq. ...

  8. Taro开发微信小程序遇到的问题和解决方法

    1.scroll-view 置顶, 给设置scroll-top为0无效问题? 解决方案: 不触发置顶问题,需要给scroll-top一个设置接近0的随机数,Math.random() 2.scroll ...

  9. Taro开发微信小程序之初始化地图到当前位置

    在componentDidMount中,初始化mapCtx. let _this = this this.mapCtx = Taro.createMapContext('container') //c ...

随机推荐

  1. 文本跟随鼠标并且显示x轴和y轴位置

    一.文本跟随鼠标并且显示x轴和y轴位置 代码如下: window.onload=function(){ var mydiv = document.createElement("div&quo ...

  2. CG-CTF | I wanna play CTF

    这题跟bugku上的come_game超级像,于是菜狗决定研究一下,先鸣谢一下好友the fool,菜狗一直卡在开始界面哇,谢谢大佬给的第一关的数据 这是过到关卡1的数据,经过一系列的尝试得到结论: ...

  3. (转)GitHub中PR(Pull request)操作 - 请求合并代码

    转:https://www.jianshu.com/p/b365c743ec8d 前言 本文尽量使用图形工具介绍如何向开源项目提交 Pull Request,一次亲身经历提交 PR 1.fork 项目 ...

  4. What does the dot after dollar sign mean in jQuery when declaring variables?

    https://stackoverflow.com/questions/22156664/what-does-the-dot-after-dollar-sign-mean-in-jquery-when ...

  5. zepto-touch.js插件

    /* Zepto v1.2.0 - zepto event ajax form ie - zeptojs.com/license */(function(global, factory) { if ( ...

  6. Linux安装nslookup命令

    做DNS的人都知道nslookup命令是做什么用的,windows系统自带的.但是linux系统是不自带这个命令的,需要人手动安装.如果您不记得这是哪个软件包提供这个命令的话,那您还真会有些麻烦了.下 ...

  7. DAY 5 下午

    每个点一定属于一个重链 重链条数和轻边边数是logn级别 证明和启发式合并差不多 因为轻子树的大小至少是重子树大小-1 树链剖分:两遍dfs 第一次:统计子树大小,确定重儿子 第二次:把重链剖出来 每 ...

  8. 《图解设计模式》读书笔记8-1 Observer模式

    目录 示例程序 程序类图 程序 角色和类图 角色 类图 思路拓展 可复用性 Observer的顺序 MVC模式 Observer模式 Observer模式即观察者模式,该模式中,被观察者的状态发生变化 ...

  9. vts测试流程

    测试前提: 1.发货user版本 2.selinux:Enable 3.连接ADB,stay awake 4.烧录XXX申请的key 5.外网环境(ipv6) ATV9测试准备(正常准备环境+fast ...

  10. 神器 工具 推荐 SRDebugger

    unity asset store 关联下载 ,添加这个书签  javascript:var url = window.location.href;var id = url.substr(url.la ...