用常见小程序框架开发百度小程序:mpvue、WePY、Okam等

2025-04-09
来源:网络整理

框架开发

除了本机语法的共同开发模式外,Mini程序开发还可以用于应用层框架开发和使用现代框架(VUE/)语法来开发迷你程序以改善开发经验并解决跨平台问题。本文主要解释了如何使用常见的迷你程序框架来开发百度迷你程序。

网站大楼是一家网站建设技术企业,为成都企业提供专业的技术服务,例如网站制作,网站生产,外贸网站建设,网站设计,网站生产,网站生产,网站修订和其他技术服务。拥有十多年的丰富网站建设经验和许多成功的案例,我们可以自定义适合您的网站。质量超过十年,值得信赖!

塔罗步骤1:安装开发工具

安装塔罗开发工具 @/cli;

您可以使用NPM或纱线获得它,也可以直接使用NPX(在NPM 5.2+下)

  1. $ npm install -g @tarojs/cli
  2. $ yarn global add @tarojs/cli

步骤2:初始化项目

用命令创建模板项目

  1. $ taro init swan-taro

您还可以参考芋头来开发百度迷你计划示例

步骤3:安装依赖项

输入项目目录并安装依赖项

  1. $ npm install

步骤4:构建目标代码

删除 - 将不会收听文件修改,并且该代码将被压缩和打包。

  1. # npm script
  2. $ npm run dev:swan // 开发模式
  3. $ npm run build:swan // 线上模式
  4. # 仅限全局安装
  5. $ taro build --type swan --watch
  6. $ taro build --type swan

步骤4:开发人员工具开放项目

有两种打开该项目的方法:

方法1:使用开发人员工具打开生成的DIST目录,调试,预览和上传;

方法2:使用开发人员工具2.8.1及以上打开项目目录,并同时执行以下配置。配置完成后,您可以在开发人员工具中开发,调试,预览和上传。

NPM运行:SWAN添加配置“:” .swan.json文件中(如果您已经具有此配置,请忽略它)在项目信息面板中设置以下自定义预处理说明。步骤1:初始化项目

使用示例项目:

  1. $ git clone git@github.com:hucq/mpvue-platform-sample.git

您还可以参考开发百自苹果的示例

步骤2:安装依赖项

输入项目目录并安装依赖项

  1. $ npm install
  2. $ npm install mpvue@beta mpvue-loader@beta mpvue-template-compiler@beta

步骤3:构建目标代码

  1. $ npm run dev:swan // 开发模式
  2. $ npm run build:swan // 线上模式

步骤4:开发人员工具开放项目

有两种打开该项目的方法:

方法1:使用开发人员工具打开生成的Dist/Swan目录,调试,预览和上传。

方法2:使用开发人员工具2.8.1及以上打开项目目录,并同时执行以下配置。配置完成后,您可以在开发人员工具中开发,调试,预览和上传。

NPM运行:Swan添加配置“:” .swan.json文件中的dist/swan“(如果您已经具有此配置,请忽略)设置了项目信息信息面板中的以下自定义预处理说明。单击“编译”按钮WEPY步骤:安装开发工具

安装Wepy开发工具Wepy-Cli;

  1. $ npm install -g wepy-cli@1.7.3-alpha6

步骤2:初始化项目

用命令创建模板项目

  1. $ wepy init standard

您也可以参考Wepy来开发 Mini计划示例

步骤3:安装依赖项

输入项目目录并安装依赖项

  1. $ npm install

步骤4:构建目标代码

注意:删除 - 将不会收听文件修改,并且代码将被压缩和打包。

  1. # 仅限全局安装
  2. $ wepy build -o baidu --watch
  3. $ wepy build -o baidu

步骤5:开发人员工具预览

选择开发人员工具中项目目录下的DIST目录,以在开发人员工具中预览项目。

OKAM步骤1:安装CLI工具

  1. npm install okam-cli -g

步骤2:初始化项目

  1. okam init my-project
  2. cd my-project
  3. npm install

步骤3:构建对象代码描述

NPM运行开发

与开发模型

NPM Run Dev:

删除构建产品(不包括项目配置文件)并通过开发模式重建它

NPM Run Dev:

使用&&开发模型

NPM运行

删除构建和重建(否&&开发)

NPM运行产品

生产环境的建设

步骤4:开发人员工具开放项目

有两种打开该项目的方法:

方法1:使用开发人员工具打开生成的DIST目录,调试,预览和上传。

方法2:使用开发人员工具2.8.1及以上打开项目目录,并同时执行以下配置。配置完成后,您可以在开发人员工具中开发,调试,预览和上传。

npm Run prod添加了.swan.json文件中的配置“:” DIST(如果您已经具有此配置,请忽略它)在项目信息面板中设置以下自定义预处理说明。点击编译按钮

有关OKAM使用的更多信息,请参阅OKAM文档。

本文的名称:创新 Mini计划教程:框架开发

链接URL:

网站构建和互联网促进公司创新互联网是一家网站制作,重点是品牌和效果,互联网营销SEO公司;服务项目包括

广告

分享