微信小程序之小白教程系列 第一篇 微信小程序 -- Hello World

首先你要知道，这是一套微信小程序入门级的教程，原理、理念这些东西通通没有，这里只有同样东西 -- 快速使用并开发。

这个系列主要讲解后端工程师如何快速入门小程序.

本篇为你讲解如何得到开发权限、工具等。

先下个工具再说

微信官方提供了一个小程序的开发工具，经历了几个版本后已经很好用，固然也很消耗内存，如今提供windows和mac平台版本，Linux暂时无缘。

mac上的样子

开发工具下载地址

获取小程序开发帐号

有不少能让你开发小程序的途径，免费的和收费的，一一说来。

体验帐号

使用开发工具就能够新建体验类的小程序，固然既然是体验类，有些好比小程序的微信支付功能等是没法使用的，供学习使用仍是够的。

创建体验项目很简单，见下图。

对的，很方便。

有服务类公众号

若是你有一个服务公众号，那么用你公众号的主体能够直接得到一个免费的小程序，若是你的公众号申请了微信支付，则小程序也能够申请支付功能，不须要任何money。

在上图AppID文本框内输入你的小程序AppID，具体能够在公众号平台用你申请小程序时候设置的帐号和密码登录后获得。

登陆地址 https://mp.weixin.qq.com/
若是你玩公众号则必定不陌生，是一个登陆框。

独立申请

这个是最麻烦的，流程也比较多，要求和公众号申请差很少，若是你须要微信支付等还须要交300元，腾讯是和300干上了。

申请地址 https://mp.weixin.qq.com/cgi-...

具体流程点击后一步一步来就行了。

我推荐去注册一个服务号，而后免费得到一个，这样还多了一个公众号，比较实在。

Hello World

学习一门语言第一步老是要写一个Hello World，我来啦。

按照上面的步骤进入到小程序编辑器页面，你会看到默认的一些文件，咱们来一一说明下，为了方便理解，咱们拿yii来对比说明下。

由此咱们总结以下

• 当咱们访问一个小程序页面，它的路由是pages/controller/action，对应的路径问/pages/controller/action.js
• 业务逻辑实现写在具体的action.js内。
• 不须要render，action.js会主动的加载同级目录下的action.wxml 文件，这就是视图。它里面就是类html标签，只不过咱们经常使用的div在这里变成了view，你可使用style，也能够class。
• 每一个视图会主动加载同名的action.wxss，就是css。只不过只能一级，不能相似于 .box .title {}这样。
• app.wxss也会累加到action.wxml中。

你可能会问model去哪了？咱们只是对比学习，可是小程序毕竟不是mvc，你若是真有一些很公用的能够放到utils文件夹内，而后require就能够。

es6

若是你对前端有必定了解，则无需我多言，小程序的js使用的就是es6的语法，固然你若是不会也不要紧，会一些js也足以搞定。

Hello World

好，接下来写一个hello world，咱们新建一个action页面并放到index控制器下。

咱们叫作hello，新建后多了4个文件，分别是hello.js / hello.wxml / hello.wcss / hello.json。

而且开发工具对文件内容进行了一个初始化，打开hello.js后我无需多言，经过每一个函数的备注你应该就知道了。

由于咱们只是显示，所以我不打算动hello.js而是直接在视图里动手脚。以下图。

好的，接下来看看战绩。

ok啦~

是否是很简单，咱们完成了第一个小程序页面，虽然它意义不大。跟着这个系列，咱们来一块儿了解小程序的方方面面。