小程序基础

wx:if 判断

    <!-- wxss -->
    .t{ font-size:30px; }
    
    <!-- wxml -->
    <view class="t" wx:if="{{flag==1}}">我是可爱的小墩墩</view>
    <view class="t" wx:elif="{{flag==2}}">我是冰墩墩</view>
    <view class="t" wx:elif="{{flag==3}}">我是雪融融</view>
    <view class="t" wx:else>我是可恶的小泡菜</view>
    <button bindtap="qie">切换</button>
    
    <!-- js -->
    data: {
        flag:1,
        list:['冰墩墩','雪融融','小泡菜'],
    },
    qie:function(){
        this.setData({
            flag:3
        })
    },

wx:for 循环

    <!-- data-传动态的值 需要加{{}}绑定 -->
    <view bindtap="a" data-f="{{flag}}">123</view>
    <!-- wx:for="{{数组}}" 循环需要绑定key wx:key="index"-->
    <!-- 自带定义 item 表示数组的每一项 index 表示数组的索引 -->
    <!-- 使用wx:for-item修改每一项值的key -->
    <!-- 使用wx:for-index修改每一项值的index -->
    <view wx:for="{{list}}" class="t" wx:key="i" 
    wx:for-item="r" wx:for-index="i"
    style="color:{{r.styFlag?'red':''}};"
    data-i="{{i}}"
    bindtap="choose"
    >
        {{r.name}}--{{i}}
    </view>
    
    <!-- js -->
    data: {
        list:[{
            name:'冰墩墩',
            styFlag:true
        },{
            name:'雪融融',
            styFlag:false
        },{
            name:'小泡菜',
            styFlag:false
        }]
    },
    choose:function(e){
        let { currentTarget:{ dataset:{i} } } = e;
        /* 第一步获取点击的当前的内容的索引 */
        console.log(i)
        /* 排他 把所有的先置空 */
        this.data.list.forEach(r=>{
            r.styFlag = false
        })
        this.data.list[i].styFlag = true;
        /* 数据变了 视图没变 必须要使用setData实现数据和视图的双向数据绑定 */
        this.setData({
            list:this.data.list
        })
    },

路由实现应用内页面跳转

    <!-- mypage.wxml -->
    <button bindtap="go1" style="margin: 3px;">张三</button>
    <button bindtap="go2" style="margin: 3px;">李四</button>
    <button bindtap="go3" style="margin: 3px;">24号</button>
    <button bindtap="go4" style="margin: 3px;">不带参数</button>
    
    <!-- mypage.js -->
    go1:function(){
        /* 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面 */
        wx.navigateTo({
          url: '/pages/logs/logs?name=zhangsan',
        })
    },
    go2:function(){
      /* 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 */
        wx.switchTab({
          url: '/pages/index/index?name=lisi',
        })
    },
    go3:function(){
       /*  关闭所有页面，打开到应用内的某个页面 */
        wx.reLaunch({
          url: '/pages/fenglei/fenglei?name=24',
        })
    },
    go4:function(){
        /* 使用redirectTo是无法使用navigateBack返回的*/
        /* 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。 */
        wx.redirectTo({
            url: '/pages/fenglei/fenglei',
        })
    },
    
    <!--pages/fenglei/fenglei.wxml-->
    <button bindtap="goBack">返回上一级</button>
    <!-- wx:if 和 wx:elif 以及wx:else之间不可以被其他的标签打断 -->
    <block>
    <view wx:if="{{msg=='zhangsan'}}" class="t">欢迎回来主人</view>
    <view wx:elif="{{msg=='lisi'}}" class="t">家里水龙头没有坏不要过来</view>
    <view wx:elif="{{msg=='24'}}" class="t">您好欢迎为您服务</view>
    <view wx:else class="t">显示家里没人</view>
    </block>
    
    // pages/fenglei/fenglei.js
    data: {
        msg:""
    },
    goBack:function(){
        wx.navigateBack()
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        console.log(options.name)
        /* 多次使用setData会影响性能 尽量把多次setData 使用一次setData来实现
        尽量少的使用setData来提高小程序的性能 */
        this.setData({
            msg:options.name
        })
        /* 如果名字叫张三 页面显示欢迎回来主人 */
        /* 如果名字叫李四 页面显示家里水龙头没有坏不要过来 */
        /* 如果名字叫24号 页面显示您好欢迎为您服务 */
        /* 都不是 显示家里没人 */
    },