Kbone

┌─────────────────────────────┐
│   你的代码 (Vue/React/...)   │
├─────────────────────────────┤
│   Web 框架运行时              │
├─────────────────────────────┤
│   Kbone 适配层 (模拟 DOM/BOM) │
├─────────────────────────────┤
│   微信小程序运行时             │
└─────────────────────────────┘

// build/miniprogram.config.js
module.exports = {
  origin: 'https://test.miniprogram.com',
  entry: '/index.html',
  router: {
    index: ['/', '/home'],
    list: ['/list'],
  },
  redirect: {
    notFound: 'index',
    accessDenied: 'index',
  },
  generate: {
    autoBuildWXCom: true, // 自动生成小程序自定义组件
  },
}

# 方式一：使用 kbone-cli（推荐）
npm install -g kbone-cli
kbone init my-app    # 选择 Vue/React/Preact 模板

cd my-app

# 开发小程序端
npm run mp

# 开发 Web 端
npm run web

# 构建 Web 端
npm run build

# 方式二：直接 clone 模板
# Vue 模板
git clone https://github.com/wechat-miniprogram/kbone-template-vue.git
# React 模板
git clone https://github.com/wechat-miniprogram/kbone-template-react.git

<!-- src/App.vue -->
<template>
  <div class="container">
    <h1>{{ title }}</h1>
    <button @click="handleClick">点击 {{ count }}</button>
    <div v-html="htmlContent"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Kbone + Vue',
      count: 0,
      htmlContent: '<span style="color:red">v-html 可用</span>'
    }
  },
  methods: {
    handleClick() {
      this.count++
      // 直接调用小程序原生 API
      wx.showToast({ title: `点击了 ${this.count} 次` })
    }
  }
}
</script>