专栏首页极乐技术社区五个套路看懂微信小程序开发(下)

五个套路看懂微信小程序开发(下)

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

执行交互

就像绑定数据之后,要去显示数据。我们绑定交互之后,也要让交互被执行,这样才有意义。而交互的执行内容,就写在被声明的交互的下面:

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

我们这里介绍两种交互内容的写法,足够解决很多问题了:修改页面数据、弹窗

第一种,修改页面数据。我们在上一个套路的实例代码中已经见过:

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

这几行代码中间的部分,就是要执行的交互内容:

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

即使你不懂得javaScript编程语言,也完全可以从英语的字面意思去理解这几行代码。这3行代码是在说,我这个页面(this)要修改数据(setData)中的farewell为 Never Say Goodbye!。

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

  changeAnotherWord: function() {        this.setData({          greeting: 'Hello, again!'
       })
     }

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

我们要介绍的第二种交互方法是弹窗,而且是微信内建的弹窗。首先,还是要做一下绑定交互这个套路:1、在 js 文件中声明一个交互;

2、在 wxml 中使用这个交互。

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

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

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

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

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

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

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

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

你会发现,所有的不一样,都只是在 js 文件中showConfirmation的下面,其他的部分都符合我们以前的套路。那我们就看看那段陌生的代码:

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

我们从wx.showModal看起,这是一个微信内建的代码表达方式,从英文的字面就能理解他是什么意思:请微信(wx)显示一下对话框(showModal)。那怎么用这个工具呢,微信的文档里面已经写好了:

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

使用wx.showModal

跳转

到这里,我们已经能在一个页面上使用4个套路了:绑定数据,显示数据,绑定交互,修改数据。如果你的小程序比较复杂,那么,是时候跳转到下一个页面来开辟一片新战场。

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

跳转本质上也是一种交互,我们完全可以用上面提到的「绑定交互」和「执行交互」来实现。再重复一遍这两步:

1,在 js 文件中声明一个交互;

2,在 wxml 中使用这个交互。

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

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

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

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

在 wxml 中使用这个交互:

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

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

好了,现在,如果我们点一下「跳转」按钮,他就会跳到下一页。

已经看完了效果,我们回来看那段不熟悉的代码:

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

这一次,我们依然可以从字面理解:请微信(wx)导航到(navigateTo)logs 路径下的页面(url: '/pages/logs/logs')。其中 url 这个数据是微信要求的,在文档中可以找到他的说明,我们依然是照着文档来填空就可以了。

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

大家看下图红框中的文件结构,会发现 logs 这个页面的地址就是 pages 文件夹下面的 logs 文件夹下面的 logs 文件(有4个文件,但都叫 logs),用标准的格式表示,就成了我们刚刚提到的/pages/logs/logs。更进一步,按照微信的规定,我们还需要把他写在一个叫做app.json的配置文件中,这样微信才允许我们跳转到那个路径。

总结一下:

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

  • 绑定数据——在 js 文件中声明数据名称
  • 显示数据——在 wxml 中写出数据显示的位置,并在 wxss 中写出装饰效果
  • 绑定交互——在 js 文件中声明交互的名称
  • 执行交互——在 js 文件中支出要修改的数据或者显示弹窗
  • 跳转——跳转到下一页,开辟新的战场

番外——调取微信数据

微信小程序其实还有一个隐含套路,叫做调用微信提供的接口。用微信官方的话讲,就是使用微信的能力。如果没有这些能力,微信小程序只能叫小程序,而不能叫「微信」小程序。

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

你已经发现,他们的特点都是wx.开头。更多的能力还有,还有获取用户头像,打开扫一扫这样的能力。他们怎么用呢?其实都是查文档,看看这个方法需要你提供哪些数据,提供给他就好了。用两个字总结就是:填空。

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

这种标记叫做选择器,可以在这个小程序 wxss 文档的选择器那一节找到

而且是个简版的css,不会用到复杂一点的级联样式

另外,还有两类特殊的交互,为了避免大家混乱,我没有讲,但在我们后续的教程中会用到,感兴趣的朋友可以先了解一下:一类是某些标签特有的绑定方法,比如<checkbox-group>便签有一个特有属性 bindchange,可以用来绑定交互。另一类是用户关闭和打开页面时绑定的交互,比如onLoad,这类交互都是以 on 开头的,代表这个页面的事件,直接在 js 文件中声明,不用再 wxml 中绑定到标签。

微信还有2个可用弹窗类交互,大家可以对照文档进行实验。

微信出了提供wx.navigateTo这个跳转方法,还提供了其他4个导航相关的方法,你可以在实践中体会他们的区别。另外,微信还提供了<navigator>标签来实现跳转,跟wx.navigateTo等方法实现同样效果,为避免混乱,这里只留下文档地址,不详细举例。

本文分享自微信公众号 - 极乐技术社区(wxapp-union),作者:刘思宁

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-09-19

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小程序 · 一周报

    6 月 21 日,微信升级小程序插件能力:开放插件登录能力;支持在插件内使用微信支付能力,便于用户在插件内完成预订、购买等流程;新增全页面插件,开发者可开发完整...

    极乐君
  • 小程序搜索栏新增“搜索历史” | 微信iOS版更新至6.6.0 ,客户端大更新、公众号界面、后台改版

    轻松一刻 ? 漫画来自于西乔《神秘的程序员们》 01 小程序搜索栏新增“搜索历史” 近期,极乐叔发现微信中出现了小程序历史搜索,在小程序发现栏中点击小程序搜索框...

    极乐君
  • 一周小程序【资讯教程】更新

    轻松一刻 ? 漫画来自于西乔《神秘的程序员们》 官方资讯更新 支付宝小程序又有新入口 小程序内嵌网页能力开放!小程序可关联500个公众号! 资讯与教程 小程序上...

    极乐君
  • 上期【Mma粉丝提问】这样嚒,看上去还是有点像的哈!!!

    WolframChina
  • 【经验分享】小白入门交互设计成长指南

    想入门交互设计,又感到手足无措?对于0基础,又对交互设计感兴趣的新人来说,这是很正常的,因为我也是从这个阶段过来的。那么看到这篇文章的你,有福了,小编我将结合个...

    奔跑的小鹿
  • 清华AI研究院里程碑事件:成立「智能人机交互研究中心」,发布四大开放平台

    清华大学副校长、清华大学 AI 研究院管委会主任尤政院士和清华大学 AI 研究院院长张钹院士出席成立仪式,共同为中心揭牌。

    机器之心
  • 从独角兽到上市:我们与TAPD的故事

    ? 过去一年中,轰轰烈烈的上市大潮席卷而来,在中国互联网发展史上记下浓墨重彩的一笔。 盘点这些成功上市的独角兽企业,会发现他们都非常关注研发投入,重视自身研发...

    腾讯技术工程官方号
  • [Unity3D]多人聊天系统

    又再一次修改unity web聊天的功能,之前的两次尝试都觉得服务器端性能太差了,写的还不够成熟,在龙哥的指导下,尝试使用IOCP重新写服务器端,使用线程池大大...

    py3study
  • nginx-1:生产级别nginx高性能配置

    笔者在github提供了完整的配置文件,同时包含代理基础组件的conf,这些基础组件都是部署在容器里,通过ingress-nginx暴露到外部,然后在通过ngi...

    千里行走
  • 【指引】两种方式,轻松关联企业微信

    ? 指引篇 企业微信如何和TAPD关联? TAPD入口+企业微信市场入口 跟着我们的指引走准没错! 注:是企业微信和TAPD的公司管理员才可以哦。 ? 一、...

    TAPD敏捷研发

扫码关注云+社区

领取腾讯云代金券