uni-app商城模板demo

针对你提到的uni-app商城模板demo的需求，以下是一个简单的示例代码结构，展示了如何使用uni-app框架搭建一个基础的商城应用。由于篇幅限制，此示例将涵盖核心的文件结构和部分关键代码，帮助你快速上手。

项目结构

uni-app-mall/
├── pages/
│   ├── index/
│   │   ├── index.vue
│   ├── product/
│   │   ├── product.vue
│   ├── cart/
│   │   ├── cart.vue
├── store/
│   ├── index.js
├── App.vue
├── main.js
├── manifest.json
├── pages.json
└── uni.scss

关键代码示例

main.js

import Vue from 'vue'
import App from './App'
import store from './store'

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
    store,
    ...App
})
app.$mount()

store/index.js (使用Vuex管理状态)

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        cart: []
    },
    mutations: {
        ADD_TO_CART(state, product) {
            state.cart.push(product)
        }
    },
    actions: {
        addToCart({ commit }, product) {
            commit('ADD_TO_CART', product)
        }
    },
    getters: {
        cartLength: state => state.cart.length
    }
})

pages/index/index.vue (首页)

<template>
  <view>
    <text>Welcome to Mall</text>
    <navigator url="/pages/product/product">Go to Product Page</navigator>
  </view>
</template>

<script>
export default {
  name: 'Index'
}
</script>

pages/product/product.vue (商品详情页)

<template>
  <view>
    <text>Product Page</text>
    <button @click="addToCart">Add to Cart</button>
  </view>
</template>

<script>
export default {
  name: 'Product',
  methods: {
    addToCart() {
      const product = { id: 1, name: 'Sample Product' }
      this.$store.dispatch('addToCart', product)
    }
  }
}
</script>

pages/cart/cart.vue (购物车页)

<template>
  <view>
    <text>Cart Page</text>
    <text>Items in Cart: {{ cartLength }}</text>
  </view>
</template>

<script>
export default {
  name: 'Cart',
  computed: {
    cartLength() {
      return this.$store.getters.cartLength
    }
  }
}
</script>

以上代码展示了一个基本的uni-app商城模板的结构和关键部分。你可以根据需要扩展每个页面的功能，如添加商品列表、用户登录、订单管理等。希望这个示例能帮助你快速上手uni-app商城应用的开发。