组件的基本使用
在 pages 文件里面新建一个 firstPage 的文件夹 在该文件下建一个 first.wxml 的文件 copy过来的组件放在这里面 例如我 copy 过来一个 button 组件
<button type="default" hover-class="other-button-hover"> default </button>
<button type="primary" bindtap="btnClick">{{ btnText }} </button>
<text> {{ text }}</text>
在 firstPage 这个文件下建一个 first.js 的文件 首先需要 Page 初始化一下 然后在
data 里面学数据
data: {
text: "我是曹操",
btnText: '我是按钮',
},
数据的绑定
用 bindtap 把 button 绑定了一个点击事件
<button type="primary" bindtap="btnClick">{{ btnText }} </button>
点击的时候通过 setData 可以动态改变 first.js 下 data 里面的值
btnClick: function () {
this.setData({ text: '这是新的内容'})
},
渲染标签
渲染标签有三种方式 wx:if / wx:else / wx:for
<!--数据绑定用插值表达式-->
<view wx:if='{{ show}}'> {{ text }} 1 </view>
<view wx:else> {{ text }} 2 </view>
first.js 里面 data 是这样写的
data: {
show : true,
},
btnClick: function () {
var isShow = this.data.show;
this.setData({ show:!isShow })
},
<!--循环标签的使用-->
<view wx:for="{{ news }}" wx:for-item='itemx'>
<!--可以通过wx:for-item='itemx' 修改 item 这个固定的单词-->
{{ index }}----{{ itemx }}
</view>
first.js 里面 data 是这样写的
data: {
news : ['a','b','c']
},
btnClick: function () {
const newsData = this.data.news;
newsData.shift()
this.setData({ news:newsData })
},
模板的使用
在 Pages 下面新建一个 templates 的文件目录 在该目录下 新建两个文件分别是
footer.wxml 和 header.wxml 我在 header 的文件下面写
<text>
我是头部组件...
</text>
我在 footer 文件里面写
<template name='footer1'>
我是底部内容1--{{ text }}
</template>>
<template name='footer2'>
<!--给模板动态设置数据-->
我是底部内容2 --{{ text }}
</template>
我想使用 header 文件里面的内容
使用方法如下
在 first.wxml 文件里面引入进来方可使用
<!--include 的作用相当于 copy 了一份进来 -->
<include src='../templates/header'/>
但是如果面对 footer 文件里面带有 template 标签的内容需要换另一种引入方式那就是 import 方法
依然是在 first.wxml 文件里面引入
<import src='../templates/footer'/>
<!--还需要设置要显示的模板-->
<template is='footer2' data="{{ text: '我是动态添加的内容...'}}" />
data 的这种方式可以动态添加模板里面的数据
数据是双向的
这是微信小程序简易入门官方文档
https://mp.weixin.qq.com/debug/wxadoc/dev/
网友评论