学习记录 微信框架基本使用

注:主要内容摘抄微信官方开发文档 本人运行后加以修改 仅作为学习记录

index.js 中的内容

Page({
  data: {
    message: 'Hello World',
    id:'0',
    zhen:'true',
    jia: 'false',
    a: 1,
    b: 2,
    c: 3,
    length:10,
    name:'张三',
    Object:{
      value:'我是数据链接中的值'
    },
    array:['1','2','3'],
    one:1,
    arrayUser:[
      {a:"张三"},
      {a:"李四"}
    ]
  }
})

index.wxml 中的内容

<!-- 赋值 在index.js内  -->

<view>{{message}}</view> 
<view class="item-{{id}}"></view>
<!-- 数据链接 -->
<view>{{Object.value}}</view>
<!-- 数组 -->
<view>{{array[0]}}</view>

<!--********************************* 判断 ******************************* -->
<!-- 不能直接从js中获取值 这样相当于 wx:if="false" 其计算结果是一个字符串，转成 boolean才行 -->
<view wx:if="{{false}}">假</view>  <view wx:if="{{true}}">真</view>

<checkbox checked="{{id}}">真</checkbox>
<checkbox checked="{{false}}">假</checkbox>

<!-- 逻辑判断 -->
<view wx:if="{{length < 5}}">我比5短</view>
<view wx:if="{{length > 5}}">我比5长</view>

<!-- 添加elif and else -->
<view wx:if="{{length<5}}">我小于5</view>
<view wx:elif="{{length<9}}">我小于九</view>
<view wx:else>我比他们都大</view>

<!-- block块 多判断 -->
<!-- <block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性-->
<block wx:if="{{true}}">
  <view>view1</view>
  <view>view2</view>
</block>

<!--********************************* 运算 ******************************* -->
<!-- 三元运算 -->
<view hidden="{{zhen=='true' ? false : true}}">  zhen的值是{{zhen}}</view>
<view hidden="{{jia=='false' ? false : true}}"> jia 的值是{{jia}} </view>

<!-- 算数运算 -->
<view> {{a + b}} + {{c}} + d </view>

<!-- 字符串运算 -->
<view>{{"Hello"+name}}</view>

<!--********************************* 组合 ******************************* -->
<!-- 循环取值 默认变量名item代表当前循环的值 index为默认下标-->
<view wx:for="{{[one,2,3,4]}}">{{index}}--{{item}}</view>

<!--使用wx:for-item 可指定当前元素的变量名 使用wx:for-idnex可指定当前元素下标的变量名 -->
<view wx:for="{{arrayUser}}" wx:for-index="xiabiao" wx:for-item="yuansu">{{xiabiao}}---{{yuansu.a}}</view>

<!-- 循环嵌套 -->
<view class='jiujiu'>
  <view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i">
    <view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="j">
      <view wx:if="{{i<=j}}">
        {{i}}*{{j}}={{i*j}}
      </view>
    </view>
  </view>
</view>

<!-- 块 同时控制标签内的全部试图层或者其他层 算是大循环-->
<block wx:for="{{[1,2,3]}}">
  <view>我是试图标签1 用来显示下标{{index}}</view>
  <view>我是试图标签2 用来显示循环元素 {{item}}</view>
</block>

<!-- 当wx:for 的值为字符串时 会将字符串解析为字符串数组-->
<view wx:for="array">     <!--等同于  <view wx:for="{{['a','r','r','a','y']}}"> -->
  {{item}}                <!--          {{item}} -->
</view>                   <!--       </view> -->

<!--注意 花括号和引号之间如果有空格，将最终被解析成为字符串-->
<view wx:for="{{[1,2,3]}} ">  <!-- 等同于 <view wx:for="{{[1,2,3] + ' '}}" > 会在个结果后加上空格 1 ,2 ,3 -->
  {{item}}
</view>