[Feature discussion]原生小程序转 Taro 代码问题收集

luckyadam commented 5 years ago

Hello，各位大佬~

Taro 发布了 beta 版本，提供了原生小程序转 Taro 代码的功能

升级 Taro CLI

$ npm i -g @tarojs/cli

随后，在原生小程序项目目录下执行 taro convert 命令即可将原生小程序代码转换成 Taro 代码

欢迎大家试用，并反馈问题与建议~

功能所在分支：https://github.com/NervJS/taro/tree/taroize

目前已知不支持特性：

[x] template 引用，正在开发中
[ ] behaviors 不支持
[x] 组件的属性 observer 暂不支持，正在开发中

各位提交报错信息劳烦请带上源代码。

更新：

template 引用已经支持
observer 已支持

yuche commented 5 years ago

@luckyadam 1. 我安装图中的然后执行taro convert并没有什么反应，在微信群中问了之后，安装的时候是不需要后面的@beta的，是否考虑更新一下上面的文案，不然会引起误会

2.后续会有RN转Taro吗？

改了
目前没有这个打算

wangxv commented 5 years ago

好的，谢谢

zhangyt93 commented 5 years ago

转换过程出现两个报错：

报错 1：

错误  页面转换  pages/site/index.js
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined
    at validateString (internal/validators.js:125:11)
    at Object.extname (path.js:830:5)
    at analyzeImportUrl (C:\Users\ZYT\AppData\Roaming\nvm\v10.15.3\node_modules\@tarojs\cli\src\convertor.js:47:29)
    at CallExpression (C:\Users\ZYT\AppData\Roaming\nvm\v10.15.3\node_modules\@tarojs\cli\src\convertor.js:221:19)
    at NodePath._call (C:\Users\ZYT\AppData\Roaming\nvm\v10.15.3\node_modules\@tarojs\cli\node_modules\babel-traverse\lib\path\context.js:76:18)
    at NodePath.call (C:\Users\ZYT\AppData\Roaming\nvm\v10.15.3\node_modules\@tarojs\cli\node_modules\babel-traverse\lib\path\context.js:48:17)
    at NodePath.visit (C:\Users\ZYT\AppData\Roaming\nvm\v10.15.3\node_modules\@tarojs\cli\node_modules\babel-traverse\lib\path\context.js:105:12)
    at TraversalContext.visitQueue (C:\Users\ZYT\AppData\Roaming\nvm\v10.15.3\node_modules\@tarojs\cli\node_modules\babel-traverse\lib\context.js:150:16)
    at TraversalContext.visitMultiple (C:\Users\ZYT\AppData\Roaming\nvm\v10.15.3\node_modules\@tarojs\cli\node_modules\babel-traverse\lib\context.js:103:17)
    at TraversalContext.visit (C:\Users\ZYT\AppData\Roaming\nvm\v10.15.3\node_modules\@tarojs\cli\node_modules\babel-traverse\lib\context.js:190:19)

// pages/site/index.js
import http from '../../utils/http'
import P from '../../lib/wxpage'
import numeral from '../../utils/numeral.min'
import moment from '../../utils/moment.min'
import validator from '../../utils/validator'
import toast from '../../components/toast/index'

const app = getApp()

P('site', {
  onLoad() {
    app.getLocation(s => {
      this.setData({
        locationSite: s,
        locationSiteName: s.name
      })
    })

    let sites = app.globalData.sites
    let locationSite = app.globalData.locationSite
    let locationSiteName = locationSite ? locationSite.name : '定位中...'

    this.setData({
      sites,
      locationSite,
      locationSiteName
    })
  },
  handleClickSite(e) {
    var item = e.currentTarget.dataset.item
    if (item) {
      this.$emit('index:change:site', item)
    }
    this.$back()
  }
})

<!--pages/site/index.wxml-->
<scroll-view>
  <view class="panel">
    <view class="panel-header">当前定位站点</view>
    <view
      class="panel-content"
      data-item="{{locationSite}}"
      catchtap="handleClickSite"
    >
      {{locationSiteName}}
    </view>
  </view>

  <view class="panel">
    <view class="panel-header">已开通站点</view>
    <view class="panel-content">
      <view
        wx:for="{{sites}}"
        wx:key="id"
        data-item="{{item}}"
        catchtap="handleClickSite"
      >
        {{item.name}}
      </view>
    </view>
  </view>
</scroll-view>

报错 2：

错误  页面转换  pages/destination/index.js
{ SyntaxError: Unexpected token, expected : (1:19)
    at Parser.pp$5.raise (C:\Users\ZYT\AppData\Roaming\nvm\v10.15.3\node_modules\@tarojs\cli\node_modules\babylon\lib\index.js:4454:13)
    at Parser.pp.unexpected (C:\Users\ZYT\AppData\Roaming\nvm\v10.15.3\node_modules\@tarojs\cli\node_modules\babylon\lib\index.js:1761:8)
    at Parser.pp.expect (C:\Users\ZYT\AppData\Roaming\nvm\v10.15.3\node_modules\@tarojs\cli\node_modules\babylon\lib\index.js:1749:33)
    at Parser.pp$3.parseConditional (C:\Users\ZYT\AppData\Roaming\nvm\v10.15.3\node_modules\@tarojs\cli\node_modules\babylon\lib\index.js:3392:10)
    at Parser.pp$3.parseMaybeConditional (C:\Users\ZYT\AppData\Roaming\nvm\v10.15.3\node_modules\@tarojs\cli\node_modules\babylon\lib\index.js:3384:15)
    at Parser.pp$3.parseMaybeAssign (C:\Users\ZYT\AppData\Roaming\nvm\v10.15.3\node_modules\@tarojs\cli\node_modules\babylon\lib\index.js:3344:19)
    at Parser.pp$3.parseExpression (C:\Users\ZYT\AppData\Roaming\nvm\v10.15.3\node_modules\@tarojs\cli\node_modules\babylon\lib\index.js:3306:19)
    at Parser.pp$3.getExpression (C:\Users\ZYT\AppData\Roaming\nvm\v10.15.3\node_modules\@tarojs\cli\node_modules\babylon\lib\index.js:3281:19)
    at Object.parseExpression (C:\Users\ZYT\AppData\Roaming\nvm\v10.15.3\node_modules\@tarojs\cli\node_modules\babylon\lib\index.js:7313:17)
    at parseAttribute (C:\Users\ZYT\AppData\Roaming\nvm\v10.15.3\node_modules\@tarojs\cli\node_modules\@tarojs\taroize\lib\src\wxml.js:587:97) pos: 19, loc: Position { line: 1, column: 19 } }

// pages/destination/index.js
import http from '../../utils/http'
import P from '../../lib/wxpage'
import numeral from '../../utils/numeral.min'
import VillageItem from '../../components/village-item/index'

const app = getApp()

P('destination', {
  _pages: [],
  _share: null,
  _id: null,
  data: {
    height: '100%',
    activeIndex: 0
  },
  comps: [VillageItem],
  onLoad(o) {
    app.getLocation()

    this.$on('destination:change:city', res => {
      this.querySurroundingCities(res)
    })

    if (!o.id) {
      let g = app.globalData
      let c = g.destinationCity ? g.destinationCity : g.site.center
      o = c
    }
    this._id = o.id
    wx.hideShareMenu()
    wx.showLoading({
      title: ''
    })
    this.querySurroundingCities(o)
  },
  onShareAppMessage() {
    return this._share
  },
  afterLoad(o) {
    this.queryDistrictVillages(0)
    this._share = {
      title: decodeURIComponent(o.name),
      path: `pages/destination/index?id=${o.id}&name=${o.name}`
    }
    wx.hideLoading()
    wx.showShareMenu()
  },
  handleClickCity(e) {
    var index = +e.currentTarget.dataset.index
    var data = this.data.pages[index]
    if (data.status === 0) {
      this.queryDistrictVillages(index)
    }
    this.setData({
      activeIndex: index
    })
  },
  handleClickVillage(e) {
    let id = e.item.id
    this.$put('VillageDetail.preload.' + id, e.item)
    this.$route('village-detail?id=' + id)
  },
  handleLoadMore(e) {
    var data = e.currentTarget.dataset
    var index = data.index
    var data = this.data.pages[index]
    var _data = this._pages[index]
    if (_data.loading || !data.hasNext) {
      return
    }
    _data.loading = true
    this.queryDistrictVillages(index, () => {
      _data.loading = false
    })
  },
  handleClickMoreCities() {
    this.$route('city?from_page=destination&id=' + this._id)
  },
  handleClickSearch() {
    this.$route('search')
  },
  querySurroundingCities(o) {
    if (this.data.city && this.data.city.id === o.id) {
      return
    }
    o.name = decodeURIComponent(o.name)
    this.setData({
      city: o
    })
    http
      .querySurroundingCities(o.id)
      .then(res => {
        var pages = []
        this._pages = []
        res.forEach(c => {
          pages.push({
            hasNext: true,
            status: 0,
            id: c.id
          })
          this._pages.push({ loading: false })
        })

        this.setData({
          cities: res,
          pages,
          activeIndex: 0
        })
        this.afterLoad(o)
      })
      .catch(err => {
        wx.hideLoading()
      })
  },
  queryDistrictVillages(index, cb) {
    var that = this
    var data = this.data.pages[index]
    http
      .queryDistrictVillages(data.id, data.next || 1)
      .then(res => {
        if (res) {
          let list = res.list.map(v => {
            v.currentPriceText = numeral(v.currentPrice)
              .divide(100)
              .format('0,0')
            return v
          })
          var villages = data.list
          if (res.start === 1) {
            villages = list
          } else {
            villages.push.apply(villages, list)
          }
          var _data = {}
          if (cb) {
            _data = cb(true, res)
          }
          data['hasNext'] = res.hasNext
          data['next'] = res.next
          data['list'] = villages
          data['status'] = 1
          var params = {}
          params[`pages[${index}]`] = data
          that.setData(Object.assign(params, _data))
        } else {
          that.setData({
            status: 1
          })
        }
      })
      .catch(err => {
        if (start === 1) {
          that.setData({
            status: 2
          })
        }
        cb && cb(false)
      })
  },
  handleOnlineChat() {
    var url = escape(app.globalData.onlineChatUrl)
    this.$route('web-view?title=在线客服&url=' + url)
  }
})

<!--pages/destination/index.wxml-->
<import src="/components/village-item/index.wxml" />
<import src="/components/loadmore/index.wxml" />

<view class="box online-chat" catchtap="handleOnlineChat">
  <label class="iconfont icon-online-chat online-chat-icon"></label>
  <label class="online-chat-font">
    咨询
  </label>
</view>

<view class="view-header box">
  <view class="header-toolbar box row">
    <view class="col search-input box" catchtap="handleClickSearch">
      搜索关键字/城市/别墅名
      <view class="right-search">
        <label class="iconfont icon-search"></label>
      </view>
    </view>
    <view class="col current-city">
      <view class="box" catchtap="handleClickMoreCities">
        {{city.name}}
        <label class="iconfont icon-down"></label>
      </view>
    </view>
  </view>
  <view class="header-cities row">
    <view class="col cities-left">
      周边城市：
    </view>
    <view class="col cities-right">
      <scroll-view scroll-x="true">
        <view wx:for="{{cities}}" wx:key="id" data-item="{{item}}" data-index="{{index}}" class="city-text box {{activeIndex===index?'active':''}}" catchtap="handleClickCity">{{item.name}}</view>
      </scroll-view>
    </view>
  </view>
</view>

<view class="view-content box">
  <scroll-view scroll-y enable-back-to-top wx:for="{{cities}}" wx:key="id" data-index="{{index}}" style="height:100%" hidden="{{activeIndex!==index}}" bindscrolltolower="handleLoadMore">
    <block wx:for="{{pages[index].list}}" wx:key="id">
      <template is="VillageItem" data="{{item,itemClass:index > 0 ? 'mt20' : ''}}" />
    </block>
    <template is="loadmore" data="{{loading:pages[index].hasNext}}" />
  </scroll-view>
</view>

<!-- <wxs module="m">
  module.exports = {
    getItemClass: function(i) {
      return i > 0 ? 'mt20' : ''
    }
  }
</wxs> -->

shaojingchao commented 5 years ago

问题描述

文档介绍是这样的： https://taro-docs.jd.com/taro/docs/taroize.html#thissetdata

为什么没有同步更新呢？

代码如下：

// ...
componentWillMount () {
    var that = this
    that.setData({
      historyData: [1,2,3]
    }, () => {
      console.log('callback', that.state.historyData)
      console.log('callback', that.data.historyData)
    })
    console.log('next', that.state.historyData)
    console.log('next', that.data.historyData)
  }
// ...

预期结果：

// callback [1,2,3]
// callback [1,2,3]
// next []
// next []

实际执行结果：

Taro Info：

  Taro CLI 1.3.15 environment info:
    System:
      OS: Windows 10
    Binaries:
      Node: 10.16.3 - C:\Program Files\nodejs\node.EXE
      Yarn: 1.17.3 - D:\Program Files\nodejs\npm_global\yarn.CMD
      npm: 6.9.0 - D:\Program Files\nodejs\npm_global\npm.CMD

Chen-jj commented 4 years ago

之后单独开 issue 提问吧。

superhos commented 2 years ago

Error: Page 的第一个参数必须是一个对象或变量才能转换。看了下代码，Page传入的已经是对象了

NervJS / taro