微信小程序商店运费设置攻略，轻松掌握填写运费的技巧与方法
微信小程序商店的运费设置可以通过自定义运费模板来实现。在小商店助手中，选择功能，然后选择运费模板。在运费模板下选择一项，点击修改运费。进入后设置运费后，点击保存即可。
随着微信小程序的普及，越来越多的商家开始在小程序上开设商城，面向微信用户提供购物服务，如何在微信小程序商店中正确填写运费呢？本文将为您提供一份详细的运费设置攻略，帮助您轻松掌握填写运费的技巧与方法。
了解微信小程序商店的运费设置规则
1、默认运费：商家可以为所有商品设置一个默认运费，当用户购买商品时，如果没有选择快递方式，系统会自动使用默认运费，商家可以在后台管理系统中设置默认运费。
2、按重量计算运费：商家可以根据商品的重量为不同的快递方式设置不同的运费，用户在购买商品时，需要根据商品的重量选择合适的快递方式，系统会根据重量自动计算出运费。
3、按体积计算运费：部分商家可能需要根据商品的体积为不同的快递方式设置不同的运费，这种情况下，商家需要在后台管理系统中开启体积计算运费的功能，并根据商品的体积和快递方式的关系设置相应的运费。
4、优惠券折扣：商家可以为商品设置运费优惠券，用户在支付订单时可以使用优惠券抵扣运费，商家需要在后台管理系统中设置优惠券的折扣比例和有效期。
5、满减活动：商家可以为商品设置满减活动，当用户购买的商品总金额达到一定数额时，可以享受免运费或减免运费的优惠。
如何设置微信小程序商店的运费
1、登录微信公众平台，进入“小程序管理”-“开发管理”-“开发设置”，找到“服务器域名”，按照提示完成域名配置。
2、进入微信小程序开发者工具，点击“项目”-“详情”，在项目根目录下创建一个名为“store”的文件夹，用于存放商店相关的文件。
3、在“store”文件夹中创建一个名为“product.json”的文件，用于存放商品信息的JSON数据，在该文件中，商家可以添加商品的基本信息、图片、价格等。
{
"goodsList": [
{
"id": "1",
"price": 0, // 商品价格
"stock": 0, // 库存数量
"imageUrl": "https://example.com/image/1.jpg", // 商品图片链接
"goodsName": "商品1", // 商品名称
"goodsCategoryId": "1", // 商品分类ID
"goodsCategoryName": "分类1", // 商品分类名称
"weight": 0.5, // 商品重量(单位：kg)
"volume": 0.001, // 商品体积(单位：m3)
"shippingFee": 5 // 运费(单位：元)
},
{
"id": "2",
"price": 100,
"stock": 0,
"imageUrl": "https://example.com/image/2.jpg",
"goodsName": "商品2",
"goodsCategoryId": "2",
"goodsCategoryName": "分类2",
"weight": 0.2,
"volume": 0.0005,
"shippingFee": 10 // 运费(单位：元)
}
]
}4、在“store”文件夹中创建一个名为“index.wxml”的文件，用于存放商店首页的布局代码，在该文件中，商家可以添加商品列表的展示、筛选、排序等功能。
<view class="container">
<view class="filter">
<picker mode="selector" range="{{filterRange}}" bindchange="onFilterChange">筛选条件：{{selectedFilter}}</picker>
</view>
<view class="product-list">
<block wx:for="{{goodsList}}" wx:key="id">
<view class="product-item" bindtap="onProductTap">
<image src="{{item.imageUrl}}" mode="aspectFill" class="product-image"></image>
<text class="product-name">{{item.goodsName}}</text>
<text class="product-price">{{item.price | formatPrice}}</text>
</view>
</block>
</view>
</view>5、在“store”文件夹中创建一个名为“index.wxss”的文件，用于存放商店首页的样式代码。
.container {
display: flex;
flex-direction: column;
}
.filter {
display: flex;
flex-direction: column;
}
.product-list {
flex: 1;
}
.product-item {
display: flex;
flex-direction: row;
align-items: center;
}
.product-image {
width: 100%;
}
.product-name, .product-price {
margin-left: auto;
}6、在“store”文件夹中创建一个名为“index.js”的文件，用于存放商店首页的逻辑代码，在该文件中，商家可以实现筛选功能的交互逻辑。
Page({
data: {},
onLoad: function (options) {},
onFilterChange: function (e) {
const filter = e.detail[0].value; // 根据选择的筛选条件更新过滤函数列表中的筛选条件列表项值为选中值的对象数组；然后根据过滤条件列表项值来更新过滤后的商品数据集合；最后重新渲染页面显示筛选后的商品列表数据集合到页面上，如：this.setData({ selectedFilter: filter }); this.getGoodsListByFilter(); this.refresh(); getGoodsListByFilter 是自定义的方法名，具体实现可参考上面的 goodsList 为空对象时的 getGoodsListByFilter()方法，注意要刷新页面才能使页面重新渲染！！!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 然后重新渲染页面显示筛选后的商品列表数据集合到页面上即可。 如有疑问欢迎追问哦~与本文内容相关的知识文章：
