微信小程序学习笔记(1)标签栏配置+js规范+数据绑定

文章目录

        • 前言
        • 小程序设置标签栏的配置
        • 小程序的js规范
        • 数据绑定
        • 结尾语

前言

感觉微信小程序挺好玩的,而且很多知识和vue,css,js都是相通的,从今天起(2020年5月17日),正式开始记录小程序的学习之路。

小程序设置标签栏的配置

这个对于开发的时候很重要,在开发之前一直纠结下图是怎么做到的。当学完之后,发现配置起来还是挺简单的。
微信小程序学习笔记(1)标签栏配置+js规范+数据绑定_第1张图片
下面开始介绍如何配置好上图的标签配置

在小程序的开发界面,有一个app.json配置文件,我们在配置文件里加上tabBar,就可以配置我们的标签栏了。如下代码,tabBar里面有一个list,里面的每一项代表每一个标签,当list里只有一个标签的时候,标签不会显示,当大于等于2的时候,才有显示,标签的最大数不能超过5。

  "tabBar": {
    "list": [
      {
      "pagePath": "pages/index/index", 
      "text": "首页", 
      "selectedColor": "#ffff"
    }, 
    {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }
    ]
  }

小程序的js规范

  1. 小程序不是运行在浏览器中,所以没有dom和bom对象。
  2. 小程序js有一些额外的成员。
  • app方法,用于定义应用程序 中实例对象。
    微信小程序学习笔记(1)标签栏配置+js规范+数据绑定_第2张图片

数据绑定

js的数据绑定和vue语法类似。
在js界面的page对象里的data定义一个person,如下:

// pages/databinding/databinding.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    person:{
      name:"小黑",
      age:18
    }

  },
  
})

然后我们在对应的wxml文件中使用小胡子语法{{}}就可以获取到数据了.

<text>{{person.age}}</text>

除此之外,使用小胡子语法还有一个好处,当我们做选择框的时候,在之前,checked=“false”,仍会被选中,因为checked中的内容是字符串,里面不为空就会被选中。如果使用小胡子语法,就能生效了,如下所示。

<checkbox checked="false" />
<!-- 状态没选中 -->
<checkbox checked="{{false}}" />

结尾语

嘴过知酒浓 爱过知情重,你不能做我的诗,正如我不能做你的梦,握不住的沙,就扬了它。

你可能感兴趣的:(微信小程序)