从零开始：微信小程序新手入门

简要说明：

  1. 不了解微信小程序的同学，请先搜索一下微信小程序究竟是什么，有哪些特性；
  2. 有 html、css、js 基础者可以直接进入实践，边实践边学习，尤其是有 react 与 vue 基础的；
  3. 微信小程序不需要特别申请（认证或账号）即可开始使用工具开发；
  4. 微信小程序是需要后台的，不限定任何语言，提供小程序接口要求的 json 格式即可；

一、微信小程序的特点

小程序是一种不需要下载、安装即可使用的应用，它出现了触手可及的梦想，用户扫一扫或者搜一下即开打开应用，也出现了用完即走的理念，用户不用关心安装太多应用的问题，应用随处可用，但又无须安装卸载。

二、微信小程序官方地址

  1. 官方工具：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201714
  2. 简易教程：https://mp.weixin.qq.com/debug/wxadoc/dev/
  3. 设计指南：https://mp.weixin.qq.com/debug/wxadoc/design/index.html；在这里查看如何符合设计标准，仅供参考，非强制性；
  4. 运营规范：https://mp.weixin.qq.com/debug/wxadoc/product/index.html；在这里查看禁止事项；
  5. 接入指南：https://mp.weixin.qq.com/debug/wxadoc/introduction/index.html
  6. 支付文档：https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_3&index=1
  7. 客服消息：https://mp.weixin.qq.com/debug/wxadoc/introduction/custom.html?t=20161221
  8. 特殊行业所需资质材料：https://mp.weixin.qq.com/debug/wxadoc/product/material.html?t=201714
  9. 数据分析：https://mp.weixin.qq.com/debug/wxadoc/analysis/index.html?t=201714
  10. 免费视频：http://www.wxapp-union.com/forum.php?mod=forumdisplay&fid=37&filter=typeid&typeid=7

三、如何学习微信小程序

  • 多看官方文档，多看几遍，遇到问题时要看，没有问题时制造问题也要看；
  • 对感兴趣的部分，把例子抠出来放到 IDE 上运行实验一下，运行没问题就自己瞎折腾例子，深入地分析原理；
  • 自己写个 demo，遇到问题的时候，上小程序联盟或者 github 看看有没有类似的 demo，比较一下彼此的实现方法，自查一下自身的问题以及学习借鉴他人较好的方法；

四、个人开发前必读

对于个人开发和学习的同学，注册一个小程序也是非常简单的，整个过程耗时不到十分钟。

首先，进入微信公众平台官网首页 http://mp.weixin.qq.com， 点击右上角的【立即注册】，在【账户类型】页面中，选择小程序。

index

register

然后根据提示填写你的邮箱、密码。提交后，填写的邮箱会收到一封确认注册邮件，你需要点击邮件中的确认链接，继续注册流程。

需要注意的是，注册小程序所用的邮箱，不能为已经绑定公众号、小程序、个人号的邮箱。

email

确认邮箱之后，你需要填写小程序的主题信息。在这一步，你需要验证你的手机号，并使用你自己的微信扫码确认。

info

主体验证后，你就可以进入到小程序的后台了。

back

最后一步：根据页面提示，补充小程序的名称、图标（头像）、小程序介绍和服务类目。

不过，在发布前，你有三次确定小程序名称的机会（包括首次填写）；发布之后，小程序暂不支持改名。

所以请你仔细想好小程序的名称，再确认注册哦。

title

注册完成，便可以下载【微信 web 开发者工具】，开始开发、发布你的小程序啦！

当然，在未注册小程序的情况下，也是可以先通过开发者工具进行开发的！

开发者工具简介

微信 web 开发者工具项目界面如下 tool page

想要熟悉小程序开发，首先就要熟悉这个开发者工具中默认的小程序目录结构 struct

在项目中，我们可以看到四种文件类型：

  1. .js 后缀的文件是脚本文件，页面的交互等代码在这里实现，学过 web 开发的同学想必都很熟悉它了；
  2. .json 后缀的文件是配置文件，主要是 json 数据格式存放，用于设置程序的配置效果；
  3. .wxss 后缀的是样式表文件，类似于前端中的 css，用于对界面进行美化；
  4. .wxml 后缀的文件是页面结构文件，用于构建页面，在页面上增加控件。
pages 目录介绍

pages: 主要是存放小程序的页面文件，其中每个文件夹为一个页面，每个页面包含四个文件，.wxml 文件是界面文件，.js 是事件交互文件，用于处理界面的点击事件等功能；.wxss 为界面美化文件，让界面显示的更加美观；.json 为配置文件，用于修改导航栏显示样式等，小程序每个页面必须有 .wxml 和 .js 文件，其他两种类型的文件可以不需要。

注意：文件名称必须与页面的文件夹名称相同，如 index 文件夹，文件只能是 index.wxml、index.wxss、index.js 和 index.json.

utils

该文件件主要用于存放全局的一些.js文件，公共用到的一些事件处理代码文件可以放到该文件夹下，用于全局调用。

module.exports = {
	formatTime: formatTime
}

对于允许外部调用的方法，用 module.exports 进行声明，才能在其他 js 文件中用代码引入

var util = require('../../utils/util.js')
app.js、app.json、app.wxss

_app.js : _系统的方法处理文件，主要处理程序的声明周期的一些方法；例如：程序刚开始运行时事件处理等 _app.json : _系统全局配置文件，设置导航头的颜色，字体大小，下面有没有tabbar等功能，具体页面的配置在页面的json文件中单独修改； _app.wxss :_全局的界面美化代码

以上，仅仅只是微信小程序入门时的一些基础学习，想要进一步实践开发出一个好的小程序，还需要更进一步的学习和不断尝试。

大家可以通过开头的一些学习链接进行更深的学习，在此，我就不多加赘述了，相信大家的学习能力，u r 最胖的！