1. 组件的基本使用

• 1.新建一个项目

  
  
  image.png
  
  
  image.png
  
  
  image.png

• 这时新建一个页面

  
  
  image.png

• 在这个目录中创建一个js和wxml文件

  
  
  image.png

• 在app.json文件中把我们的页面添加进来

  
  
  image.png

• 然后会报一个错误是因为没有调用page方法

  
  
  image.png

image.png

• 解决方法

  
  
  image.png

image.png

• 然后在first.wxml文件中随便打一些字

  
  
  image.png

• 组件 之 按钮的使用

image.png

• 然后删除一些代码

  
  
  image.png

• 组件的使用非常简单

  
  
  image.png

• 使用文本

  
  
  image.png

image.png

2. 数据绑定

• 数据的绑定也很简单

image.png

• text需要在js文件的data中定义

  
  
  image.png

• 包括按钮

  
  
  image.png

image.png

• 怎么动态更改里面的内容,先给按钮添加一个点击事件 ,这样好来观看里面的内容动态变化,给这个按钮添加一个绑定事件

image.png

• 绑定之后需要在js中定义,先打印一个log

  
  
  image.png

image.png

• 这说明能正常能监听按钮被点击了

• 那怎么动态更改里面内容呢

  
  
  image.png
  
  
  image.png

image.png

3.渲染标签

• 微信小程序给我们提供两种类型渲染标签

• 一种是条件标签,

• 如下:

  
  
  image.png
  
  
  image.png

• 同样也可以

  
  
  image.png
  
  
  image.png

• 也可以动态改变显示或隐藏,当我们点击按钮时候,如果说它是显示状态就变成隐藏,如果是隐藏状态我就变成显示,首先定义一个变量

  
  
  image.png
  
  
  image.png
  
  
  image.png

• 这时候怎么改变文本内容呢

  
  
  image.png
  
  
  image.png
  
  
  image.png

image.png

image.png

• 另外一个标签是循环标签,

  
  
  image.png

• 同样可以将数据提取到data里面去

  
  
  image.png

image.png

• 怎么将里面内容提取出来

  
  
  image.png
  
  
  image.png

image.png

image.png

• 可以通过动态地添加或删除列表的值来更改里面的内容,比如我想动态更改news的值,怎么更改呢?

• 如下

  
  
  image.png

image.png

image.png

4.模板的使用

• 新建一个目录为templates

image.png

• 然后在里面建一个模板文件,header.wxml,然后在头部写一些控件

  
  
  image.png

• 已经写好一个模板那怎么来使用?如下

  
  
  image.png

• 注意

  
  
  image.png

• 还有另一种方法加添加模板,再写一个模板

• 使用import来导入模板

  
  
  image.png

image.png

image.png

• include相当于将模板里面内容全部复制,import需要is来指定把那一部分数据导入进来,假如要导入别的模板是不生效的,可以跟模板动态来设置数据

  
  
  image.png

image.png