等来近一年，微信小程序终于正式发布了，对于开发者朋友来说，今后都可以申请创建自己的小程序。那么微信小程序怎么申请？下面“电脑百事网”小编详细分享下从零开始做一个微信小程序的实战开发教程，希望操作步骤，对初期开发者会有所帮助。
6 W" J* r4 Y4 Z- J) ]% E0 g/ {! C8 n
微信小程序如何申请？小白必备！
) _6 o- }9 \5 ?" j. k: X! R8 I1 f微信小程序开发步骤- t# U: H9 Z2 `( w0 b- l
; b6 A$ k! P! @; u$ x微信小程序申请前的准备：+ M6 I: i. B* G F2 C
7 K8 m4 \9 u5 g# |: D
首先，你需要注册一个小程序账号。需要用一个没注册过公众号的邮箱注册。注册过程中需要很多认证，比较繁琐。如果暂时只是试水、没有发布的打算，那么只要完成基本信息填写就可以，不需要完成微信认证。; Y8 v( Z# \/ a
# @" p# D- H5 l之后，就可以在公众平台使用注册的帐户进行登录。
1 f+ y% H& J$ ]$ [! a2 B, D* e, E# z [. m2 W
然后，在主页面左边列表中点击设置，再设置页面中选开发设置，就可以看到AppID。而AppID 可以用于在开发工具中进行登记，使用开发工具的高级功能。你可以到官网下载开发工具。
, R" G' X7 I) Q' r
7 ~6 B3 Y4 `& D+ S W* V) R开始项目：
/ r$ k$ }( B$ w. \
( } u: e9 B+ q, N& f+ _# S6 }打开开发者工具，选择小程序选项，然后直接点击「添加项目」按钮。我们可以在这个步骤，填入刚才注册的时候使用的 AppID。5 e; L; P' C0 e3 T6 n- L$ O
+ ^) M7 h2 E8 ] b5 G. `& Z6 [0 B! `
如果项目目录中的文件是个空文件夹，会提示是否创建 quick start 项目。
6 H* L3 I* X3 a& E; v8 [8 ?( h' @+ F5 R! W) ?3 q z
选择「是」，开发者工具会帮助我们在开发目录里生成一个简单的 Demo。
2 b, @0 f0 D) e/ a6 ?% Y" J& t% L! e4 ^+ T
这个 Demo 拥有一个完整的小程序的大概框架。
" l& e8 u3 ]5 U) r4 c* c" Y. E; G# g" r* @" |1 n) w3 N
1. 框架
% H5 E. Z, j$ V
. Z% _: A# F6 c, ] g1 W) t: [% M我们首先看一下官方提供的 Demo 含有的目录：
9 c% F' F- a5 R9 j9 N" {& Z# L
5 n4 K% L" r6 K0 x$ kapp.js：小程序逻辑、生命周期、全局变量。; t! P# p) p6 x* q0 Y
$ D1 u; N' ~( iapp.json：小程序公共设置、导航栏颜色等，不可以注释。# G4 R! u- A W" U' V
+ M; H+ F% i( r7 d: n' c9 H. Z
app.wxss：小程序公共样式，类似 CSS 。6 U+ z% V) d O! Q. t) H% O
' ?7 C6 F$ C+ F; B j
小程序页面构成类似这样：+ m( x) k2 m. }
& w* p# P! P# B( l每一个小程序页面是由同路径下同名的四个不同后缀文件的组成，如：index.js、index.wxml、index.wxss、index.json/ n+ K+ @0 Y; ~2 w3 b- l
A7 s. i6 W2 m4 R
微信小程序中的每一个页面的路径和页面文件名，都需要写在app.json的pages中，且pages数组中的第一个页面是小程序的首页。
8 R( a: g( ]1 [2 _% p' m8 E
# b1 g# s4 ^% X4 E) I这四个文件按照功能可以分成三个部分：
3 `. Z/ c7 G0 A# c; ^
3 t" A' T1 T# }9 y. k配置：json 文件- ]7 K4 W' A; J+ P: \* N _
2 \9 ]0 f' u5 O% u0 m: s
逻辑层：js 文件: a' v2 w3 s; O; A8 H6 k
4 c& ?% t" ^8 @! k. w! t视图层：wxss.wxml 文件
3 d& X' C' N5 p
- a. X1 V! K, } J+ b: ?在 iOS 上，小程序的逻辑代码运行于 JavaScriptCore 中，而在 Android上，这个任务则是交给 X5 内核来完成。
" ?; ^+ M+ E7 [/ }* a$ G! X, A$ Z' h' B
在 开发工具上， 小程序的 JavaScript 代码是运行在 NW.js（Chrome 内核） 中。这也导致开发工具上的效果跟实际效果有所出入。, n) }$ [" Q7 W/ h5 H+ ?) i
0 k; b( d2 q3 T( k/ d- E2. 组件( d9 z+ L# s0 l2 k2 R- r" E
% b' [! b c% }( h; K
微信提供了许多组件，主要分为八种:, A5 n. T/ T' ~6 V9 w
" O3 C' `# C! ~; i* _! u' X这其中，包含了view、scroll-view、button、form等普通常用的组件，也提供了地图mapcanvas
! T" f, h+ s1 b3 j+ `- Q2 r0 j3 I7 ]0 q8 H Y2 C
组件主要属于视图层，通过 WXML 来进行结构布局，类似于 HTML。样式则通过 WXSS 来定义和修改，它的语法和使用都近似 CSS。# z5 Z: \; p5 D" w. O. I- y: J
8 k7 d: h( [( N( K; W组件使用语法实例：8 X7 x' M/ p* R1 y9 w( ?% |
' z2 n2 s! B: c& p+ D: V
<><>4 x7 i$ Z- N/ n- n! |: W8 d+ {
1 x9 m, C; j0 f W8 ]1 Q
3. API2 M6 D% G2 E: y4 E ~4 \% B
6 z& g: t, R7 e2 d/ m- c网络
- X* i* J+ i7 e6 Q1 s7 Q% h+ p: |1 p- K* L, p/ c" L8 X
媒体
1 ]( d' R* d& q) B& g' p; M# c" C7 E! O/ Y! J2 C
数据' `4 p; z$ o+ \1 D" E' R
' K5 }: [0 i: u8 Y
位置* i' K F3 K1 G- X6 A5 G
" }6 T% [" S& R9 @9 g设备
9 J$ Q0 c- j' P+ J( P, I
' m) j0 o- ]1 {界面8 \& k4 Y! y# o' F$ H& J
- F( a6 a0 A0 m+ a7 L
开发接口
: b1 b- O6 D7 `- X
; z ]* M2 n& c2 }) i; @网络请求接口包含了普通的 HTTPS 请求，支持上传、下载、Socket，基本上满足了我们开发中所需要的网络需求。) C& h' @ X$ [# h9 `& a" b& V
7 ^/ t% Q7 [$ Q& M& v; Z$ }这些 API 属于逻辑层，写在 JS 逻辑文件中。1 z: _6 i) f# Y9 v& s
8 J: _5 E% c& Y4 q4 g! n- ~; ]
使用实例：3 V. G d1 K% Z& U% ^- j. d
! T: C- |8 r0 V7 @" u- {: \) A9 o
wx.getLocation({ type: 'wgs84', success: function(res) { var latitude = res.latitude var longitude = res.longitude var speed = res.speed var accuracy = res.accuracy } })
$ ` A$ {" E4 Q; P1 s! A
6 U8 o5 s) l8 c- r可以到官方文档 – API 查看其它 API 的使用方法。
& `" F6 D5 \ ?& |3 k4 b9 `1 X, o8 v2 l: m/ E7 i6 d% n1 u
编译运行" n0 R) S. @ H& |2 `6 [8 B7 K$ m
9 F# j8 w* B$ K4 |* x! D1. 模拟器调试+ ]0 g7 q! w8 i3 b1 E
6 [. k* h- z" m+ l- i; B我们可以在微信提供的开发者工具中，使用模拟器查看小程序运行的效果。% Z8 r6 [8 @8 M+ B. V7 p& }) G
* Q0 u s: u4 h* j
之前我们提过，小程序的运行底层不同，这也导致在模拟器上的效果，会与在手机上运行有些差异。( l3 h/ ]8 b4 J5 I c
3 n1 b4 q5 L3 B8 V
2. 真机调试
0 t5 T2 h/ K0 T! i; V/ M; w7 x6 |# B6 l2 @
* q$ @+ m* d4 |在左边的选项栏中，选择项目，然后点预览会生产一个二维码，用管理员微信号扫一扫，就可以在真机上看实际效果。
5 G* @/ m" W+ ]( {( s( c' j7 k! f/ f$ _
看完了以上的教程，如果您还是不会，没关系，陕西瑞奇网络科技有限公司专注于移动互联网整体解决方案。我们是微信小程序，微信公众平台和APP的开发、运营、推广全方案的服务商，专注为你！你还等什么？, ?9 K' J' o& x `
9 U- @* ^& S& k, z- t |
沙发！沙发！沙发！