如何下载、配置环境、运行该Demo，可先行体验
发表时间：2023-09-22 13:35:36
文章来源：炫佑科技
浏览次数：183
菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技
如何下载、配置环境、运行该Demo，可先行体验
微信小程序的官方文档提供了很棒的示例程序Demo，以及各个组件的详细使用说明。 本文介绍如何下载、配置环境、运行Demo，主要包括：下载、安装环境、用nmp安装一些包、在小程序开发工具中运行等。
本文假设您已经具备微信小程序开发的基本技能，例如创建新的小程序、创建自己的开发ID等，如果没有，请继续
小程序二维码如下，您可以先体验一下。
1.下载官方示例小程序代码
1. 进入首页。 连接地址给定如何下载、配置环境、运行该Demo，可先行体验，点击：。
2.下载。 点击右上角绿色的“代码”按钮，选择zip，下载到你想放的目录下。这里我放在“/D/.../ ”文件夹下。 （注意图1.2中，我这里的文件夹比官方的多了一个文件夹，这是下一步构建npm生成的。）
图1.1 官方示例小程序首页
图1.2 下载目录
2. 安装
是npm的运行环境，需要提前下载。 如果您的计算机上已安装并配置它，请转至第 3 部分。
2.1 下载
进入官网，根据自己的电脑系统选择合适的安装包。 这里我选择.msi。
图2.1 下载node.js
2.2 安装并设置系统变量
1. 运行安装。 我安装在D盘。 安装完成后会出现一个文件夹，安装完毕。 所以我的路径是D:\\。
图2.2 安装位置
2.添加环境变量。 按理来说，这个路径应该被添加到环境变量Path中，但是我添加的不完整，导致我无法将其应用到其他文件夹中。 所以系统变量是手动设置的。 本机->属性->高级系统设置->高级->环境变量->双击系统变量中的路径。 *后一行写入刚才的路径D:\\并确认。
图2.3 添加环境变量
单击：新建、编辑和确定
图2.4 新建环境变量
3.进入demo文件夹，用npm安装一堆包
安装一些实例小程序所依赖的包，否则会报错。
cmd到下载的官方文件夹：在cmd中按照官方给出的顺序运行以下命令。 安装完成后，就会出现我之前提到的文件夹，这个文件夹里也有文件。
npm i
cd miniprogram
npm i4.导入官方示例
只需正常导入即可，然后就可以看到全部完整的代码了。 打开后需要一段时间编译，然后过一会儿就显示一切了。
图4.1 导入项目
图4.2小程序页面
5.可能出现的问题：每次保存都会出现错误代码：-10007
我检查了一下，是数据预取调试的问题。 您可以进入详细信息->本地设置->关闭数据预取调试（取消勾选）
图 5.1 本地设置
有什么不清楚的地方请留言微信小程序开发工具使用，我们一起成长！
