上一篇文章导航:
须知:注:不同版本选项有所不同,并无大碍。
一、创建小程序项目整体预览:
1.点击"加号"按钮:
![](https://i-blog.csdnimg.cn/direct/70d1a783656445d699399d4ba4b94712.png)
2.填写项目信息:
新建项目->新建文件夹将项目放入其中
**导入项目:**是导入现成的已经制作好的项目。
![](https://i-blog.csdnimg.cn/direct/e13d6100d3c2469199a15a8aa5ea2881.png)
3.项目创建完成:
创建完成后的项目如下:
![](https://i-blog.csdnimg.cn/direct/4348d836705846ae904222ab900f19fc.png)
二、整体创建流程:
1.创建文件夹存放小程序项目代码:
在本地创建存放小程序项目代码的文件夹。
![](https://i-blog.csdnimg.cn/direct/32dff9d0380042cabf5f885e03090d60.png)
2.打开"加号"按钮创建:
![](https://i-blog.csdnimg.cn/direct/6287c6a5b64548e4afa34d297e8621b2.png)
3.填写项目信息:
**路径:**上一步创建的地址。
填写自己的AppID号: 登录微信小程序管理后台微信公众平台,选择开发选项,找到自己小程序的AppID(在之后创建小程序项目时会用到)。
**开发模式:**小程序
**后端服务:**不使用云服务
选好后点击"新建"按钮。
注:不同版本选项有所不同,并无大碍。
![](https://i-blog.csdnimg.cn/direct/ae1bfed055c342b68647286a07d13b16.png)
![](https://i-blog.csdnimg.cn/direct/34002f7da43546ac9a4683467f2e5a3b.png)
4.预览项目效果:
-在模拟器上查看项目效果:
点击"**编译"**按钮后,即可在左侧的框中看到最新效果。
![](https://i-blog.csdnimg.cn/direct/75fa548d1864415db7098e39fabc9d16.png)
-在真机上预览项目效果:
在真正的手机上查看项目效果,点击"**预览"**按钮。
![](https://i-blog.csdnimg.cn/direct/78204393c0804cef9f1e393fe9469457.png)
5.主界面的5个组成部分:
![](https://i-blog.csdnimg.cn/direct/356e297a54ca4e4f9cd8f575c10863eb.png)
①菜单栏:
"帮助"->"开发者文档":在实际开发中会遇到一些小程序对应组件的使用文档或api的使用文档。
如何快速打开api文档?
---"帮助"->"开发者文档"
![](https://i-blog.csdnimg.cn/direct/92a1b3cd071141bba6ab252eeef322c5.png)
![](https://i-blog.csdnimg.cn/direct/6e0c1ea1a6b64afaac15fc4f74053aae.png)
"设置"->"通用设置":对项目的外观,代理,快捷键进行设置。
![](https://i-blog.csdnimg.cn/direct/c0e1e620b8b2421c8ec5df551380218c.png)
![](https://i-blog.csdnimg.cn/direct/f0dab2fd87584b718ecaeccf543d8aaa.png)
"工具":常用的有"编译","预览","插件","构建npm"。
![](https://i-blog.csdnimg.cn/direct/add3748a2b414b0893bb00e48703011e.png)
②工具栏:
左侧三按钮:"模拟器","编辑器","调试器"。需要隐藏"模拟器",只需点击"模拟器"按钮即可。其他同理。
![](https://i-blog.csdnimg.cn/direct/950bd7ee67284e928b655ea05279c006.png)
中部的四按钮:"编译","预览"。
**"编译"**按钮:快速刷新模拟器里的最新效果。
"预览"按钮:在真机上查看小程序的实际效果。
![](https://i-blog.csdnimg.cn/direct/6bf461434466409cba3b3e5c48258710.png)
右侧按钮:"详情","上传"。
"详情"按钮:查看项目的基本信息。
注:如果拿到其他人的项目,第一时间需要将其AppID修改为自己的AppID号。(具体操作:点击"详情"->"基本信息"->"AppID"进行修改)
![](https://i-blog.csdnimg.cn/direct/c6d4cab9a5eb418da2dc09f3a9420853.png)
![](https://i-blog.csdnimg.cn/direct/2cb3d7f2807c454b8a0e83e6220a818c.png)
"详情"->"本地设置":一些候选框,项目的编译选项。
![](https://i-blog.csdnimg.cn/direct/2010b7927d074869ae7aebcabba08430.png)
③模拟器:
左上角"机型 ":建议选择iPhone6、7、8。
![](https://i-blog.csdnimg.cn/direct/20fb9f55818e4d079589c55dc35133e1.png)
倘若模拟器不能在一个页面内完全显示,进行"显示比例 "更改,调整为85%。
![](https://i-blog.csdnimg.cn/direct/78b58c4caf6248b0a7a5d84f5d3ce146.png)
④代码编辑区:
选择左侧相应目录,进行相关代码的编写。
![](https://i-blog.csdnimg.cn/direct/2cea343e9d874c7f98fe9c47ef603d87.png)
⑤调试区:
调试器 里面最常使用的是:**"Console"**控制面板。
![](https://i-blog.csdnimg.cn/direct/cf55e250a5544fbe885e3ecd0dceb803.png)
左上角的小箭头,如图所示:可将代码区与模拟区进行对应。
![](https://i-blog.csdnimg.cn/direct/a63626711af54e0388457a718963dc77.png)
下篇文章导航:
本系列持续更新中...