原生微信小程序 基础语法

原生小程序之 wxml 标签语法

定义数据

• index.wxml

<view>
  {{ test }}
</view>

• index.js

// pages/about/about.js
Page({
  data: {
    test:"testtest"
  },
})

wx:for 遍历 数组

• index.wxml

<!--index.wxml-->
<view class="container">
  <view wx:for="{{arr}}" class="arr-item" wx:key="index">{{  item }}</view>
</view>

• index.js

// index.js
Page({
  // 定义数据
  data: {
    arr: [
      1, 2, 3, 4
    ]
  },
})

wx:for 遍历 对象

• index.wxml

<!--index.wxml-->
<view >
  <!-- wx:for 遍历对象 设置item为每一个项 和 index值 -->
  <view wx:for="{{obj}}"  wx:for-item="value" wx:for-index="key" wx:key="key">
    <text>{{ value.age }}</text>
  </view>
</view>

• index.js

// index.js
Page({
  data: {
    obj:{
      "a":{age:10},
      "b":{age:20},
      "c":{age:30}
    }
  },
})

• 效果
  

wx:if wx:elif wx:else 条件语句 ( wx:if 可以和 block空标签一起使用，不会渲染多余的标签)

• wxml.html

<!--index.wxml-->
<view class="container">
  <view wx:if="{{ view == '1'}}">我是1</view>
  <view  wx:elif="{{ view == '2'}}">我是2</view>
  <view  wx:else="{{ view == '3'}}">我是3</view>
</view>

• index.js

// index.js
Page({
  // 定义数据
  data: {
    view:"1"
  },
})

三目运算

<view > {{flag ? "我是true" : "我是false"}} </view>

hidden 显示和隐藏属性 （ 类似 vue的 v-show）

• index.wxml

<view>
  flag - {{ flag }}
  <view hidden="{{flag}}">为true时隐藏,flase为显示</view>
  <button bindtap="btn">修改</button>
</view>

• index.js

// pages/about/about.js
Page({
  data: {
    flag:true
  },
  btn(e){
    this.setData({
      flag: !this.data.flag
    })
  }
})

• 效果
  

模板语法 （ 渲染 同样的标签，只不过内容不一致而已 ）

• index.wxml

<view>
  <template name="staffName">
    <view>
      FirstName: {{firstName}}, LastName: {{lastName}}
    </view>
  </template>
  <template is="staffName" data="{{...staffA}}"></template>
  <template is="staffName" data="{{...staffB}}"></template>
</view>

• index.js

// pages/about/about.js
Page({
  data: {
    staffA:{
      firstName:"谢",
      lastName:"哈哈"
    },
    staffB:{
      firstName:"林",
      lastName:"嘻嘻"
    },
  },
})

• 效果
  
• index.wxml

  <template name="objectCombine">
    obj {{ for }} - {{ bar }} 
  </template>
  <template is="objectCombine" data="{{for: a, bar: b}}"></template>

• index.js

// pages/about/about.js
Page({
  data: {
    flag:true,
    a:"aaa",
    b:"bbb"
  },
})

• 效果
  

原生小程序 之 wxss 样式相关

• 当前屏幕 750rpx (满屏 - 总宽度)
• 样式导入
• @import XXX路径

class 与 style 两种写法

• class 与 style 两种写法
• index.wxml

<view>
  <!-- style 普通写法 -->
  <view style="color: red">我是red</view>
  <!--style 动态绑定 数据 -->
  <view style="color:{{ color }};background: {{bg}};">我是red</view>
  <view style="color:{{flag? color:color2 }};">我是red</view>
  <view style="color:{{!flag? color:color2 }};">我是red</view>
  <view> ---- 分割线 ---- </view>   
  <!-- class 普通写法 -->
  <view class="color1">我是red</view>
  <view class="{{ flag ? 'color1':'color2'}} 'bg2'">我是red</view>
  <view class="{{ !flag ? 'color1':'color2'}}">我是red</view>
</view>

• index.js

// pages/about/about.js
Page({
  data: {
    color:"blue",
    flag:true,
    color2:"red",
    bg:"orange"
  },
})

• index.wxss

.color1 {
  color: #cc1;
}
.bg2 {
  background: orange;
}
.color2 {
  color: pink;
}

• 效果