怎么用代码写一个店铺小程序

要用代码写一个店铺小程序，首先需要确定小程序的类型（如微信小程序、支付宝小程序等），然后根据所选类型学习相应的开发语言和框架。以下是一个简单的微信小程序店铺首页示例：

1. 首先，在微信开发者工具中创建一个新的小程序项目。

2. 在项目的根目录下创建以下文件：

  - app.js

  - app.json

  - app.wxss

  - pages/index/index.js

  - pages/index/index.json

  - pages/index/index.wxml

  - pages/index/index.wxss

3. 编辑这些文件，添加以下代码：

app.js:

```javascript

App({

  onLaunch: function () {

  },

  globalData: {

    userInfo: null

  }

})

```

app.json:

```json

{

  "pages": [

    "pages/index/index"

  ],

  "window": {

    "backgroundTextStyle": "light",

    "navigationBarBackgroundColor": "#fff",

    "navigationBarTitleText": "店铺小程序",

    "navigationBarTextStyle": "black"

  }

}

```

app.wxss:

```css

/* 全局样式 */

```

pages/index/index.js:

```javascript

Page({

  data: {

    items: [

      { name: '商品1', price: 100 },

      { name: '商品2', price: 200 },

      { name: '商品3', price: 300 },

    ]

  },

  onLoad: function () {

  }

})

```

pages/index/index.json:

```json

{

  "usingComponents": {}

}

```

pages/index/index.wxml:

```html

<view class="container">

  <view class="item-list">

    <block wx:for="{{items}}" wx:key="name">

      <view class="item">

        <text>{{item.name}}</text>

        <text>{{item.price}}元</text>

      </view>

    </block>

  </view>

</view>

```

pages/index/index.wxss:

```css

.container {

  display: flex;

  flex-direction: column;

  align-items: center;

  padding: 20rpx;

}

.item-list {

  width: 100%;

}

.item {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 20rpx;

  border-bottom: 1rpx solid #eee;

}

```

4. 在微信开发者工具中预览或调试小程序。

这只是一个简单的店铺首页示例，实际开发中还需要根据需求添加更多功能和页面。建议学习微信小程序的开发文档和教程，以便更好地理解和使用小程序开发。