一 组件及api网址：
组件 ：https://developers.weixin.qq.com/miniprogram/dev/component/view.html
api：https://developers.weixin.qq.com/miniprogram/dev/api/
二 简单步骤
第一个微信小程序
- 右键 ->新增目录 -> firstPage
- 右键 ->新建js -> 输入Page ->自动生成Page内容
- 修改根目录下app.json内容将first.js内容加进来
- 在first.wxml中随便输入内容会显示在调试界面当中
三 内容详解
3.1 first.wxml 内容
该文件是布局文件 可以随便加入一个组件看看
1 <!--pages/firstPage/first.wxml--> 2 <view class="btn-area"> 3 <view class="body-view"> 4 <text>{{text}}</text> 5 <button bindtap="add">{{btn1name}}</button> 6 <button bindtap="remove">{{btn2name}}</button> 7 </view> 8 </view>
其中第四行的 {{text}} 中的text需要在 first.js中定义 如下
3.1.1 按钮添加点击事件
wxml文件中
<button bindtap="remove" bindtap=\'btnClick\'>{{btn2name}}</button>
js文件中 文件最后添加方法函数 函数名为 bindtap的内容
btnClick:function(){ console.log("按钮被点击了"); }
点击按钮就会打印所写的内容
3.1.2 this.setData方法
如果要修改text的内容可以 通过 this.setData方法
Page({ /** * 页面的初始数据 */ data: { text:"你好,微信小程序...", btn1name:"my add line", btn2name:"my remove line" }, ... btnClick:function(){ console.log("按钮被点击了"); this.setData({ text: "hello ,weixin..." }); this.setData({ btn1name: "添加一行." }); this.setData({ btn2name: "删除一行." }); } })
3.1.3 wx:if="{{条件判断语句}}"
if条件判断
.wxml 中添加
<view wx:if="{{show}}">如果为show为true则显示该内容。</view>
<view wx:else>如果为show为false则显示该内容。</view>
.js中给show赋值
data: { text:"你好,微信小程序...", btn1name:"my add line", btn2name:"my remove line", show:true },
3.1.4 wx:for="{{数组}}"
for循环
wxml 文件中
<view wx:for="{{arrays}}"> {{index}} - {{item}} </view>
js文件的data中
data: { text:"你好,微信小程序...", btn1name:"my add line", btn2name:"my remove line", show:false, arrays:["aaa","bbb","ccc"] },
修改item 跟 index的名称 效果是一样的
<view wx:for="{{arrays}}" wx:for-item="it" wx:for-index="ix"> {{ix}} - {{it}} </view>
3.1.5 newArrays.shift(); 删除数组中第一个元素
var newArrays = this.data.arrays; newArrays.shift(); this.setData({ arrays:newArrays});
点击按钮会执行删除arrays中的第一个元素
3.1.6 include 和import方式加载模板
新建目录 templates
- include方法加载
在 templates中新建header.wxml文件 内容为
<text>
头部内容
</text>
在frist.wxml中加载模块
<include src="../templates/header" />
- import方法
在templates目录下新建 bottom.wxml文件 内容为
<template name="bottom1">
底部内容1 -{{content}}
</template>
<template name="bottom2">
底部内容2 -{{content}}
</template>
在first.wxml中加载模块
<import src="../templates/bottom" />
<template is="bottom2" data="{{content:\'显示底部内容\'}}"/>
4 事件绑定
bindTab绑定
catchTab绑定
请发表评论