微信小程序入门3--wx语法

1.数据绑定:

在wxml里渲染文件

<view>{{message}}</view>

在js文件里初始化数据

Page({
  data: {
    message: 'Hello MINA!',
     list: [
      { id: "1", name: "张三", flag: false }, 
      { id: "2", name: "李四", flag: true },
       { id: "3", name: "王二", flag: false}
       ],
  }
})

2.列表渲染

<view wx:for=“{{list}}” wx:for-item="ite" wx:for-index="ind" wx:key="*this">
{{ite}}{{ind}}</view>

注:wx:for可以用来循环数组,默认元素是item,下标是index;可以通过wx:for-item和wx:for-index来修改元素和下标。在列表渲染的同事也需要绑定key

3.条件渲染

在框架中,使用 wx:if="" 来判断是否需要渲染该代码块:
<view wx:if="{{condition}}"> True </view>
//如果condition的值为真渲染该代码块否者不渲染代码块
wx:if 是一个控制属性,需要将它添加到一个标签上。如果要一次性判断多个组件标签,可以使用一个 <block/> 标签将多个组件包装起来,并在上边使用 wx:if 控制属性
<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

注意: 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。

4.模板的创建和引入

1.创建

<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>
使用模板

2.引入:

<template src="模板的地址"/>
<template is="msgItem" data=“{{list}}”>
 </template>
 //引入模板外的内容
 <includesrc="模板的地址">

模板通过属性data传值

5.wxs语法:

<wxs module="foo">
var some_msg = "hello world";
module.exports = {
  msg : some_msg,
}
</wxs>
<view> {{foo.msg}} </view>

更多细节可以参考官网:https://developers.weixin.qq.com/miniprogram/dev/framework/

发布了15 篇原创文章 · 获赞 14 · 访问量 265

猜你喜欢

转载自blog.csdn.net/jdsfui/article/details/104811461