小程序問題記錄Taro版

1.修改TaroUI組件內的樣式需要在class裏定義（2.2.3以上支持）：

static options = {
  addGlobalClass: true,
};

2.真機canvas無法顯示，滑動卡頓問題：

• canvas上繪製的圖片地址的域名要配在小程序的downloadFile裏，必須是https的；

• 動畫本身不卡頓，但是canvas直接滑動會卡頓，解決方法：在ctx.draw回調中用Taro.canvasToTempFilePath直接生成圖片在可視區內。

3.生成小程序碼接口報參數過長：

• 請求參數最大支持32個可見字符，解決方法：將需要拼接的參數讓後端做id和請求參數的映射，保證參數小於32位，小程序會自動拼接scene參數，掃碼進小程序後再調接口取回原來的參數（只能生成已發佈的小程序的小程序碼）。

4.自定義頭部，title與膠囊中心對齊：

• class內定義：

static config = {
 navigationStyle: 'custom',
};

• 頁面加載完成後獲取膠囊按鈕位置：

// 獲取系統信息
const [topBarRect, setTopBarRect] = useState<any>({});
Taro.getSystemInfo().then((info: getSystemInfo.Result) => {
  // 取得右上角膠囊高度，因爲自定義標題等 需要與其對齊
  const { system, statusBarHeight, windowWidth } = info;
  const { left: buttonLeft, height, top: buttonTop } = getMenuButtonBoundingClientRect();
  let top = statusBarHeight;
  const right = windowWidth - buttonLeft + 10 + 'px';
  if (topBarRect.top !== top + 'px' || topBarRect.right !== right) {
    setTopBarRect({
      menuButtonHeight: height,
      baseHeight: height + buttonTop + 5 + 'px',
    });
  }
});

• jsx和css

<View
  className='page-title'
  style={{
    height: topBarRect.baseHeight,
  }}
>
  <View
    className='page-title-fixed'
    style={{ bottom: topBarRect.menuButtonHeight / 2 + 5 + 'rpx' }}
  >
    <View className='back-icon'>
      <AtIcon
        value='chevron-left'
        size='20'
        color='#fff'
        onClick={() => {
          getCurrentPages().length === 1 ? Taro.switchTab({ url: '/pages/home/index' }) : Taro.navigateBack();
        }}
      />
    </View>
    {title}
  </View>
</View>
{/* 自定義頭部fixed之後頭部height沒有了，所以要加一個空白的節點，讓頁面不用考慮頭部 */}
<View className='fill-block' style={{ height: topBarRect.baseHeight }}></View>

.page-title {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  color: #fff;
  text-align: center;
}
.page-title-fixed {
  position: absolute;
  width: 100%;
}
.back-icon {
  position: absolute;
  left: 30px;
  top: -4px;
 }

5.彈窗內的input層級過高，加載頁面的時候就可以看到input內的元素

• 解決方案：在彈窗顯示的時候才顯示input，之前可以用佔位代替。

6.rich-text不支持video標籤，通過切割成幾段實現rich-text展示本文，小程序Video展示視頻，圖片展示樣式有問題（功能實現，細節需優化）

const handleContent = str => {
  if (str.indexOf('video-wrap') === -1) {
    return [str];
  }
  const reg1 = /<div class="media-wrap video-wrap"><video src="(.*?)"(.*?)><\/video><\/div>/g;
  const reg2 = /src=\"(\S*)\"/;
  // result1存放的是匹配到的帶有video的div
  const result1 = str.match(reg1);
  const splitStr = '@#$';
  result1.forEach(res => {
    str = str.replace(res, splitStr);
  });
  let spliteArr = str.split(splitStr);
  const newArr: Array<string> = [];
  // 如果第一個數組是空，則第一個元素有視頻，否則後面的每個都插入一個視頻
  if (spliteArr[0] === '') {
    spliteArr = spliteArr.slice(1);
    spliteArr.forEach((item, index) => {
      if (result1[index]) {
        newArr.push('video:' + result1[index].match(reg2)[1]);
      }
      newArr.push(item);
    });
  } else {
    spliteArr.forEach((item: any, index) => {
      newArr.push(item);
      if (result1[index]) {
        newArr.push('video:' + result1[index].match(reg2)[1]);
      }
    });
  }
  return newArr;
};
const handleImageContent = () => {
  return content.replace(
    /<img/g,
    '<img style="display:block; width: 100%; height: auto; margin:0 auto"',
  );
}
// 使用
{handleContent(content).map((content: string, index) => {
  if (content.slice(0, 6) === 'video:') {
    return (
      <Video className='article-video' key={index} src={content.slice(6)}></Video>
    );
  }
  return (
    <RichText key={index} space='emsp' nodes={this.handleImageContent(content)} />
  );
})}

效果：

以上html字符串輸出爲（未處理img之前）：

兼容性問題：

1.獲取用戶手機號，授權取消微信回調的errMsg不一樣

const handleBindCell = async e => {
    if (
      e.detail.errMsg === 'getPhoneNumber:fail user deny' ||
      e.detail.errMsg === 'getPhoneNumber:fail:user deny'
    ) {...}
}
<AtButton
  className='btn-cell'
  type='primary'
  circle
  onGetPhoneNumber={handleBindCell}
  openType='getPhoneNumber'
>
  點擊綁定
</AtButton>

2.ios視頻無法播放

• ios不識別cdn的.resource的地址，改成直接從阿里雲獲取視頻地址即可。