小程序问题记录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的地址，改成直接从阿里云获取视频地址即可。