微信小程序开发文档
https://mp.weixin.qq.com/debug/wxadoc/dev/
设置入口文件
自动生成目录
在pages下新建一个文件夹(a1),然后在app.json中写入此入口文件,编译即可在文件夹(a1)自动生成文件
数据的绑定
wxml(view)中使用 {{text}}
js中定义
事件设置
效果:点击按钮,切换文字
wxml
js
渲染
条件标签:wx:if=”{{true}}”
true:显示 false:不显示
<view wx:if="{{false}}">{{text1}}1</view>
<view wx:if="{{show}}">{{text1}}</view>
js
data: {
text1:"我是内容",
btn:"按钮",
show:true,
},
btnClick: function() {
var isShow = this.data.show;
this.setData({ text1: "这是新的内容" ,show:!isShow})
}
循环标签wx:for=”{{news}}”
wxml
<view wx:for="{{news}}">
{{index}}-{{item}}//前面是索引,后面是值
</view>
js
date:{
news: ['aa', 'bb', 'cc'],
}
动态删除第一个值
btnClick: function() {
var newsData = this.data.news
newsData.shift();
var isShow = this.data.show;
this.setData({ text1: "这是新的内容" ,show:!isShow,news:newsData})
}
模版(继承)
1.继承整个模版
建立模版文件
目录(随意):pages–templates-header.wxml
继承模版文件(注意后面的/)
<include src="../templates/header" />
2.继承部分模板
目录(随意):pages–templates-footerr.wxml
<template name="footer1">
我是footer1
</template>
<template name="footer2">
我是footer2
</template>
继承模版文件(注意后面的/)
<import src="../templates/footer" />
<template is="footer1"/>
导入时自定义数据
<import src="../templates/footer" />
<template is="footer1" data="{{text:'我是自定义数据'}}"/>
<import src="../templates/footer" />
<template is="footer1" data="{{text:'我是自定义数据'}}"/>