微信小程序 开发工具和项目结构
微信小程序 开发工具和项目结构
开发工具下载
打开微信开发工具下载页面,根据自己的操作下载相应的版本即可,目前(2017年6月20日)开发工具支持windows32位/64位和mac系统,linux暂时不支持.
下载好安装包,按照提示一路安装下去即可,无特殊要注意事项.
新建项目
安装好后第一次开启开发工具会要求用户扫码登录,使用手机微信扫码即可完成此操作.
接下来会问你调试类型,有2个选项:本地小程序项目和公众号网页开发,选择本地小程序项目.
此时可以新建小程序项目了,点击添加项目,进入添加项目界面,这个界面有4个选项,1.appid,本地开发可以暂时不填写此选项,直接点击"无AppID"即可,后期上线的时候记得更新此选项,AppID需要到小程序的后台获取.2.项目名称:随便起一个名字即可,切记不要用中文,本教程中我使用"news_app".3.项目目录:选择项目所在的目录.4.在当前目录中创建quick start项目的意思是创建项目的时候自动创建一个示例程序,建议勾选.直接点击"添加项目"按钮就可以正式进入开发界面了.
界面介绍
开发工具界面包含几个部分:菜单栏,左侧工具栏,项目预览界面,项目结构界面,代码编辑框
菜单栏:包含常见的文件操作,编辑功能,查找替换,编译,跳转等常见功能.
工具栏:包含编辑模式,调试模式,项目信息,后台,缓存和关闭项目.
编辑模式:顾名思义,我们写代码的时候就是用这个模式.
调试模式:编写好代码需要进行调试就选择此模式,可以在调试模式查看控制台输出,网络请求,界面元素,程序运行时的动态数据和源代码等,功能狠强大也很直观.
项目按钮:点击可以对项目进行简单的配置
编译:直接编译编译项目为发布做准备
后台,让小程序进入后台执行再通过不同方式激活小程序,主要用来进行调试.
缓存:可以清空缓存
关闭:直接关闭当前项目以便重新建立新项目或者导入其他项目.
项目结构
一个微信小程序的基本结构如下:
app.js:小程序全局的js文件.
app,json:小程序的通用配置,比如小程序名称,底部导航,网络超时,是否开启debug等.
app.wxss:小程序全局的样式定义,跟css文件类似.
pages目录:默认所有的页面都放再page目录下.
utils目录:第三方工具类js.
为了让初学者不至于迷惑,本教程尽量保持简单,本教程也采用上述结构,当然有经验的开发人员可以根据自己的需求组织项目结构.