小程序开发之环境搭建

前言：

• 虽然小程序出来已久，但是因为各种原因一直没有去学习，刚好最近公司有小程序的开发任务，所以开始学习小程序的开发。
• 接到任务之后就上网了解了下微信小程序开发所需的一些开发技能，以及对技术要求高低；
• 了解了一些基础之后心里大概有个底，然后开始根据原型图来评估开发所需的时间；
• 技能要求：CSS，JS
• 以下所有的步骤其实微信公众平台都有详细的说明，建议可以直接去微信公众平台看官方说明；
  • 微信官方有关软件介绍下载说明：https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

一、软件下载地址(有win64，win32，和Mac版本)

• https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

二、安装微信Web开发者工具

• 安装过程没什么特别注意的，都比较简单，一步步按提示安装即可，在此不赘述了；

三、创建一个简单的项目

• 1、打开微信Web开发者工具后，用微信登录即可，后续不需要重复登录
• 2、登录后选择对应的项目类型，小程序项目还是公众号网页任务，这里我们选择小程序项目即可，选择之后基础信息如下：
• createProject.png
• 项目目录：项目将要存放的地址，设置后目录之后，会出现建立普通快速启动模板，还是建立插件快速模板；
• AppID：小程序ID具体申请可去微信公众平台查看申请步骤,因为现在还没申请AppID所以直接选择体验就OK；
  • 注册接入流程说明：https://mp.weixin.qq.com/cgi-bin/wx
• 项目名称：如名，没什么好说的；

四、新项目的各个文件说明

• 小程序项目主要文件类型有;
  • .js：逻辑交互，网络请求等操作，类似MVC架构Android项目中的Activity，响应用户在界面的一些操作，控制页面的显示以及与服务器的数据交换
  • .wxss：主要是定义页面中控件的样式，有点类似Android中的View对应的style
  • .wxml：每个页面对应的布局
  • .json ：每个page中的有一个json文件，可以设置页面标题等。。
    • 项目建立之后会有app.json文件，这里面主要定义了状态栏的颜色或者标题颜色等样式；
    • 每个页面需要在此注册，按照Demo中的注册方式仿照注册即可
    • 项目创建之后根目录下有project.config.json文件，里面是项目的基础配置文件，如AppId、项目名称等；

五、软件界面简单说明

• soft.png

六、总结说明

• 这篇主要是对小程序开发环境搭建的一个简单记录，所以不涉及到有关开发语言问题；
• 以上所有的内容其实微信官方都有比较详细的说明，可以直接查看官方文档，权威又详细；
• 开发之初很多东西在微信公众平台都没找到，只能在第三方的博客论坛去找资料，结果后面发现微信公众平台都有。浪费了不少时间。。。
• 上一篇：《写博客的初心》
• 下一篇：《小程序开发之界面编写》