探索微信小程序之路

记录一下每日的知识点,时不时温习一下。

  • 视图与渲染对于页面中的数据,以json的方式存放在js文件的data中
  • 判断的使用:
<view wx:if='{{true}}'>
    为真时显示
</view>
<view wx:else>
    为假时不显示
</view>

根据判断语句的真假来判断是否要显示内容。

也可以在data设置isshow来进行动态显示隐藏。

/**    js代码    **?
Page({
    data:{
        show : ture
    }

    btnclick : function(){
        var isshow = this.data.show;
        this.setData({show:!isshow})
})
/**    wxml    **/
<buttom bindtap="btnclick">这是一个按钮</buttom>
<view wx:if="{{show}}">要显示的内容1或者{{text1}}</view>
<view wx:else>要显示的内容2或者{{text2}}</view>

页面最初显示   要显示的内容1或者{{text1}},点击按钮后显示    要显示的内容2或者{{text2}

  • 循环的使用

/**    js    **/
Page({
    data:{
    items : ['aaa','bbb','ccc']
    }
})
/**    wxml    **/
<view wx:for="{{items}}" wx:for-item="item" wx:for-index="ix" >
    {{ix}} - {{item}}
</view>
  • 引用模板

新建wxml,对其命名为header和footer,并向其中添加相同的元素

  • 1.对于模板在<template name="xxx">标签内应该使用 <import src="该wxml地址"/><template is="xxx"/>
  • 2.对于无<template>可以直接使用<include src="该模板的wxml地址">

小tip:在小程序开发中没有system.out.print这样的打印,统一取代为consloe.log()     无;结尾

原文地址:https://www.cnblogs.com/triangle959/p/10662899.html