微信小程序轉(zhuǎn) Taro

自?v1.2.0?開始支持此功能

Taro 可以將你的原生微信小程序應用轉(zhuǎn)換為 Taro 代碼，進而你可以通過?taro build?的命令將 Taro 代碼轉(zhuǎn)換為對應平臺的代碼，或者對轉(zhuǎn)換后的 Taro 代碼進行用 React 的方式進行二次開發(fā)。

微信原生小程序轉(zhuǎn) Taro 的操作非常簡單，首先必須安裝使用?npm i -g @tarojs/cli?安裝 Taro 命令行工具，其次在命令行中定位到小程序項目的根目錄，根目錄中運行：

$ taro convert

即可完成轉(zhuǎn)換。轉(zhuǎn)換后的代碼保存在根目錄下的?taroConvert?文件夾下。你需要定位到?taroConvert?目錄執(zhí)行?npm install?命令之后就可以使用?taro build?命令編譯到對應平臺的代碼。

具體案例件官方案例https://taro-docs.jd.com/taro/docs/taroize.html

轉(zhuǎn)換完成后需要注意一下幾點：

1. 樣式問題：

　　在scss文件里，像素單位為px，但是這個值指的是rpx也就是說750px編譯成小程序也就是750rpx，但是如果在行內(nèi)樣式就不一樣rpx是rpx，px是px，但是h5不支持rpx，因此這里就出現(xiàn)了Taro.pxTransform(750)這個轉(zhuǎn)換方法，只要是動態(tài)在行內(nèi)樣式都需要

Taro.pxTransform().

?

2. 頁面?zhèn)鲄?shù)：

　　這里不在是options了，現(xiàn)在是this.$route.params 相當于是小程序里的 onload里的options

?

3. Image標簽問題：

　　小程序的Image轉(zhuǎn)換到h5,taro的組件Image，你在頁面查看元素會發(fā)現(xiàn)img外面套了一個div還自帶了小程序image的樣式，這里最臟了需要自己手動修改taro-image的width

?

4.? app.js

　　taro會給app自帶config屬性，所以建議之前在app加了config屬性的統(tǒng)一一件改成conf或者自定義

?

5. swiper組件的坑：

　　轉(zhuǎn)換后查看swiper，因為swiper的第一個子元素必須是swiperItem

?

6. 所有授權(quán)（獲取用戶信息，獲取手機號碼等）的button按鈕：

　　所有授權(quán)（獲取用戶信息，獲取手機號碼等）的button按鈕都需要寫兩套代碼，因為h5不支持onGetUserInfo，onSubmit，?open-type="getUserInfo" formType="submit" 等屬性，如果寫了h5是會刷新頁面的

　　這里說一下使用taro-ui，需要配置config文件下的h5屬性如下

?

?

7. async:

　　目前不支持

?

8. block標簽：

　　block標簽轉(zhuǎn)換會變成 div ，這樣會影響flex布局

?

現(xiàn)總結(jié)到這，之后慢慢捋一捋思緒，歡迎大家來探討。

————————————————————————————————————————————————

版權(quán)歸本網(wǎng)站的作者所有，轉(zhuǎn)載請注明出處，謝謝大家。

?

轉(zhuǎn)載于:https://www.cnblogs.com/xuLessReigns/p/11316599.html

總結(jié)

以上是生活随笔為你收集整理的使用taro命令(taro convert)转h5碰到的一些问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。