关于微信小程序实例源码的研究过程（一）

最新推荐文章于 2025-07-10 12:49:09 发布

原创

最新推荐文章于 2025-07-10 12:49:09 发布 · 2.4k 阅读

40 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序

1 部署微信小程序示例源码

通过开始 | 微信开放文档指引，申请微信小程序账号、安装开发者工具，就可以在开放文档的帮助下，进行微信小程序开发了。在了解微信小程序的运行的基础逻辑和框架后，就可以学习微信小程序实例源码了。该源码的git地址为：https://github.com/wechat-miniprogram/miniprogram-demo。根据超级完整的 Git的下载、安装、配置与使用以及命令_git下载-优快云博客的相关内容，安装git工具下载微信小程序实例源码。由于该源码是通过npm安装的，因此要在机器上部署npm环境。通过安装Node.js来部署npm环境，安装方法见Node.js安装与配置（详细步骤）_nodejs安装及环境配置-优快云博客。至此便可以按照示例跑不起来的几个问题，搞了几个小时，终于成功启动 · Issue #125 · wechat-miniprogram/miniprogram-demo · GitHub

的相关提示，完成微信小程序实例源码在机器上的部署了。

2 微信小程序示例源码的安装逻辑

在miniprogram-demo目录下运行npm run init --legacy-peer-deps时，npm执行miniprogram-demo目录下的package.json文件中的scripts字段中的init字段对应的语句。

"scripts": {
    "init": "npm run sync && cd cloudfunctions/ && npm i --production && cd ../miniprogram/ && npm i --production",
    "lint": "eslint .",
    "wxss:transform-vars": "gulp transform-css-vars",
    "sync": "git submodule update --init --recursive",
    "pull": "git submodule foreach --recursive git pull origin",
    "gco": "git submodule foreach --recursive git checkout"
  }

由于nmp运行时要建立Shell，所以执行的语句遵循Shell规则。需要说明，&&表示顺序执行（详见npm scripts（npm 脚本）-优快云博客），所以Shell执行的语句是这样的。

npm run sync
cd cloudfunctions/
npm i --production
cd ../miniprogram/
npm i --production

2.1 运行sync字段对应的语句

git submodule update --init --recursive

下载.gitmodules文件url指定的包（git submodule的用法详见git：git modules_.gitmodules-优快云博客和git创建本地仓库的三种方法-优快云博客），这里下载和更新在miniprogram/packageSkylineExamples目录下的examples目录包。

[submodule "miniprogram/packageSkylineExamples"]
	path = miniprogram/packageSkylineExamples
	url = https://github.com/wechat-miniprogram/awesome-skyline.git