微信小程序开发入坑指，小程序公众号开发方案

从去年一月份微信宣告要做小程序时的圈子里已经有了局部躁动去年九月内测时更是全民热捧SEO外链方法更是全民热捧似乎张晓龙和他的微信已经准备好再一次改变世界。还好微信比它的粉丝们要理智的多不做分发不搞渠道不发“红利”所以昨天正式发布时也并没有想象中的所有人一起迎接新世界到来的景象。OSC上有人发帖问“微信小程序就要发布了,大家激动吗”底下居然都已经有人开喷了。。
但是话说回来从技术角度看微信为我们提供了基于微信本身的新应用场景下的新技术那么作为一个开发者对他有所了解还是有必要的。对于一个新技术对其建立一个相对清晰的概念是最重要的事情因为有了一个大概的印象之后任何程序员都可以很快的学习和进步。因此这篇文章我不会照抄文档也不会讲一些“高深”的东西我们来解决初次接触无从下手的问题。学习怎么做出“Hell World”

微信小程序官网：微信小程序官方网站
微信小程序开发工具下载地址：微信小程序下载地址

首先是登录界面这里我们需要扫描二维码进入即使我们没有在微信公众平台上申请注册小程序也是可以扫描登陆的所以无需担心直接用自己的微信扫描并登录即可。

然后在接下来出现的界面中点击加号图片来建立我们的项目。

创建项目

创建项目

这里有几点需要注意：

如果已经申请到了小程序权限那么直接填对应的Appid即可如果没有的话直接点击无AppID选项则可以创建本地项目。

微信Web开发者工具在创建项目的时候不会创建跟项目同名的项目文件夹所以项目文件夹请提前手动创建好

不要为了图方便直接创建项目到桌面mac版的开发工具无法在桌面创建项目。

最后的创建quick start项目 如果勾选的话微信会在项目初始化后创建一个登录界面和打印日志的界面是否勾选看个人意愿。初次使用的同学建议勾选上可以更方便的对小程序有个初步认识。

开发工具界面

项目创建完毕后呈现给我们的就是主界面了。先说明一下左侧四个按钮的含义

编辑：主要的开发界面提供效果预览代码编辑器,并可以对项目配置文件编辑添加删除和管理

调试：主要的调试界面提供效果预览代码编辑器控制台输出断点调试性能监控等功能

项目：项目的总体设置

关闭：关闭项目

初始化项目目录

上图红色方框圈中的地方就是我们初始化之后的项目目录。
其中app.jsapp.json和app.wxss文件时属于整个项目的全局文件。

app.js：我们在这里注册程序并将对程序做初始化的操作放在这里做iOS的同学可以认为这就是AppDelgete文件

app.json：我们在这里对App进行全局配置决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等

app.wxss文件：全局的样式文件你可以认为就是微信版的css文件实际用法也和css几乎一样

接下来是页面的结构微信小程序中每个页面对应四个文件分别为.js .json .wxml 和.wxss

.wxml文件是布局文件实际上接触过reactnative的同学一眼就发现了微信采用了和rc相似度极高的JSX语法刚开始可能看着别扭但实际学习成本很低很快就可以上手。

对于每个页面.wxml文件和.js文件都是必须的其他两个则可有可无如果有的话在选择样式或者配置时优先使用和自己同名的文件里的配置。

需要特别说明的是如果不打算给页面写单独的配置文件不要创建空白的.json文件会导致页面路径查找失败。

之前说了那么多概念记不住也没关系我们接下来通过动手来熟悉他们。
首先我们来试着添加代码“index.wxml”这个文件。

点击左侧的编辑按钮在右侧的文件目录中找到index.wxml文件然后随便写几句.

微信小程序提供的组件还是相对比较丰富的具体支持的组件大家可以移步文档查看。

标签： 项目微信文件创建