AD:靠谱的微信小程序外包开发

admin

admin

发表于 2017-07-01 13:02:03

摘要:微信小程序开发者社区(www.mntuku.cn)为您提供:微信小程序练习:数据绑定,条件渲染,模板,事件
相关的资讯,希望对您有帮助。

微信小程序练习:数据绑定,条件渲染,模板,事件

点评:附录: 官方文档:https://mp.weixin.qq.com/wiki找到微信小程序,下载微信开发者工具,扫描二维码进入1.1数据绑定pages/index/index index.wxml  纯文本查看 复制代码view class=container !-- 1.数据绑 ...


官方文档:https://mp.weixin.qq.com/wiki找到微信小程序,下载微信开发者工具,扫描二维码进入

1.1数据绑定

pages/index/index index.wxml  


    
     {{message}} 

    
     {{index}}:{{item}}
    

    
     WEBVIEW 
     APP 
     MINA 


    
    
    
     
    

    
    {{count}}

  

pages/index/index index.js

var param = {
    data : {
        message : 微信小程序数据绑定,
        array : [列表渲染1, 列表渲染2, 列表渲染3],
        view : APP,
        zhangshan : {name : 张山, age : 18},lisi : {name : 李四, age : 28},
        count : 0,
    },
    add:function(e){
        this.setData({
            count:this.data.count + 1
        })
    }
};
//每一个页面调用Page方法
Page(param);  

1.2条件渲染

index.wxml


    
     5}}> 大于5 
    小于等于5

    
        view0
        view1
    

    
  

index.js

var param = {
    data : {
        length : 6,
        isShow : false,
    }
};

Page(param);

1.3列表渲染

index.wxml


    

    
        {{index}}:{{item.message}}
        
    

    
        {{arrayIndex}}:{{arrayName.message}}
        
    

    
        
            
            {{i}} * {{j}} = {{i * j}}
            
        
    

    
        {{index}}
        {{item}}
    
  

index.js

var param = {
    data:{
        array:[
            {message : view0},
            {message : view1},
            {message : view2}
        ]
    }
}

Page(param);

1.4模板

index.wxml


    
    

    
    
    


    
    

    
    

    
    
    

    
    
    
  

index.js

var param = {
    data : {
        x : zhang,
        y : 50,
        a : 深圳,

        name : wang,
        age : 21,
        addr : 广州,

        obj1 : {
            name : name1,
            age : 22,
            addr : 广州1,
        },
        obj2 : {
            name : name2,
            age : 23,
            addr : 广州2,
        },

        person_objs : [
            {
                name : name4,
                age : 25,
                addr : 广州4,
            },
            {
                name : name5,
                age : 26,
                addr : 广州5,
            },
        ]
    }
};
Page(param);

1.5事件

事件:
    类型                触发条件
    touchstart      手指触摸动作开始
    touchmove       手指触摸后移动
    touchcancel     手指触摸动作被打断,如来电提醒,弹窗
    touchend        手指触摸动作结束
    tap             手指触摸后马上离开
    longtap         手指触摸后,超过350ms再离开

事件的使用:
    在组件中绑定一个事件处理函数 => bind+事件=事件处理函数,在相应的Page定义中写上相应的事件处理函数,参数是event

事件分类:
    事件分为冒泡事件和非冒泡事件

事件绑定:
    事件绑定的写法同组件的属性
    绑定冒泡事件:bind+事件=事件处理函数
    绑定非冒泡事件:catch+事件=事件处理函数

事件对象:
    当组件触发事件时,逻辑层绑定该事件的处理函数会收到一个事件对象event
    event里面的基础事件对象:
        type            事件类型
        timeStamp       事件生成时的时间戳
        target          触发事件的源组件
        currentTarget   事件绑定的当前组件
    currentTarget
        id              当前组件的id
        tagName         当前组件的类型
        dataset         当前组件上由data-开头的自定义属性组成的集合 

项目地址及下载:

https://github.com/dzfrontend/wx-small-program



61阅读 | 0评论
你的回应
写文章

6941