微信小程序怎么用边框写原型进度条

微信小程序中可以使用`view`组件并结合CSS样式来模拟一个简单的原型进度条，通过设置`border-radius`、宽度(`width`)以及渐变背景颜色来实现。下面是一个基本的例子：

1. 首先，在wxml文件中创建一个`view`元素作为进度条容器：

<view class="progress-bar">
</view>

2. 然后，在.wxss文件中编写样式：

.progress-bar {
  width: 50%; /* 设置初始宽度 */
  height: 20rpx; /* 根据需求调整高度 */
  border-radius: 50% / 40%; /* 圆角半径设定，让两端成90度 */
  background-color: transparent; /* 初始透明 */
  position: relative;
}

.progress-bar::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  background-color: #ccc; /* 进度条填充色 */
  width: 0; /* 初始宽度为0，随着进度变化而增长 */
  transition: width 0.5s ease-in-out; /* 动画效果 */
}

3. 当需要更新进度时，可以在JavaScript或WXML中修改`progress-bar::before`的`width`属性，例如：

Page({
  data: {
    progress: 0,
  },
  updateProgress: function(newProgress) {
    this.setData({ progress: newProgress });
    // 更新样式
    wx.createSelectorQuery()
      .select('.progress-bar::before')
      .setStyle('width', `${newProgress}%`);
  }
})

4. 在需要的地方调用`updateProgress`函数传入新的进度值，比如0到100之间。