小程序学习——第一篇安装开发工具新建项目

多去看看官方文档,地址:https://mp.weixin.qq.com/debug/wxadoc/dev/


1.先去官网下载小程序开发工具

下载地址为:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html


小程序学习——第一篇安装开发工具新建项目

 

根据你计算机系统位数下载相应的版本


2. 下载安装后打开开发工具,用你自己的微信号去扫描二维码进行登录

小程序学习——第一篇安装开发工具新建项目


            选择小程序项目

 


3.点击添加项目。新建一个项目,可以先点击无AppID,填写项目名称和项目目录进行创建

因为我们是学习可以先不用AppID来进行创建项目练习,没有AppID知识部分功能不能使用,并不影响我们的开发,

也可以去注册一个AppID,登录 https://mp.weixin.qq.com ,就可以在网站的“设置”-“开发者设置”中,查看到微信小程序的 AppID 了,注意不可直接使用服务号或订阅号的 AppID 。


                                      小程序学习——第一篇安装开发工具新建项目

 

4.刚打开项目如图所示

 小程序学习——第一篇安装开发工具新建项目

            左边栏:

                        (1). 编辑目录 ,可以看到程序的目录结构,操作的就是目录结构里面的东西

                        (2). 调试  可以看到Console控制台(打印调试的信息),Source下可以打开目录打断点进行调试(一般是js页面) Wxml下可以点在控件上查看它的样式  等等。

                        (3). 项目  中可以点击预览弹出二维码 ,在手机上运行, 由于现在我们的项目是没有AppID的,预览不了;在有AppID的情况下才可以预览(注意:预览就相当于打包,因为微信小程序是很小的(1024kb(1M)限制),

                所以在我们的开发过程中尽量去使用比较小的资源,图片也需压缩,以免超出)。

5.各个目录的作用

        

 小程序学习——第一篇安装开发工具新建项目

 

 pages目录下是你每个子页面的文件夹
 app.json:小程序的公共配置文件,这个是必须的
        每一个要使用的页面都得在它里面配置,如上图所示 "pages/index/index",可以不写后缀
        
 app.js: 小程序的公共逻辑文件 ,必须有的
 app.wxss: 小程序的公共样式文件,可以没有,应为每一个页面的文件夹下都有各自的wxss文件,(如果一个页面引用的样式在自己的样式文件中找不到,就会去app.wxss中找,有的话就会使用。
            如果自己的样式文件中和app.wxss中都有想要引用的样式,则会引用自己的)
utils.js:小程序的工具文件