小程序 总结

1.  <!-- 获取值 -->

<!-- 获取值 -->
<view>
  <view hidden="{{flag ? true : false}}">hello word  
    {{message}}
  </view>
</view>

data: {
    message:"hi word",
    flag:false
}

 

2. <!--列表渲染-->

<!--列表渲染-->
<view>
  <block wx:for="{{items}}" wx:for-item="item" wx:key="index">
    <view>{{index}}:{{item.name}}</view>
  </block>
</view>

data: {
    items:[
      { name: "商品A" },
      { name: "商品B" },
      { name: "商品C" },
      { name: "商品D" },
      { name: "商品E" }
    ]
}

3. <!--条件渲染-->

<!--条件渲染-->
<view>
  <view wx:if="{{condition == 1}}">
    条件1
  </view>
  <view wx:elif="{{condition == 2}}">
    条件2
  </view>
  <view wx:else="{{condition == 3}}">
    条件3
  </view>
</view>

data: {
    condition:Math.floor(Math.random()*3+1) 
}

为condition 赋值一个1--3 的整数，   Math.random()*3 获取0--3的浮点随机数，  Math.floor 浮点数变整数

4. <!--模板 import 引用-->  只引用 template 模板中的内容

<!--模板引用--> <!--hello.wxml-->
<import src="a.wxml"></import>
<template id="a" is="a"></template>

<!--a.wxml-->

<view>hello,word</view>

<template name="a">
  hello,word!!!!
</template>

<template name="b">
  hello!!!!
</template>

5. <!--模板 include 引用-->   只引用 非 template 模板的内容

<!--模板 include 引用-->
<include src="a.wxml"></include>
<template id="a" is="a"></template>

<view>hello,word view</view>

<template name="a">
  hello,word name is a template
</template>

<template name="b">
  hello,word  name is b template
</template>

6. css 引用

<view class="container">
  hello word
</view>

/*hello.wxss*/
@import "./assets.wxss";
.container{
  color: red;
}

/*assets.wxss*/
.container{
  border:1px solid #000;
}

7. 内联样式

<view style="width:500rpx; height:30x; background-color:{{colorValue}}">hello word2</view>

/*hello.js*/
data: {
    colorValue:"red"
  },

8.  wxs 内部使用

<wxs module="m1">
  module.exports = {
    message:'Hello, world!'
  }
</wxs>

<view>{{m1.message}}</view>

9. 引用外部 wxs 文件

<!--hello.wxml-->
<wxs src="./m2.wxs" module="m2"></wxs>
<view>{{m2.message}}</view>

<!--m2.wxs-->
module.exports = require("./m1.wxs")

<!--m1.wxs-->
module.exports = {
  message:'hello world'
}

 10. view 组件  参考微信小程序开发文档（微信官方网站）

<!-- hello.wxml -->
<view class='section'>
  <view>view 组件</view>
    <view class='view-parent-container' hover-class='hover-parent-container'>
        <view class='view-container'
            hover-class="hover-container"
            hover-stop-propagation="true"
            hover-start-time="100"
            hover-stay-time="100">
        </view>
    </view>
</view>

.view-parent-container{
  width:300rpx;
  height:300rpx;
  background: yellowgreen;
}

.hover-parent-container{
  background: #fff;
}

.view-container{
    width:200rpx;
    height:200rpx;
    background: chocolate;
    color:#fff;
    text-align: center;
    line-height: 200rpx;
}

.hover-container{
  background: red;
}