微信小程序开发的店铺评论组件 | Vuejs使用svg实现评分显示组件

在微信小程序中，当涉及到显示商店评分或订单完成后评价产品时，会使用星标显示。查了一下，微信中不能用svg来实现图片。微信只能将svg图片转为base64进行显示，所以在view中使用svg来实现评分

1。效果图

可以点击显示在微信显示中，但是显示的时候，在4.2分钟或者4点多显示半颗星

View使用svg来实现，所以存在比例形状，并且可能有一些星号 3 。父组件指的是

父组件index.wxml

<view class="score">
 <view class="scoreItem">
  <score value="{{shopGrade}}" size="46" isClick="true" bindcompute="computeGrade" />
 </view>
 <view class="scoreItem">
  <score value="{{shopGrade1}}" size="46" /> 
 </view>
</view>

父组件index.json

{
 "usingComponents": {
  "score": "/component/score/index"
 }
}

{
 "usingComponents": {
  "score": "/component/score/index"
 }
}

{
 "usingComponents": {
  "score": "/component/score/index"
 }
}

{
 "usingComponents": {
  "score": "/component/score/index"
 }
}

♝♝ ♝ ♝❝4.在view中使用svg实现评分

首先使用view中的index。在html模板文件中添加一个rem转换算法，因为我后面要用的单位是rem

/* 在头部添加 */
<script type="text/javascript">
   document.getElementsByTagName("html")[0].style.fontSize = 100 / 750 * window.screen.width + "px";
  </script>

，然后添加svg.vue文件。这个svg文件可以通过找到图像本身并插入相应的id rating.vue文件来生成。使用编辑器引入的 svg 和 view 实现的组件。非常感谢您对新秀学院网站的支持！