微信小程序基础

1. 基本标签🎨

 view 相当于 div 
 image 相当于 img 
 navigation 相当于 a 
 text 相当于 span 

2. 循环嵌套🎨

<!-- 手动给其设置item的名字，为了方便item名字不冲突 -->
<view wx:for="{{list}}" wx:for-item="people"  wx:key="index" >
    <!-- {{index}}-{{item}} -->
    <view wx:for="{{list2}}" wx:key="index">
    <!-- {{index}}-{{item}} -->
    {{people}}--{{index}}-{{item}}
    </view>
</view>

3. block容器🎨

<!-- block标签相当于vue当中的template标签，只相当于一个容器，而不会被加载 -->
    <block wx:if="{{isLogin}}">

4. else,if等应用

话不多说，直接上代码

<view wx:if="{{age<100}}">小于100</view>
<view wx:elif="{{age<360}}">小于360</view>
<view wx:else>大于360</view>

5.template

template相当于一个组件,下面代码中将显示name值为first的模块内容

<template is="first"></template>

<template name="first">
<view>白日依山尽</view>
</template>

<template name="second">
<view>黄河入海流</view>
</template>

在page里面的data里面定义一个对象(主要一定要写成对象的形式)

 value:{
      "item":"nice"
    }

<template is="second" data="{{...value}}"></template>

<template is="first"></template>

<template name="first">
<view>白日依山尽</view>
</template>

<template name="second">
<view>黄河入海流{{item}}</view>
</template>

结果如下图所示：

也可以定多个模板，进行显示

在page里面的data里面数据

staffA: {firstName: 'Hulk', lastName: 'Hu'},
staffB: {firstName: 'Shang', lastName: 'You'},
staffC: {firstName: 'Gideon', lastName: 'Lin'}

<template name="staffName">

  <view>
    FirstName: {{firstName}}, LastName: {{lastName}}
  </view>
</template>

<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>

结果如下图所示：