开发小程序没那么难,看完这5个套路你就全懂了

你或许听说过,快速入门就是要学最小必要知识。而我最近在看微信小程序的官方教程时发现,这个教程虽然简单,但对于微信小程序开发来说,80%的套路都能从这里学习到,你的小程序从0到1可以从这里实现突破。

小程序的每个页面都是由4个文件组成的 ,前两个最重要,是我们的重头戏。先给这几个文件一个简短的解释:

另外,本文的目标读者是真心想要尝试小程序的无经验开发者,英语水平要求中学及格水平以上。另外,为了你可以动手跟着做,请下载微信开发工具并注册微信小程序。

绑定数据

请点击此处输入图片描述

依照小程序的定义,小程序中的每个页面都包含一个js文件。在一个 js 文件中,你需要列出这个页面上需要的数据(上图红框中的内容)。也就是说,data下面规定的数据(请努力去上图中找到 data),就是页面上需要用到的数据。这就叫做数据绑定。

怎么应用「数据绑定」呢?只需要两步:1,声明;2,使用。

Page({ data: { greeting: 'Hello World' } //...})

注意看 data 那个部分,我声明了名字为greeting的数据。(所谓数据,学名应该叫变量,但在我们的教程里可以近似理解。)

{{greeting}}

这就完成了我们的第一个套路——数据绑定。简单吧!

答案是我们的页面上,也就是 wxml 这个文件中。这就是我们的下一个套路——显示数据。

上一个套路的讲解中,我们出现了这样一句程序{{greeting}}。这是在使用数据。但这行代码的完整版其实是这样的:

在微信开发工具中的样子是这样的:

还是看红框内的内容,也请注意这是在 wxml 文件中

显示数据时,我们其实希望显示出来的内容是很好看的。但如果你只写成{{greeting}},显示出来的效果并不好:

最左边红框中的文字一点装饰效果都没有

标签

样式表

开始标签可以定义一些属性,以便调整显示的结果。这就像是你画一幅画可以选择用毛笔,来画出国画的效果。在上面的例子中,class="your-class"就是<text>这个标签的一个属性,<text>标签会表现出class="your-class"的规定的样子。

这里出现了我们的第2个工具:样式表。

.your-class { display: flex; flex-direction: column; align-items: center; color: blue;}

最重要的,是这个样式的名字,叫做.your-class,而<text>标签中的 class 属性,正好指向这个样式,所以<text>中的数据会变成中间位置的蓝色字。(在.your-class的最前面有一个点,那是对应<text>中 class 属性的特有标记,还有类似的标记[1],可以在以后更多的实践中去理解)

绑定数据:在 js 文件中的 Page 模块下面定义 data 的名字,并用八字胡方法({{ }})来使用数据。

显示数据:在 wxml 中给数据加上标签(比如 text 标签),并且给标签加上属性(比如 class 属性)。class 对应的样式在 wxss 文件中写好。

现在,如果你把这两个套路循环用起来,已经能解决很多问题了。想要多显示一个数据,就先在 js文件中绑定这个数据,然后去 wxml 文件中装饰数据。下面是绑定两个数据的示例代码:

而对应显示这两个数据的示例代码是这样的:

在开发者工具中显示的样子是这样的:

我在写教程的过程中升级了一次开发者工具,所以界面有变化

但是,这次不一样的是,我用了一个叫做<view>的标签,而不是之前的<text>标签。其实 wxml 文件中可以使用很多种标签来显示数据,有负责显示图片的,有可以负责滚动效果的的,他们都被写在微信文档中,你在实践的过程中可以查看。

绑定交互

绑定交互分为两步:

先来看「声明」。怎么声明一个交互呢?(或者用微信文档的说法,怎么来声明一个事件呢?)

changeWord: function() { this.setData({ farewell: 'Never Say Goodbye!' }) }

而这个声明中function,this,setDate都是什么意思,我们在后面实践中再讲,大家关注的重点是这个声明中最前面的部分,也就是这个交互的名字:changeWord。

<button bindtap="changeWord" type='primary' class="your-button" size='default'>改变文字</button>

你会发现他们的开头都是 bind,就好像单词的前缀一样,加上tap,longtap等后缀,就能帮你绑定一个交互。(绑定事件的前缀还有另外一种,叫catch,比如catchtap,catchtouchmove等等,你可以结合文档,试验一下他们的效果)[3]

执行交互

changeWord: function() { // 这里写交互的实际内容 }

修改页面数据

弹窗

changeWord: function() { this.setData({ farewell: 'Never Say Goodbye!' }) } this.setData({ farewell: 'Never Say Goodbye!' })

如果你想修改其他数据,比如greeting,你可以如法炮制:

你会发现这里面有很多结构是固定的。变化的部分只有交互的名称(变成了changeAnotherWord)和要修改的数据(变成了greeting: 'Hello, again!')。如果你也想修改页面上的数据,请如法炮制。

声明交互的代码如下(在 js 文件中),我们用showConfirmation作为名称:

请点击此处输入图片描述

在微信开发者工具中是这样的:

先不要在乎这里面陌生的代码,我们继续看使用交互的部分:

我把上一个套路中出现的 button 改写成了绑定到这个showConfirmation,在微信开发者工具中的样子是这样的:

写完之后,我再去点「改变文字」的按钮,就会出现对话框:

箭头连接的两部分是一样的,你发现了吗

var that = this wx.showModal({ title: '提示', content: '你确定要更改文字吗?', showCancel: true, cancelText: '取消', confirmText: '确定', success: function (response) { that.changeWord() } })

但在这段代码中,有一个比较难解释的地方,就是var that = this和that.changeWord()。你能猜到他们是联动的,因为他们都有一个that。具体的意思是:把这个页面存储在那个地方(var that = this),让那个地方的数据中的文字改变(that.changeWord())。为了避免混乱,我们暂时解释到这里。而且这两行也不影响我们制作一个对话框。因为制作对话框只需要做一件事[4]:

跳转

要跳转到下一个页面,我们只需要最后一个套路:跳转。

我们先在 js 文件中声明一个名为navigateToLogs的交互:

在开发者工具中的样子是这样的:

这里面有我们不太熟悉的代码,比如wx.navigateTo,根据上一个套路的经验,你已经能够大致猜到他的意思了,对么?不过我们还是把下一步走完再说。

<button bindtap="navigateToLogs" type='default' class="your-button" size='default'>跳转</button>

wx.navigateTo({ url: '/pages/logs/logs' })

这里面有一点需要说明,新页面的地址叫做'/pages/logs/logs',他是从哪里来的呢?

好了,到这里,我们把5个套路都学完了。如果你能把他们组合起来,不断使用,你就能制作一个用很多功能的小程序:

番外篇——调取微信数据

其实,我们已经在上面见过一些微信小程序的能力了,比如显示弹窗的wx.showModal,比如跳转下一页的wx.navigateTo

最后的最后,轻轻说一句,对于刚刚入门的开发者,最大的坑可能是——忘记保存。因为我曾经也是个新手,在很多领域依然是新手,甚至还没有入门。希望这份教程能帮到你。

原文发布于微信公众号 - BestSDK(bestsdk)

原文发表时间:2017-10-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏知晓程序

微信小程序接口全解析!从官方 Demo 了解小程序的能力

1243
来自专栏IMWeb前端团队

切图工具/插件介绍

本文作者:IMWeb moonye 原文出处:IMWeb社区 未经同意,禁止转载 切图工具 切图插件 这里的插件都是ps的插件,比较小巧,易于安装和适...

2548
来自专栏章鱼的慢慢技术路

Unity入门教程(上)

3727
来自专栏企鹅号快讯

前端三大框架vue,angular,react大杂烩

摘要:从angular的诞生独步天下,到现在三大框架平分天下,基本形势已经趋于稳定。每一个框架从诞生到受欢迎,都有其特定的原因和背景。不同的开发者选择时,也是依...

2309
来自专栏小灰灰

cocos2dx-v3.5 2048 (一): 项目架构

前言 ---- 开始学习cocos2dx, 在看完官方的基本文档之后,选择2048游戏作为第一次实战训练,并记下整个开发过程 关于2048的教程和源码很多,即便...

2077
来自专栏鬼谷君

项目- Vue全家桶实战去哪网App

基于 Vue 全家桶 (2.x) 制作的 去哪网APP项目,项目完整、功能完备、UI美观、交互一流。

1452
来自专栏java工会

前端进阶攻略|最全的前端开源JS框架和库

1917
来自专栏张戈的专栏

关于网站图标favicon.ico那点事儿,你造吗?

众所周知,联盟成员导航是中国博客联盟的特色之一。而网站图标则是导航的装饰之一,起到锦上添花的作用,让页面更精美耐看。 但是随着成员数量的增长,图标便成了页面的拖...

5066
来自专栏企鹅号快讯

前端三大框架vue,angular,react大杂烩

摘要:从angular的诞生独步天下,到现在三大框架平分天下,基本形势已经趋于稳定。每一个框架从诞生到受欢迎,都有其特定的原因和背景。不同的开发者选择时,也是依...

2086
来自专栏葡萄城控件技术团队

TypeScript VS JavaScript 深度对比

TypeScript 和 JavaScript 是目前项目开发中较为流行的两种脚本语言,我们已经熟知 TypeScript 是 JavaScript 的一个超集...

3205

扫码关注云+社区