四时宝库

程序员的知识宝库

微信小程序笔记(五)---数据绑定(微信小程序数据绑定的时候碰到关键字这么处理)

  • 简单绑定

<!--xml重就这样写--><view> {{ message }} </view><!--js中就为message赋值-->Page({

data: {

message: 'Hello MINA!'

}

})

  • 条件渲染

格式就为<view wx:if="{{条件}}"> 1 </view><view wx:if="{{length > 5}}"> 1 </view><view wx:elif="{{length > 2}}"> 2 </view><view wx:else> 3 </view>

  • 列表渲染

<!--array是个数组,随意命名,由js赋值,item为固定格式,不能变,否则不显示--><view wx:for="{{array}}">{{item}}</view><!--为array赋值-->Page({

data:{

array:['a','b','c','d','e'],

}

})

  • 模板

<!--定义模板--><template name="mymoban">

<view>

<text> {{name}}: {{age}} </text>

</view></template><!--使用模板--><template is="mymoban" data="{{...zhangsan}}"/><!--赋值-->Page({

data: {

zhangsan: {

name:张三,

age:18,

}

}

})

  • 事件

事件就是在布局文件中用bindtap,在js文件中进行方法设置

<view bindtap="clickme">点我</view>

Page(){

Data:{

clickme: function(e){

console.log("我被点击了");

}

}

}

  • 引用

<!--引用有两种,一种是引其他布局中的模版,另一种是引用其他布局中除模版以外的部分--><!--第一种import:在page1中引用page2的模版--><import src="../page2/page2.wxml"/><!--引用进来后就可以直接使用page2中的模版--><!--注意:假如page2中引用了page3,这里并不会把page3引入进来,也就是说引用不能传递,如果page1也想使用page3的模版就需要单独再引用page3--><template is="mytemp"/><!--第二种include:在page1中引用page2中除模版以外的部分,这个和android中的include一样--><!--直接就把page2的布局加到page1页面了--><include src="../page2/page2.wxml"/>

  • 模块化

    模块化和模版和引用类似但不同,模块化可以理解成公共方法代码块。针对的是js代码。而模版和引用针对的是布局xml文件。

<!--1、创建公用代码块,可以单独建一个文件夹,单独的js文件--><!--创建一个叫common的文件夹和js文件并导出-->function say(content){

console.log('杨震宇说:'+content);

}<!--导出方式有两种,但强烈推荐使用第一种-->module.exports.mysay=say;//=左边的mysay可以随意起名,右边必须是方法名

exports.mysay=say;//这种方式是一种引用,不建议<!--2、使用代码块--><!--先引入公共方法所在的类,也就是js-->var common = require('../common/common.js');//.js后缀可不写

common.mysay('我是杨震宇');//这个mysay对应的是导出时的名字

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言
    友情链接