微信小程序如何申请？小白必备！

等来近一年，微信小程序终于正式发布了，对于开发者朋友来说，今后都可以申请创建自己的小程序。那么微信小程序怎么申请？下面“电脑百事网”小编详细分享下从零开始做一个微信小程序的实战开发教程，希望操作步骤，对初期开发者会有所帮助。

微信小程序如何申请？小白必备！
微信小程序开发步骤

微信小程序申请前的准备：

首先，你需要注册一个小程序账号。需要用一个没注册过公众号的邮箱注册。注册过程中需要很多认证，比较繁琐。如果暂时只是试水、没有发布的打算，那么只要完成基本信息填写就可以，不需要完成微信认证。
1 v* S9 R+ Y; Z6 e# N- y. \1 l. M
之后，就可以在公众平台使用注册的帐户进行登录。

. T8 C, D1 L  Z4 t- {2 f: x. g/ q' z然后，在主页面左边列表中点击设置，再设置页面中选开发设置，就可以看到AppID。而AppID 可以用于在开发工具中进行登记，使用开发工具的高级功能。你可以到官网下载开发工具。

开始项目：
" j  L' K/ k3 \$ K: }. g' l1 g
打开开发者工具，选择小程序选项，然后直接点击「添加项目」按钮。我们可以在这个步骤，填入刚才注册的时候使用的 AppID。
" Q% ]$ y: C# O
" t$ H2 o) w0 v0 w" D9 W如果项目目录中的文件是个空文件夹，会提示是否创建 quick start 项目。

* r2 Y* L. i) G" P: t- z% A) ?' v- G选择「是」，开发者工具会帮助我们在开发目录里生成一个简单的 Demo。

这个 Demo 拥有一个完整的小程序的大概框架。

5 d& Q1 }* E+ N. e0 R2 I1. 框架
& }3 ]# `8 h) Q. T) t; W6 [
我们首先看一下官方提供的 Demo 含有的目录：

app.js：小程序逻辑、生命周期、全局变量。

app.json：小程序公共设置、导航栏颜色等，不可以注释。
: @( D5 k* k& W3 g) l) J! ]
app.wxss：小程序公共样式，类似 CSS 。

0 j9 ^4 [9 C; K$ X% v5 Z8 |小程序页面构成类似这样：

9 K  H# F6 ~( M, a每一个小程序页面是由同路径下同名的四个不同后缀文件的组成，如：index.js、index.wxml、index.wxss、index.json
4 ^: q1 d6 Y& @
微信小程序中的每一个页面的路径和页面文件名，都需要写在app.json的pages中，且pages数组中的第一个页面是小程序的首页。

2 w& e: W1 Q8 |5 n! g* y这四个文件按照功能可以分成三个部分：

6 c6 a# l$ B# I; T( M配置：json 文件

5 w# K& ~# j3 Q* i, i( z+ ~逻辑层：js 文件
4 W0 c% x2 J/ F$ Y9 n
1 Y/ F/ x( \( o) Z) g6 Y5 m! C视图层：wxss.wxml 文件

在 iOS 上，小程序的逻辑代码运行于 JavaScriptCore 中，而在 Android上，这个任务则是交给 X5 内核来完成。

在 开发工具上， 小程序的 JavaScript 代码是运行在 NW.js（Chrome 内核） 中。这也导致开发工具上的效果跟实际效果有所出入。
( n9 p" o' K# T( d: j
: Q( w; X& W) L% a2. 组件
$ ~# j, a; z: i9 N% A3 _& Z9 V* f
微信提供了许多组件，主要分为八种:

这其中，包含了view、scroll-view、button、form等普通常用的组件，也提供了地图mapcanvas
/ E) J/ b8 S7 ~: N) _
8 g' W; g$ t" K0 x3 F) H组件主要属于视图层，通过 WXML 来进行结构布局，类似于 HTML。样式则通过 WXSS 来定义和修改，它的语法和使用都近似 CSS。

$ `. n( f4 I$ t组件使用语法实例：
8 d5 D- }" v: D; o) ]
, J* ]8 s- M- _<><>

3. API
5 A- E* j9 ~! ]% J) f5 J
; j6 i4 o! ^' T网络
1 ?2 a) o( {6 g. h4 g7 ^; U
媒体
1 D" T7 R- U& j) j$ {* a. @" J
数据

1 r9 L# H( d/ H1 ?& @位置
" @  [# t" H9 q9 ^0 e3 G$ a) |( U6 `! [
0 U) b% l! F* }2 u* l' H设备
2 j! }' x  T% j; w/ o( i+ n5 u" M
8 u6 ?: j; D" B2 \$ @$ v5 W: P! E界面
* [2 k- x" v6 J
& N. A7 u5 T& @. s5 c开发接口

; W4 l2 K8 ^) J& q8 N7 g网络请求接口包含了普通的 HTTPS 请求，支持上传、下载、Socket，基本上满足了我们开发中所需要的网络需求。
3 x' `5 F( S* B  G
这些 API 属于逻辑层，写在 JS 逻辑文件中。

使用实例：

% ^  @8 x8 j) V# fwx.getLocation({ type: 'wgs84', success: function(res) { var latitude = res.latitude var longitude = res.longitude var speed = res.speed var accuracy = res.accuracy } })
  Q; l- K' b, \: J
可以到官方文档 – API 查看其它 API 的使用方法。
+ P9 w2 j. V6 i" Y
编译运行
1 H4 i5 l9 N4 l1 B- W. I
1. 模拟器调试
+ l% F0 x; j0 h. w5 Q! i
我们可以在微信提供的开发者工具中，使用模拟器查看小程序运行的效果。
+ j' S% D. G- L5 F6 s8 {( h
之前我们提过，小程序的运行底层不同，这也导致在模拟器上的效果，会与在手机上运行有些差异。

2. 真机调试

0 v; t% r+ U. y- n% {- Q6 N2 Q7 Q7 h在左边的选项栏中，选择项目，然后点预览会生产一个二维码，用管理员微信号扫一扫，就可以在真机上看实际效果。

看完了以上的教程，如果您还是不会，没关系，陕西瑞奇网络科技有限公司专注于移动互联网整体解决方案。我们是微信小程序，微信公众平台和APP的开发、运营、推广全方案的服务商，专注为你！你还等什么？

! |2 ]7 e) z% V+ o: @

沙发！沙发！沙发！

说得很实在，没有夸大其词，这种真实分享太难得了

分析得很透彻，很多细节都说到点子上了～

完全赞同，我也是这么认为的，英雄所见略同～

楼主太厉害了，整理得这么详细，必须支持

学习到了，之前一直没注意过这个点，受教了

刚好遇到类似问题，看完这个帖子心里有底了

楼主辛苦了，整理这么多内容，必须点赞收藏

这个分享太实用了，刚好能用到，感谢楼主！

内容很干货，没有多余的废话，值得反复看