微信小店store-product组件无法显示或无法自定义样式？

相关官方文档：开放能力 / store-product

在原生的小程序开发中，使用store-product组件可以根据appid（微信小店id）、product-id（商品小店）展示指定微信小店的商品，但是在开发过程中遇到了一些问题，下面分享了我遇到的问题、相应的解决办法、官方文档示例代码，希望对你有帮助

示例代码：

wxml

<store-product appid="xxx" product-id="xxx" custom-style="{{customStyle}}" />

js

Page({
  data: {
    customStyle: {
      card: {
        'background-color': '#FAFAFA',
      },
      title: {
        color: 'rgba(0, 0, 0, 0.8)',
      },
      price: {
        color: '#FF6146'
      },
      'buy-button': {
        width: '100px',
        'border-radius': '30px',
        'background-color': 'rgba(0,0,0,0.9)',
        color: '#FFD48D',
      },
      'buy-button-disabled': {
        width: '100px',
        'border-radius': '30px',
        'background-color': 'rgba(0,0,0,0.9)',
        color: '#FFD48D',
      },
    },
  }
})

使用过程中我遇到两个问题：1.使用了组件之后，小店的商品仍然无法正常显示  2.组件无法自定义样式。

解决办法：

组件无法正常显示：

        1.使用组件之后只能在真机预览中才能查看，使用模拟器无法显示商品

                

        2.无法显示也可能是强行改变了组件的一些样式，导致组件内容不完整，则不会显示

组件无法自定义组件：

        正如上图显示，官方提供的组件是无法进行自定义样式的，能改变的样式只有官方文档中js示例代码里已经有了样式，没有的则无法修改，强行修改会导致修改不生效或组件消失