等来近一年，微信小程序终于正式发布了，对于开发者朋友来说，今后都可以申请创建自己的小程序。那么微信小程序怎么申请？下面“电脑百事网”小编详细分享下从零开始做一个微信小程序的实战开发教程，希望操作步骤，对初期开发者会有所帮助。
{8 D" d% c! L! @/ N
& Y% ~8 n8 W: q微信小程序如何申请？小白必备！- |1 f# Z& I! H4 W9 @4 V
微信小程序开发步骤
5 k% P& J& Y- m: q2 J! Z
" U* {3 z! p% V7 X微信小程序申请前的准备：# V. m( y7 _7 L G% Q7 m
8 B6 a% ^8 A3 s首先，你需要注册一个小程序账号。需要用一个没注册过公众号的邮箱注册。注册过程中需要很多认证，比较繁琐。如果暂时只是试水、没有发布的打算，那么只要完成基本信息填写就可以，不需要完成微信认证。/ [" m; y7 E, q$ Y
% K% W; S2 j1 x6 L* p
之后，就可以在公众平台使用注册的帐户进行登录。5 S& J" Z1 t, g) S& T+ \
$ U2 ?9 @! z9 N* K; f; S然后，在主页面左边列表中点击设置，再设置页面中选开发设置，就可以看到AppID。而AppID 可以用于在开发工具中进行登记，使用开发工具的高级功能。你可以到官网下载开发工具。7 y U7 Y; L4 ]/ i! I7 ^* u
8 i; L9 M$ q% w; A' |
开始项目：8 A9 {: [# s, J5 W% l S i b
4 g' k x/ W( y8 S# c i打开开发者工具，选择小程序选项，然后直接点击「添加项目」按钮。我们可以在这个步骤，填入刚才注册的时候使用的 AppID。
+ _0 _, _* @+ B2 u, M3 v; W1 D1 l
+ S& f0 a, x/ ?, J: u如果项目目录中的文件是个空文件夹，会提示是否创建 quick start 项目。# c" k3 A; Y+ }: C
+ O, @ W5 V7 {* v k选择「是」，开发者工具会帮助我们在开发目录里生成一个简单的 Demo。
: g8 [, \0 f: o" d4 \; @
0 x: q1 E8 c/ f: u, o" @: F! E这个 Demo 拥有一个完整的小程序的大概框架。/ u- p7 r* }: X6 c1 U
) g' m% S* |+ H7 r8 D2 _) s( N) v" H
1. 框架
9 D( E5 g) a+ u* k0 F+ I
. H( K! ?9 I9 V/ a8 q* R+ G& x9 p我们首先看一下官方提供的 Demo 含有的目录：, [$ s& Q; h0 n3 X
4 J( v9 ]& |6 `7 x6 z: j3 }
app.js：小程序逻辑、生命周期、全局变量。+ y2 P/ m4 ?7 D! W
7 Z: | ~1 n5 M* X
app.json：小程序公共设置、导航栏颜色等，不可以注释。6 T1 p& K/ J: w9 e& s+ I+ E; q$ q# T
/ K8 V' y H: F8 d' U( s. D' f( mapp.wxss：小程序公共样式，类似 CSS 。
. f4 Y, y4 m& F/ V- p2 c# t* d J- X9 E7 b0 b- ~
小程序页面构成类似这样：( ~/ \) R) O/ O7 R j0 O4 B/ ]) R
8 c1 A3 s4 P+ Z/ ^! P8 e
每一个小程序页面是由同路径下同名的四个不同后缀文件的组成，如：index.js、index.wxml、index.wxss、index.json1 q& c- s* p/ u c. A' m0 n
% h; k! r* D. a& ] {# p4 _# U
微信小程序中的每一个页面的路径和页面文件名，都需要写在app.json的pages中，且pages数组中的第一个页面是小程序的首页。
6 |) }: j Z. `" c1 w0 h: v( N* c4 \& k* n& z% u' K
这四个文件按照功能可以分成三个部分：. \7 D- s& q; c. f
4 ?3 x; x7 F1 T; O& H3 V: K# g配置：json 文件% e1 W+ h' ^, j# c
/ E& v8 j5 Q$ k% ?7 `# [
逻辑层：js 文件
; y5 u1 L1 z9 F( W& d R, [$ X+ f7 U) o4 U: n7 l' D/ R: x* q6 R
视图层：wxss.wxml 文件9 y' A: t0 Q/ P- G
; k* J, O1 z/ Q) p- q g在 iOS 上，小程序的逻辑代码运行于 JavaScriptCore 中，而在 Android上，这个任务则是交给 X5 内核来完成。# t9 Q+ W% d7 l! S2 N/ W6 y0 L
: L# Z# i% _' r+ B+ Q2 X在 开发工具上， 小程序的 JavaScript 代码是运行在 NW.js（Chrome 内核） 中。这也导致开发工具上的效果跟实际效果有所出入。0 E7 B+ C0 L0 l/ c3 y2 ?
9 }; v- i u! O( ?( M* k) C- A. O# K$ S
2. 组件' ^/ y& q# X9 M: p" v+ \
6 G$ g% ^* A m8 I6 P D' U/ ]7 I
微信提供了许多组件，主要分为八种:
2 m7 e. }/ B" J% _0 \, {3 N$ b) ~( ]! s9 E& B9 t
这其中，包含了view、scroll-view、button、form等普通常用的组件，也提供了地图mapcanvas f6 F4 ^- a; f9 E
0 T7 ^2 J1 Y3 a2 \8 T& J
组件主要属于视图层，通过 WXML 来进行结构布局，类似于 HTML。样式则通过 WXSS 来定义和修改，它的语法和使用都近似 CSS。 Q; q6 M' H3 z. C1 W. z
; p0 o6 v5 o- h% E, |
组件使用语法实例：4 i1 C" }; A, q0 {) Q
V- @ q2 B% @# z0 l) s; P$ z( j
<><>. f6 k4 j. V; v3 m8 A
( o& @/ M% u* ~, s
3. API
6 o9 r2 O R; a$ R% ^! C0 ?' j4 I% i6 x l) p
网络
5 V% a1 Y; h3 a3 e% T2 q! E( } @: T: I6 }: x
媒体
8 ]) T2 `1 h9 q3 q
+ d* b2 B4 C/ i5 Z' n3 G! Y/ Q! [数据0 ]0 V( y6 t4 @( ~) \' x2 {
" A, O9 b" U) S. d( }! T0 r
位置% E$ x6 |8 z4 s& W: e
" e* ?; `& e: C- Q2 l3 u2 s% W- u6 t7 `
设备
# r0 E8 ?" G- p8 ~. e9 ]% p/ ~1 v4 k" J+ R$ I- {( ]
界面
5 \+ \8 _, E) h7 R% p" V, |6 }
& O( @8 l% N! E% o0 r+ t. O开发接口, m" s% b. f/ e3 }% d
& P2 M3 L5 v/ _. P8 } g5 G2 E: @网络请求接口包含了普通的 HTTPS 请求，支持上传、下载、Socket，基本上满足了我们开发中所需要的网络需求。. ~7 Z2 O$ a2 E% C) T
' E- g. O& {8 M6 H( U" A) U; U这些 API 属于逻辑层，写在 JS 逻辑文件中。/ A, h! E* i4 G
) K, [9 n# J/ v5 T. I. |
使用实例：( q/ h3 a$ B' y4 d* ?
/ S4 _$ C' d/ i. r0 t! Q) O4 jwx.getLocation({ type: 'wgs84', success: function(res) { var latitude = res.latitude var longitude = res.longitude var speed = res.speed var accuracy = res.accuracy } })
( C* O, f& M/ _: @- ?8 E# u7 V: [& D0 H) ]' [: V, ?: D
可以到官方文档 – API 查看其它 API 的使用方法。
) l% c7 T1 N4 \" D L. [( ~4 v: e6 }. R W5 j9 F0 t2 y
编译运行+ E& Y5 }+ p! \3 I& F3 n. u3 n
, J8 ?" \6 L$ q. b) U. J4 j
1. 模拟器调试
! V8 M! q. I! n
8 }7 a) |9 F, T- C1 ~我们可以在微信提供的开发者工具中，使用模拟器查看小程序运行的效果。$ H0 T+ W$ v/ K( q8 T
$ h% Y7 G7 u* J' n之前我们提过，小程序的运行底层不同，这也导致在模拟器上的效果，会与在手机上运行有些差异。5 @$ K. Q; @$ D5 i( x6 P
: W- D8 J' `/ ]( [* N. D) g! {2. 真机调试# c& l+ G6 \1 d; v* X+ r, {" @ d
, o+ ^! i# x9 o. i
在左边的选项栏中，选择项目，然后点预览会生产一个二维码，用管理员微信号扫一扫，就可以在真机上看实际效果。; g# c1 G* A/ r2 ?
- ~1 s& \ ~7 D8 X- a: ]# d看完了以上的教程，如果您还是不会，没关系，陕西瑞奇网络科技有限公司专注于移动互联网整体解决方案。我们是微信小程序，微信公众平台和APP的开发、运营、推广全方案的服务商，专注为你！你还等什么？+ ~% W: A; s6 b* l" B. c9 m
" v. K( T& |, {
|
沙发！沙发！沙发！
