创建微信小程序的几种方式

dralexsanderl

已于 2023-06-26 00:31:34 修改

阅读量4.1k

点赞数 4

分类专栏：微信小程序文章标签：微信小程序前端 javascript

于 2023-06-26 00:27:06 首次发布

本文链接：https://blog.csdn.net/qq_42880714/article/details/131386389

版权

微信小程序专栏收录该内容

6 篇文章

订阅专栏

文章介绍了创建微信小程序的四种主要方式：使用原生的微信开发者工具，通过kbone实现Web端和小程序的同构，利用uni-app开发多平台应用，以及使用Taro框架进行跨端跨框架开发。每种方式都有其特点，如原生适合熟悉微信小程序API的开发者，kbone支持Vue等流行框架，uni-app覆盖广泛平台，Taro则支持React、Vue等框架。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建微信小程序的几种方式

1. 使用原生方式

在官网上下载微信开发者工具，之后使用微信开发者工具新建项目即可。

在这里插入图片描述

微信这边提供了多个模板，可以直接下载模板快速搭建上线，也可以使用空白模板根据需求自行编写。

空白模板项目结构：

在这里插入图片描述

对于刚接触小程序的开发者来说存在一些问题：

标签与普通HTML不同，对于web开发来说需要一定的时间进行适应。
项目结构不同，每个页面需要放在一个单独的文件夹（script、template、style单独放在一个文件里）

2. kbone

kbone是微信推出的一个致力于微信小程序和 Web 端同构的解决方案。

kbone 通过实现一个适配器，在适配层里模拟出了浏览器环境，让 Web 端的代码可以不做什么改动便可运行在小程序里。

因为 kbone 是通过提供适配器的方式来实现同构，所以它的优势很明显：

大部分流行的前端框架都能够在 kbone 上运行，比如 Vue、React、Preact 等。
支持更为完整的前端框架特性，因为 kbone 不会对框架底层进行删改（比如 Vue 中的 v-html 指令、Vue-router 插件）。
提供了常用的 dom/bom 接口，让用户代码无需做太大改动便可从 Web 端迁移到小程序端。
在小程序端运行时，仍然可以使用小程序本身的特性（比如像 live-player 内置组件、分包功能）。
提供了一些 Dom 扩展接口，让一些无法完美兼容到小程序端的接口也有替代使用方案（比如 getComputedStyle 接口）。

使用

使用 kbone-cli 快速开发

安装kbone-cli脚手架

npm install -g kbone-cli

创建项目，可以选择对应的模板：

kbone init miniprogram2

在这里插入图片描述

示例选择vue模板

模板下载好后根据提示指令命令即可：

# 跳转目录
cd miniprogram

# 开发小程序
npm run mp

# 开发 Web
npm run web
# 发布 Web
npm run build

目录结构为：

在这里插入图片描述

使用模板快速开发

将现有模板 clone 下来，然后在模板基础上进行开发。

3. uniapp

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到IOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

下载Hbuilder通过可视化页面创建项目

在这里插入图片描述

目录结构为：

HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。

4. Taro

Taro 是一个开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ / 飞书小程序 / H5 / RN 等应用。

安装脚手架后创建项目：

# 使用 npm 安装 CLI
npm install -g @tarojs/cli

# 使用 yarn 安装 CLI
yarn global add @tarojs/cli

# 安装了 cnpm，使用 cnpm 安装 CLI
cnpm install -g @tarojs/cli

创建项目：

taro init miniprogram3

在这里插入图片描述

当然市面上还有其他类似mpvue这样也能创建微信小程序，不过由于这些使用的人较少，加上一些已经停止维护了，因为本文并不做介绍。