Taro-UI 小程序開發記錄(React)

語言: CN / TW / HK

theme: awesome-green highlight: an-old-hope


持續創作,加速成長!這是我參與「掘金日新計劃 · 6 月更文挑戰」的第18天,點擊查看活動詳情

Taro-UI是一款基於 Taro 框架開發的多端 UI 組件庫,vue和react都支持,本文背景是Taro-UI + React, 記錄一些在小程序開發中可能遇到的問題

1.npm install時Taro報錯:

報錯信息:Taro 配置有誤,請檢查[x]plugins [x]frame

原因: 項目中的是低版本,需要重新安裝低版本的Taro

解決:

安裝最新版本: js npm install -g @tarojs/cli 安裝指定版本: npm install -g @tarojs/[email protected]

2. 加載圖片時報錯:【渲染層網絡層錯誤】

圖片路徑正確並且已經加載出來,但是沒有渲染到屏幕,查閲文檔後發現是Image 沒有處理動態拼接的 src的問題

如果路徑是動態拼接的字符串,需要手動修改:

```js // 轉換前:

// 手動修改,圖片也需要手動拷貝到 taroConert/src 對應目錄下: ```

但是在項目中並沒有taroConert目錄,於是在dist目錄下執行以下指令,目的是:轉換原有微信小程序,把轉換好的代碼生成在根目錄下的 taroConvert 文件夾

bash $ taro convert

未生效,最後發現原因是出在dist目錄下的assets文件中沒有添加新增的圖片文件,加入後解決

官方對於這部分的解釋:

image.png

  • 1.https://taro-docs.jd.com/taro/docs/taroize-troubleshooting#5-image-%E6%B2%A1%E6%9C%89%E5%A4%84%E7%90%86%E5%8A%A8%E6%80%81%E6%8B%BC%E6%8E%A5%E7%9A%84-src

  • 2.https://taro-docs.jd.com/taro/blog/2018-12-18-taro-1-2/#taroize

3.跳轉內部頁面

js navigateTo = async (url) => { Taro.navigateTo({ url: url }) } render(){ return( <View onClick={this.navigateTo.bind(this)}>點擊事件</View> ) }

4.跳轉外部鏈接頁面

最開始使用函數直接返<webView>組件,但並不生效,原始寫法:

```js handleClick (item) { return }

render(){ return( 點擊事件 ) } ```

最後的解決辦法是:單獨用一個文件封裝<webView>作為新組件,點擊事件觸發時使用內部跳轉

// 父組件頁面 index.js js handleClick (item) { Taro.navigateTo({ url: `./child?url=${item.url}` }) // 子頁面使用this.$router.params接收參數 }

// 子組件 child.js頁面 ```js

import {WebView} from '@tarojs/components'

static defaultProps = {// 當有數據交互的時候使用的參數在這裏設置 data: {} }

componentDidShow () { }

render() { return ( ) } ```

5.獲取DOM

js let query = Taro.createSelectorQuery(); query.select('.ClassName').boundingClientRect((res) => { console.log(res); }).exec()

注:Taro官網中提供了詳細文檔,用於獲取 WXML 節點信息的對象

  • rect.id // 節點的ID
  • rect.dataset // 節點的dataset
  • rect.left // 節點的左邊界座標
  • rect.right // 節點的右邊界座標
  • rect.top // 節點的上邊界座標
  • rect.bottom // 節點的下邊界座標
  • rect.width // 節點的寬度
  • rect.height // 節點的高度

```js Taro.createSelectorQuery().select('#the-id').boundingClientRect(function(rect){

}).exec() ```

6.調用接口

image.png

7. 官方學習

官方永遠是掌握這個技術的最快最準確的方式:

Taro-UI 官方文檔:https://taro-ui.jd.com/#/docs/introduction

Taro 官方文檔:https://taro-docs.jd.com/taro/docs