02、微信小程序之 开发环境

232 阅读2分钟

教程简介

  • 1、阅读范围

本篇教程适合新手阅读,老手直接略过

  • 2、教程难度

    初级

1、小程序的开发环境

1、下载开发工具

  • 1、开发工具有三个分别针对windows 64 、 windows 32 、 mac 三个平台来去下载工具,这没有什么好说的,然后一路安装即可。

mini_app_dev.png

对应的下载地址:mp.weixin.qq.com/debug/wxado…

  • 2、新建一个Demo

这里假设你已经安装了小程序的开发环境,我们直接创建项目。

1、打开开发工具,开发工具长以下样子

mini_app_devhome.png

注意,如果是首次打开的时候会让你扫描一下二维来确定登录开发者工具。并且只有添加项目这个选项。

2、点击添加项目按钮

add_project.png

3、点击添加项目按钮,此时项目就会创建成功了

app_home.png

到此为止我们的开发环境基本上就讲完了,这没有什么好说的,没有复杂的配置流程

2、小程序开发工具和项目结构

1、小程序的开发环境简介

tools_show.png

从图可知,这基本上也没有什么说的,我们点点基本上就知道各个功能是干什么的,这里特别要说一点就是,开发工具现在支持ctrl+s保存自动刷新功能(以前是要重新编译一下才可以),再一个就是在调试环境下就是把chrome的调试功能集成了进来,我们可以快速的定位错误和查找问题。

2、小程序的项目结构

小程序的项目结构分为主体部分和页面部分,主体部分小程序必不可少的部分。

  • 1、一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:

app_main_part.png

由图可以看出,小程序的主体部分由三部分组成,并且必须放在项目的根目录,其中样式表不是必须的。名字必须叫app.js,app.json,app.wxss,不能胡乱更改。

  • 2、小程序的界面由四分部分组成

page_part.png

由图可知,小程序的页面由四部分组成,其中样式表和json文件不是必须的。

  • 3、对应项目中的结构

project_part.png

3、推荐阅读

具体细节可以看官方的教程:mp.weixin.qq.com/debug/wxado…mp.weixin.qq.com/debug/wxado…