王明昌博客如果你对该文章中的内容有疑问/不解,可以点击此处链接提问
要注明问题和此文章链接地址 点击此处跳转
微信小程序开发文档
https://mp.weixin.qq.com/debug/wxadoc/dev/
设置入口文件
|
1 2 3 4 5 |
{ "pages": [ "src/pages/index/index" ] } |
自动生成目录
在pages下新建一个文件夹(a1),然后在app.json中写入此入口文件,编译即可在文件夹(a1)自动生成文件
数据的绑定
wxml(view)中使用 {{text}}
js中定义
|
1 2 3 4 |
data: { text:"我是内容" }, |
事件设置
效果:点击按钮,切换文字
wxml
|
1 2 |
{{text1}} <button open-type="contact" <span style="color: #ff6600;">bindtap="btnClick"</span>>{{btn}}</button> |
js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// pages/firstpage/first.js Page({ /** * 页面的初始数据 */ data: { text1:"我是内容", btn:"按钮" }, <span style="color: #ff6600;">btnClick: function() { this.setData({text1:"这是新的内容"}) }</span> }) |
渲染
条件标签:wx:if=”{{true}}”
true:显示 false:不显示
|
1 |
<view wx:if="{{false}}">{{text1}}1</view> |
|
1 |
<view wx:else>{{text1}}2</view> |
实现取反功能
wxml
|
1 |
<view wx:if="{{show}}">{{text1}}</view> |
js
|
1 2 3 4 5 |
data: { text1:"我是内容", btn:"按钮", show:true, }, |
|
1 2 3 4 5 6 |
btnClick: function() { var isShow = this.data.show; this.setData({ text1: "这是新的内容" ,show:!isShow}) } |
循环标签wx:for=”{{news}}”
wxml
|
1 2 3 |
<view wx:for="{{news}}"> {{index}}-{{item}}//前面是索引,后面是值 </view> |
js
|
1 2 3 |
date:{ news: ['aa', 'bb', 'cc'], } |
动态删除第一个值
|
1 2 3 4 5 6 7 8 9 |
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
继承模版文件(注意后面的/)
|
1 |
<include src="../templates/header" /> |
2.继承部分模板
目录(随意):pages–templates-footerr.wxml
|
1 2 3 4 5 6 7 |
<template name="footer1"> 我是footer1 </template> <template name="footer2"> 我是footer2 </template> |
继承模版文件(注意后面的/)
|
1 2 |
<import src="../templates/footer" /> <template is="footer1"/> |
导入时自定义数据
|
1 2 |
<import src="../templates/footer" /> <template is="footer1" data="{{text:'我是自定义数据'}}"/> |
|
1 2 |
<import src="../templates/footer" /> <template is="footer1" data="{{text:'我是自定义数据'}}"/> |
