wx-cli:简易微信小程序开发脚手架

最新推荐文章于 2025-05-21 23:45:20 发布

weixin_34389926

最新推荐文章于 2025-05-21 23:45:20 发布

阅读量3.1k

点赞数

CC 4.0 BY-SA版权

文章标签： java json 游戏

原文链接：https://juejin.im/post/5c6f73f4f265da2d9710f3aa

本文详细介绍微信小程序的开发流程，包括创建项目、页面与组件的构建、配置更新及环境变量设置等关键步骤。通过具体命令展示如何高效进行小程序的开发、测试与上线。

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

微信小程序 @staven/wx-cli

npm i -g @staven/wx-cli

开发流程

创建

有两种创建方式。appid 可选参数，为小程序 appId。

在目录下创建项目

wx create 项目名 appid
在项目目录里初始化项目

wx init appid

新建 page

自动在 app.json 中添加 pages 或分包路径。第三个参数以非 pages/开头将视为分包创建

wx new pages/demo

生成 pages/demo/index.js(scss/json/wxml)

wx new pages/demo demo

生成 pages/demo/demo.js(scss/json/wxml)

wx new subs/demo

生成 subs/demo/index.js(scss/json/wxml)

wx new subs/demo demo

生成 subs/demo/demo.js(scss/json/wxml)

新建 component

wx comp demo

更新配置

主要更新 gulp 配置，以及依赖

wx update

开发

wx serve

上线

wx build

环境变量配置

在项目根目录下 config.js 配置 serve(开发),build(正式)环境的变量

module.exports = {
  serve: {
    baseApi: 'https://test.com/api',
    source: 'https://test.com/images'
  },
  build: {
    baseApi: 'https://prod.com/api',
    source: 'https://prod.com/images'
  },
}

复制代码

js 文件中使用环境变量

onLoad() {
  const api = `/* @echo baseApi */getCityList`;
}
复制代码

wx build 编译后

onLoad: function onLoad() {
  var api = "https://prod.com/api/getCityList";
}
复制代码

wxml 文件中使用环境变量

<image mode="widthFix" src="<!-- @echo source -->/banner.png"></image>
复制代码

wx build 编译后

onLoad: function onLoad() {
  var image = "https://prod.com/images/banner.png";
}
复制代码