腾讯云网站解决方案帮您轻松应对建站成本高/网络不稳等常见问题

从零开始--微信小程序开发教程

1
回复
1954
查看
[复制链接]

3

主题

12

帖子

34

积分

1°伸手党

Rank: 2

积分
34
发表于 19-1-20 15:49:19 | 显示全部楼层 |阅读模式         
从零开始小程序
8 Z/ b1 p% ]( e5 |% S/ s' g0 ?( k今天一不小心拿到了小程序的内测资格,为了不辜负微信团队的信任,我决定十一奋斗一把!不过话说我可是一个Android工程师啊!所以就让我们从零开始!1 X" L1 N$ t3 B6 ?
所以本文非常适合非前端工程师学习!哈哈!都说小程序出来前端会抢移动端饭碗,但是据我所知现在好多学习的都是移动开发工程师,谁抢谁的还不一定呢!! d: }8 e% W. [# Q
PS:表问我怎么拿到小程序内测资格的,有种东西叫内部资源!
4 G0 s# ]- A( Q, x, S  |% g3 `创建程序实例3 ~8 }( k$ u: W( T/ p
事件绑定函数! a* }9 }8 A8 B% `0 n9 M2 z+ k; K
更新界面数据
- z, _) y, p7 H* s5 q8 V9 B# P准备工作* w$ V/ w; `4 z+ n
IDE搭建1 }) y. k) [( P% M$ F, F0 c" N
就不多说了,没有内测码去下载个破解版吧,我用了一下,学习完全够了!IDE破解版+安装教程
3 g$ W; c4 q: h3 d4 Z w5HxQxFM92G7E4Xm.jpg </img>5 a( O$ Y% ?( i! _; D0 B% g
图片发自简书App
; I1 k# B/ Q; P& F9 u" ^知识准备
" O: E7 T2 A3 Y$ Y8 C( TJavaScrip还是要看看的,推荐教程 廖雪峰大神的博客' r8 [5 s5 s; E: @! K+ g
HTML+CSS 大概知道是干啥的就行6 {/ k. A9 l9 Z, Z) |/ m4 O
从零开始2 T1 z/ N$ x& h  |; A8 }
微信小程序中就四种类型的文件
8 v" S9 B9 Z( i; V7 [json -------- 项目配置文件,负责窗口颜色等等
2 N9 h. ?3 l" |  s在根目录下用app来命名的这四中类型的文件,就是程序入口文件。
) v, ^/ Y0 x  s( Q0 K# mapp.json
4 K6 z* X# F! l) n必须要有这个文件,如果没有这个文件,IDE会报错,因为微信框架把这个作为配置文件入口,8 v  m- @9 |9 U* ?; W
你只需创建这个文件,里面写个大括号就行3 D) a2 n- ]/ C/ @/ w' m* n+ o
以后我们会在这里对整个小程序的全局配置。记录了页面组成,配置小程序的窗口 背景色,配置导航条样式,配置默认标题。3 `9 V1 q) w8 l
app.js2 ?/ ~. F( p2 S$ @7 n% P; Z
必须要有这个文件,没有也是会报错!但是这个文件创建一下就行 什么都不需要写' R' ?0 q. N+ K& {1 a; }4 ]
以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。. h  {+ I; x8 {# o6 e0 l% O. e
app.wxss
( M& c1 [3 i, B) V" k7 s% e6 f这个文件不是必须的。因为它只是个全局CSS样式文件
/ h  j; j. q' ?& y6 capp.wxml
* j* v" @6 J: x这个也不是必须的,而且这个并不是指主界面哦~因为小程序的主页面是靠在JSON文件中配置来决定的
  S8 D  Q! L$ Q, t, I, I# {8 l$ n; Z有了这两个文件你运行程序,IDE就不会报错了,也意味着这是最简单的微信小程序
5 L* }5 w8 O! X4 L9 J da0i8H10lAJTjiUH.jpg </img>
" A- q: Q# f% I9 T% S+ Z* DPaste_Image.png
1 _/ B; p$ H9 n3 k1 p3 ^; Z' {Hello World
9 n" E: r& n' Z; Z' k$ I0 Qapp.js文件管理整个程序的生命周期,所以在里面添加如下代码输入App IDE会有提示)
1 ~- w8 q2 h7 m  F* PApp({3 y6 o+ `7 E6 p. b" r- w
onLaunch: function () {
" J# e! m' c; g7 b+ h$ B" W2 w, _console.log('App Launch')1 D) L6 n+ Q/ z- R( }' N/ x
},2 X8 s* L) R7 L5 Z; _
onShow: function () {
* S9 x. r) H* J( {. A% G1 f7 {, @, Gconsole.log('App Show')
- `; T1 V5 D: TonHide: function () {2 \' N* ~6 [4 _) j3 D" e, X
console.log('App Hide')
4 u0 N$ E" A; E}
! {; _3 w+ v" @: o( ]  E& o5 m/ a}}0 m0 C% k4 L9 C( M0 l
" ~$ `$ x3 y, Z
美化ActionBar
$ u; R" u; H" l9 v  wjson文件负责配置ActionBar颜色,我们只需要在里面添加如下代码即可,下图有参数说明!
. r' p! q: f- k4 F9 a uPVfvao243Jvv7aa.jpg </img># C  }( b4 E* W$ l3 O- ]) X
NCCW109O0glls00L.jpg </img>
4 |3 B& M% S6 P2 _; \) |+ \{
6 D* C1 q. p3 }- r( j! b. u" window":{$ y& I' |, ^8 m/ z8 {5 ]/ Q5 e" D' Q
" navigationBarBackgroundColor": "#BBDEF8",+ p7 `) q7 }( c2 ]/ d
" navigationBarTitleText": "Demo",
* ?3 y" y, y; T' |$ M" navigationBarTextStyle":"white"" l% S5 r  M2 z6 J: g- Y0 \6 f

9 m# i  k% R* c. B现在看ActionBar是不是像那么回事了!好接下来我们继续写我们第一个界面
/ J" x6 @) x: L# ^* L5 A! d美化页面3 H$ X& I/ o5 o) {  D4 G) s: Z
美化页面我们用到了 wxml 和 wxss文件
6 z4 X% k) r2 Y5 c3 `- x7 L& K为了程序代码结构简洁
3 Z8 c$ k0 G& {1 w6 K5 _/ t我们需要在跟目录下创建一个新文件夹 名字随意,我们这里叫pages% G( y- s& G, C/ |+ C
然后在pages文件夹里再创建新文件夹 名字随意 这里我们叫 index
8 }# x1 C/ j4 r# y) @然后我们创建index.wxml文件然后在里面写入以下代码
* T8 \  i" }' q5 THello/ G% X4 H+ G$ W# C
然后创建index.wxss文件然后在里面写入以下代码* Z5 n+ i& C2 c+ P! n9 k
.window{
4 v3 |) m& B* i! c% {) n' X! t- ocolor=#4995fa;
; j# d% l2 Q8 ^/ b1 t4 L然后我们创建 index.js文件
: T* ~' s! g% }, N+ }在文件中输入如下代码(输入Page IDE会有提示)
. X$ }4 h" y5 Z函数解释如下:
+ L& a) Y  U" I Nkje9K2cL5ZELK39.jpg </img>- {: L! X) n+ J3 U5 e
Json文件负责配置页面路径
: \6 o/ |" H/ I7 ^  @9 m所以我们在里面加入如下代码0 i& S( F$ D; D' _
其中index的含义 其实就是指index.js文件- h$ [$ S0 J9 F
这里需要说明一点 pages 里面的路径其实是指向js文件的* \' v& N7 {1 _5 o, a
如果一个目录下没有该名称的js文件是会报错的!
0 b$ @  d( q2 b"pages":[2 d9 t+ v, ]8 M0 l
" pages/index/index"
+ `1 ]% h1 G' O9 c# p' @],
6 g8 B1 N. R$ B# Z2 {; K/ e) [完成了
( t% R. W! i( ^+ z3 M超级Hello World
% d' \6 C; r9 Q% S为了学习事件绑定,以及如何将数据在页面上更新: F5 K0 f3 Y% Q8 n3 k
我们来做个超级Hello World,就是我点击文字,能让% u; J5 W8 R( V( \& V7 Q, L4 F
它变色!
* \% N4 g+ J7 n/ N! m/ W8 e绑定事件
5 q( q4 k# m5 Z: A: C$ w8 N/ W! `我们打开index.wxml 将里面代码改成这样' r/ d, ?5 N8 }; a9 y
其实也就是加了
$ ?+ j3 E' R0 v6 B! n$ `, ]catchtap="click"" Y. N& l9 S3 G" G
这两个属性是什么意思呢 别着急 我会一一解释
, W: e% e# Y8 ]% [$ @, @ N3Opgpcm86c9JocJ.jpg </img>9 d6 E/ z4 V& e2 v0 p
上图展示了事件的一些的属性名称,这里需要注意红框标注起来的内容,区分出冒泡事件和非冒泡事件,其实冒泡事件就是需要往上面一层容器传递这个事件。1 D2 w4 D% I) o. n" h+ O- K+ D2 S  H
看了这图 我们再来看 catchtap="click" 的含义! V9 y+ v* R* B& u, D' N+ m
catch 代表非冒泡事件
) w2 ^# v  {' Q' S3 k& Xtap 代表点击事件
# `4 C1 d3 @6 X, q- N9 n所以连在一起就是非冒泡点击事件
" J0 y8 j$ f! L7 H7 y! m那后面那个click是啥8 h4 X" n( \1 B
click 其实只是个变量名字
" d- `9 g) q" L! v2 t8 J8 m我们在index.js需要用这个名字绑定接收事件的函数
7 `+ J+ o9 p7 o我们打开index.js
) k+ ]" W9 ?) [: F$ W7 C+ z然后添加如下函数' d+ q: W; J6 [/ o7 s
click:function(){
2 U* f' n, H% V3 A$ Uconsole.log("点击了文字");
8 Q0 E* \) {4 Y2 Y# j  A0 a  W# D添加完后代码长这样 红框中就是 添加的这个代码
+ u5 z. O& {* A/ w7 Z0 X QCLb7qC4ZtzQ4Z7T.jpg </img>
* j8 I$ i( R' a所以其实点击事件的回调函数 就是 catchtap="click"$ V& N" O0 X& ~  p0 s8 x1 {- e" L9 R
中的 click 后面加上 :function() 构成的9 K6 j  @) N' Z# u
现在我们来运行程序试试 然后点击文字
- P! ^+ q# `. I) G4 H Gth5ZqC88vB8zZOn.jpg </img>" `, Q3 B& O8 ~( K3 |
看是不是调用了 click:function 函数 并且打出了log
( w, \2 i/ I! t0 z# m( o好接下来我们写点击一下变色的逻辑) }! N: Q) w$ R) o% ]8 l9 e2 V8 l
那如何让一个文字变色呢,当然是css
/ I; [" r- \" r: E$ _所以我们需要再index.wxss 中添加一个样式1 {" h5 l+ v! K8 _; i# V  n7 x
.window-red{1 ]: k6 z0 Q) O/ F
color:#D23933;
& X' u# p3 i! W3 K$ c kwTeQygb8TSZi8S7.jpg </img>
+ |4 s* [. p( z% \- l* I然后我们进入index.js文件0 ?8 l  T, j5 E) R) t; g/ e
你会发现代码里面有个 data:{} 它不是page生命周期函数2 K: b+ l! {, S$ A0 a
其实他是个变量的数组,这个里面申请的变量都可以在 wxml中使用8 C# {( _- p2 R- X" t# g
我们在这里申请一个color- M( }  D' m; R! Q, \5 }* ?
color的值就是index.wxss中的样式名称
, Z  @& ?' ^# @" G8 L# ~' h然后进入index.wxml中,将class中的值改成 {{color}}# K+ o2 X( n/ H9 ~7 {0 i

5 Y9 ], U% z7 K: S9 I& @其实意思就是 将js文件中变量 color的值在这里使用
9 x/ R. X( y) }% A) S也就是值等于 window
& N! S& [$ L" w/ W+ ?/ p然后我们再回到index.js文件* R6 d8 z/ g8 v6 K
在最上面申请一个变量控制点击
: X. F! o# o# D, O2 X0 j5 k9 @0 `$ [然后在click:function() 函数中添加如下代码
4 Y6 Z8 u. O8 F, }/ Bif(flag){4 c3 J5 M9 L& `' z1 y
color = "window-red";% H/ p, z& C. V! X# T3 `
flag = false;: f/ Q; a  k! {
}else{" X1 Y: m& t/ V5 W' n8 Y, E8 ~6 j
color = "window";4 A) ^# e2 d, |2 \# k
flag = true;
$ e; d% \3 x8 @3 [& `3 u. z% Ythis.setData({
' s* f0 {9 v3 M0 H7 @color% d4 O7 Y4 c7 i+ f- n) J
});
+ n5 l$ v; q5 Q2 f' R9 P: E修改完后的代码如图
: N$ J( _+ y- V: N- t. U rKpoW0wpNnznVZ20.jpg </img>
' ?* F* V' G* o+ e: f$ k5 W其实就是在点击是后 更换color变量的值 而更换的这个值其实就是样式的名称- j( T; `$ h, M. ?
这里有个问题 我们更换完值 但是在wxml中不会立即生效% g7 M# g$ E1 {% x) l7 H
所以我们需要调用  B. R) c5 p6 W1 T% m; b) F
this.setData()方法将值同步给wxml 让它立即生效
( B8 I+ `' @; d好了我们运行程序 点击Hello 看看是不是点一下 变一下颜色!
1 p6 Q9 {0 g) X+ W7 e: r7 d2 D
6 R: @! i% Z3 ^最后再补充一点 index目录下也是可以配置 json文件的
- ~, T+ `7 ?! s! d# J7 x% M" t也就是每个页面都可以配置自己独特的actionbar颜色等等
7 J/ R9 U8 o# `; ?$ \; r* K这里的配置会覆盖 app.json文件的配置  d3 u7 N0 r& k0 R* W
最后附上github 地址 http://github.com/pwh0996/WXDemo.git
" o, _# ?7 g9 {最后由于着急睡觉 ,所以错别字比较多,后面整理望大家见谅
bfp6LKnF00pP00zU.jpg
IrYLPkEmeMRWEeEh.jpg
T522h6Yzkyb6HAca.jpg
tq7Ggrn4otbrTOB2.jpg
njj1afFnqJJuqofJ.jpg

0

主题

9

帖子

4

积分

1°伸手党

Rank: 2

积分
4
发表于 20-1-7 06:47:18 | 显示全部楼层         
沙发!沙发!
回复

使用道具 举报

网站简介

球球发,是一家 Discuz! 商业插件、风格模板、网站源码、 Discuz!运营维护技术等于一体的交流分享网站,全站95%的资源都是免费下载,对于资源我们是每天更新,每个亲测资源最新最全---球球发(如果我们有侵犯了您权益的资源请联系我们删除