5个套路看懂小程序开发
你或许听说过,快速入门就是要学最小必要知识。而我最近在看微信小程序的官方教程时发现,这个教程虽然简单,但对于微信小程序开发来说,80%的套路都能从这里学习到,你的小程序从0到1可以从这里实现突破。 在开始之前,先做100字的铺垫。
一个页面 = 4个文件
小程序的每个页面都是由4个文件组成的 ,前两个最重要,是我们的重头戏。先给这几个文件一个简短的解释:
另外,本文的目标读者是真心想要尝试小程序的无经验开发者,英语水平要求中学及格水平以上。另外,为了你可以动手跟着做,请下载微信开发工具并注册微信小程序。 部分语言过于通俗是为了更好的理解。 绑定数据现在就开始我们的第一个套路。
小程序简易教程 -> 编写代码 -> 创建页面 -> 第二个代码块
依照小程序的定义,小程序中的每个页面都包含一个 「数据绑定」对你来说可能是个新词汇。这里先不急着理解,我们的目标是会用,会用了就能理解一大半了。 怎么应用「数据绑定」呢?只需要两步:1,声明;2,使用。 声明的格式是这样的(类似上图中的内容):
在微信开发工具中是这样的:
注意看红框中的内容,和上面的代码块是一样的
注意看 data 那个部分,我声明了名字为greeting的数据。(所谓数据,学名应该叫变量,但在我们的教程里可以近似理解。) 第二步是使用。使用的意思是,我们到页面上把这个数据显示出来。方法是这样的:
注意看 这就完成了我们的第一个套路——数据绑定。简单吧! 但是这里有一个疑问,我们在哪里使用绑定好的数据呢?也就是问,在哪里使用 答案是我们的页面上,也就是 wxml 这个文件中。这就是我们的下一个套路——显示数据。 显示数据上一个套路的讲解中,我们出现了这样一句程序
在微信开发工具中的样子是这样的:
还是看红框内的内容,也请注意这是在 wxml 文件中
我们对 显示数据时,我们其实希望显示出来的内容是很好看的。但如果你只写成
最左边红框中的文字一点装饰效果都没有
为了让显示数据有更好看的效果,我们需要对
什么是标签,我们从例子中来理解: 开始标签可以定义一些属性,以便调整显示的结果。这就像是你画一幅画可以选择用毛笔,来画出国画的效果。在上面的例子中, 那么 这里出现了我们的第2个工具:样式表。 样式表是写在 wxss 文件中的,我们来看看怎么写:
在开发者工具中的样子是这样的: 你通过理解代码中英文的字面意思就可以了解到,我把字的 color 定义为蓝色,把位置定义为 center。 最重要的,是这个样式的名字,叫做 到这里,我们的前两个套路就已经简单的介绍完了。总结一下:
不过,我们这里好像缺了什么。我好像没教大家怎么写最后一步的 wxss。微信文档说,wxss 和 css 大体上都是一样的[2]。大家可以去找找css的书,或者期待我后续的实践教程,带你一步一步写一个能上线的小程序。 现在,如果你把这两个套路循环用起来,已经能解决很多问题了。想要多显示一个数据,就先在 js文件中绑定这个数据,然后去 wxml 文件中装饰数据。下面是绑定两个数据的示例代码:
而对应显示这两个数据的示例代码是这样的:
在开发者工具中显示的样子是这样的:
我在写教程的过程中升级了一次开发者工具,所以界面有变化
大家可以看到,我在最右侧的红箭头处加入了一行新代码, 然后显示出了新数据。 但是,这次不一样的是,我用了一个叫做的标签,而不是之前的标签。其实 wxml 文件中可以使用很多种标签来显示数据,有负责显示图片的,有可以负责滚动效果的的,他们都被写在微信文档中,你在实践的过程中可以查看。 比如,我使用了一个叫做的标签,然后显示出了一个圆形的图标: 有了「绑定数据」和「显示数据」这两个套路,我们已经能够写出一个简单的页面了。能够做到展示,但没有交互,所以我们进入第三个套路:绑定交互。 绑定交互绑定交互这个名字听起来有没有和之前的「绑定数据」很像?他们的操作方法也很相似。 绑定交互分为两步:
先来看「声明」。怎么声明一个交互呢?(或者用微信文档的说法,怎么来声明一个事件呢?) 请在 js 文件中写下这样几行代码,就在我们之前绑定数据的 data 模块下面:
在开发者工具中的样子是: 这样,我们就声明了一个叫做 而这个声明中 我们已经声明完了这个交互,现在就该进入第2步——使用交互。请在 wxml 中插入这样的代码片段:
在开发者工具中的的样子是这样的: 这里的重点是 除了利用标签的 你会发现他们的开头都是 bind,就好像单词的前缀一样,加上 到这里,我们已经能够简单的绑定交互了。但绑定交互的核心目的是要改变页面上的显示,从而给用户一个反馈。下面就让我们来看看第4个套路:修改显示。 执行交互就像绑定数据之后,要去显示数据。我们绑定交互之后,也要让交互被执行,这样才有意义。而交互的执行内容,就写在被声明的交互的下面:
我们这里介绍两种交互内容的写法,足够解决很多问题了:
第一种,修改页面数据。我们在上一个套路的实例代码中已经见过:
这几行代码中间的部分,就是要执行的交互内容:
即使你不懂得javaScript编程语言,也完全可以从英语的字面意思去理解这几行代码。这3行代码是在说,我这个页面( 如果你想修改其他数据,比如
你会发现这里面有很多结构是固定的。变化的部分只有交互的名称(变成了 我们要介绍的第二种交互方法是弹窗,而且是微信内建的弹窗。首先,还是要做一下绑定交互这个套路:1,在 js 文件中声明一个交互;2,在 wxml 中使用这个交互。 声明交互的代码如下(在 js 文件中),我们用
在微信开发者工具中是这样的: 先不要在乎这里面陌生的代码,我们继续看使用交互的部分:
我把上一个套路中出现的 button 改写成了绑定到这个 写完之后,我再去点「改变文字」的按钮,就会出现对话框:
箭头连接的两部分是一样的,你发现了吗
你会发现,所有的不一样,都只是在 js 文件中
我们从 我们只需要像填空一样,把制作对话框需要的 title, content, showCancel 等需要填充的地方填好就可以了。这样,微信会帮助我们制作出一个对话框。 但在这段代码中,有一个比较难解释的地方,就是
跳转到这里,我们已经能在一个页面上使用4个套路了:绑定数据,显示数据,绑定交互,修改数据。如果你的小程序比较复杂,那么,是时候跳转到下一个页面来开辟一片新战场。 要跳转到下一个页面,我们只需要最后一个套路:跳转。 跳转本质上也是一种交互,我们完全可以用上面提到的「绑定交互」和「执行交互」来实现。再重复一遍这两步:1,在 js 文件中声明一个交互;2,在 wxml 中使用这个交互。 我们先在 js 文件中声明一个名为
在开发者工具中的样子是这样的: 这里面有我们不太熟悉的代码,比如 在 wxml 中使用这个交互:
在开发者工具中的样子是这样的: 好了,现在,如果我们点一下「跳转」按钮,他就会跳到下一页。 已经看完了效果,我们回来看那段不熟悉的代码:
这一次,我们依然可以从字面理解:请微信( 这里面有一点需要说明,新页面的地址叫做 大家看下图红框中的文件结构,会发现 logs 这个页面的地址就是 pages 文件夹下面的 logs 文件夹下面的 logs 文件(有4个文件,但都叫 logs),用标准的格式表示,就成了我们刚刚提到的 总结一下好了,到这里,我们把5个套路都学完了。如果你能把他们组合起来,不断使用,你就能制作一个用很多功能的小程序:
番外篇——调取微信数据微信小程序其实还有一个隐含套路,叫做调用微信提供的接口。用微信官方的话讲,就是使用微信的能力。如果没有这些能力,微信小程序只能叫小程序,而不能叫「微信」小程序。 其实,我们已经在上面见过一些微信小程序的能力了,比如显示弹窗的 你已经发现,他们的特点都是 最后的最后,轻轻说一句,对于刚刚入门的开发者,最大的坑可能是——忘记保存。因为我曾经也是个新手,在很多领域依然是新手,甚至还没有入门。希望这份教程能帮到你。 共勉。
|
5个套路看懂小程序开发相关推荐
- amos看拟合度在哪里看_小程序开发公司哪里强?看这几点
如今小程序开发已不罕见,越来越多的线下商家需要布局线上渠道,小程序是一个非常好的选择.但是,对于不懂任何技术.也没有自身技术团队的小白而言,若想拥有自己的小程序,就需要找靠谱的微信小程序开发公司,但是 ...
- 一文看懂小程序以及它即将对行业带来的影响
小程序正式上线!据说之前12月28号微信公开课现场气氛就热烈空前,数万码农围观男神,科技媒体集体高潮,朋友圈被各类关于小程序的信息刷爆. 但很多吃瓜群众对小程序还是一头雾水,作者深度参与小程序培训课程 ...
- thinkphp3 页面跳转外部链接_一文看懂小程序跳转的规则和注意事项
微信小程序之间是可以相互跳转的,这大大方便了商家的品牌互推和互相导流.不过,小程序跳转功能也不能乱用,它是有一定规则的:1.需要用户触发跳转若用户未点击小程序页面任意位置,则开发者将无法调用 wx.n ...
- lpc2000 filash utility 程序烧写工具_重点必看 | 取证小程序开发之第四届美亚杯硬盘信息快速解题...
告别金秋十月,迎来仲冬十一月,同时迎来的是首届电子数据取证小程序大赛.随着投稿截止时间的一天天到来,越来越多的用户参与到本次小程序大赛,用自己的力量参与取证知识创新,为营造良好的取证技术生态赋能. 上 ...
- 【小程序】766- 一文看懂小程序分享到朋友圈
点击上方 关注我们 作者简介 张所勇 转转平台运营中心前端负责人,在前端领域有深入研究,包括:sketch一键切图.前端数据模型化,小程序基础能力建设等多个方面,10年工作经验中,做了2年工程师,5年 ...
- 一张图看懂小程序全生态
2017年1月9日,小程序发布在万众瞩目中发布,不仅占据了舆论的风口,也经历了不少起伏.6月9日小程序发布半年.半年来,小程序到底是什么现状?小程序给我们带来哪些改变?创业者该如何看待小程序?小程序生 ...
- 一文带你看懂小程序朋友圈广告是什么
说起朋友圈广告,相信大家都在自己的朋友圈里见过,小程序也可以做朋友圈广告吗?当然可以,而且非常适合.今天,小木来为大家介绍下小程序朋友圈广告是什么. 1.小程序朋友圈广告功能是什么 小程序朋友圈广告是 ...
- 一张图带你看懂小程序的发展历程
2017年,注定不平凡的一年,1月9日微信小程序正式问世.带着满心期待和祝福,多少开发者.运营者.商户都在注视着小程序.然而高调的出现后,却渐渐低调的沉静下去.从开始的各大APP转战小程序,抢占市场, ...
- 小程序开发教程、小程序资讯、小程序demo、小程序实战等合揖(7月19日更新)
7月19日微信小程序联盟更新的小程序开发教程.小程序资讯.小程序demo.小程序实战内容合揖如下: 小程序资讯与小程序教程 一张图带你看懂小程序发展蓝皮书 2017-07-19 微信小程序开发问答&l ...
最新文章
- 5分钟了解Docker原理(2),最简单的cgroups介绍!
- 浅析网站空间主机应该如何进行配置?
- 泛海精灵的用户分析:补充【Song Xie】
- ADO.NET学习笔记-非链接类
- redis 启动时 Warning 警告解决及说明
- 关于ASPNET_Membership用户被锁的解决
- 清华学霸被Facebook开除了
- 微软Surface Pro 8曝光:搭载第11代酷睿处理器和Win11系统
- 数据库容灾、复制解决方案全分析
- 面试中软性问题的套路与反套路
- 检测商品简码是否唯一,不重复
- c模拟linux进程管理课程设计,操作系统课程设计(三):Linux进程管理
- Android sdk build-tools sdk tools 历史版本下载
- 移动端文字向左无缝滚动特效(原生纯js哦)
- 望京有没有可能成为下一个硅谷?
- 获取jar包中的文件,及遍历jar包中的文件
- GDPR(欧盟通用数据保护条例)基础知识
- 网贷逾期可怕吗?如果通知到朋友会怎么样?
- mysql库文件修复_mysql数据库文件修复
- 地磅称重管理系统智能称重——称重软件必备的10大功能