微信小程序 基础语法
来源:互联网 发布:个人怎么注册域名 编辑:程序博客网 时间:2024/06/09 07:25
微信小程序 基础语法
官网:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/
.wxml文件中
列表渲染
<view wx:for="{{array}}">{{item}}</view>
如果没有写wx:key,这会报警告Now you can provide attr “wx:key” for a “wx:for” to improve performance.
- wx:key 的值以两种形式提供 :
- 字符串,代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。
- 保留关键字 *this 代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字,如:当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。
如不提供wx:key
,会报一个 warning, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。
注意区分:
- 在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。wx:for和wx:for-items作用一样
- 默认数组的当前的下标变量名默认为index,数组当前项的变量名默认为item。
- 使用wx:for-item 可以指定数组当前元素的变量名。起别名,默认是 item。使用wx:for-index 可以指定数组当前下标的变量名
- wx:key 如果列表中项目的位置会动态改变或有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 中的输入内容, 的选中状态),需要使用 wx:key 来指定列表中项目的唯一的标识符。
条件渲染
<view wx:if="{{logged}}">登录</view><view wx:else>未登录</view>
这里需要注意一下:如果好几个判断中间是 elif
wx:if,wx:elif,wx:else
模板渲染
- 定义模板
使用 template 标签进行定义一个标签<template></template>
。
使用 name 属性,作为模板的名字。 - 使用模板
使用 is 属性,声明需要的使用的模板,值是定义模板的name 属性值。
使用 data属性,将数据传入模板
<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>
例子2
<template name="odd" data="{{item}}"> <view>{{item}} is odd </view></template><template name="even" data="{{item}}"> <view>{{item}} is even </view></template><block wx:for="{{[1, 2, 3, 4, 5]}}" wx:for-item="item"> <template is="{{item % 2 == 0 ? 'even' : 'odd'}}" data="{{item}}"/></block>
事件-这里以点击事件为例
<view bindtap="push">跳转页面</view>
.js 文件中
Page({ data: { logged: false, message:'Hello Mina!', array:[1,2,3,4,5,6], staffA: { firstName: 'Hulk', lastName: 'Hu' }, staffB: { firstName: 'Shang', lastName: 'You' }, staffC: { firstName: 'Gideon', lastName: 'Lin' } },push:function(){wx.navigateTo({ url: '../userInfo/userInfo',})}
引用:import和include引用方式
如果要在index.wxml 里面要引用 demo.wxml 中定义的模板,则需要引入 demo.wxml文件
<import src="demo.wxml"/>
这里需要注意的是import的作用域:只会import目标文件中定义的template,而不会import目标文件import的template。和 iOS 中的 import 不一样,不能继承。
include
include可以将目标文件除了的整个代码引入,相当于是拷贝到include位置
倒计时
以倒计时天数为例:
首先在 js 文件的 data 中定义
data: {
time_high: ‘2018-06-06’
}
倒计时方法
// 倒计时 count_down: function () { var that = this; setInterval(function () { var curDate = util.formatTime(new Date); console.log("curDate-----------", curDate); var time_high = util.formatTime(new Date(that.data.time_high)); console.log(time_high); // 两个时间相差的秒数 var seconds = (Date.parse(time_high) - Date.parse(curDate)) / 1000; var days = seconds / (3600 * 24); var hours = parseInt((seconds - parseInt(days) * 3600 * 24) / 3600); var minutes = parseInt((seconds - parseInt(days) * 3600 * 24 - parseInt(hours) * 3600) / 60); var secs = parseInt((seconds - parseInt(days) * 3600 * 24 - parseInt(hours) * 3600 - parseInt(minutes) * 60)) console.log("secs:", secs); if (hours.toString().length <= 1) { hours = '0' + hours; } if (minutes.toString().length <= 1) { minutes = '0' + minutes; } if (secs.toString().length <= 1) { secs = '0' + seconds; } var timeString = hours + '小时' + minutes + '分' + secs + '秒' days = parseInt(days); that.setData({ days: days, timeString: timeString }); }.bind(this), 1000); },
模块
.wxs文件或者<wxs>
组件
cover类
阅读全文
0 0
- 微信小程序 基础语法
- Java程序基础语法
- 笔记: Lua基础: 特殊的程序语法
- 语法基础---简单的oc程序
- JavaSE----基础语法(程序流程控制)
- Java 基础语法 第一个java程序
- 语法基础-01java程序运行原理
- TensorFlow入门(基础语法,小程序)
- 暑期实训第一课(Arduino程序语法基础)
- Python的基础语法(具体程序示例)
- 基础语法C语言——第一个程序HelloWorld
- VBA语法-基础语法
- 基础语法
- 基础语法
- 基础语法
- 基础语法
- 基础语法
- 基础语法
- Spark的几种运行模式
- skimage模块
- sql优化日记2(join代替in)
- opencv 之图片缩放
- Elasticsearch6.0
- 微信小程序 基础语法
- 软件测试英文单词
- Glide使用详解
- 二级列表的实现
- ES6-数组的扩展-数组实例的entries(),keys()和values()
- 开源软件库TensorFlow最全教程和项目列表
- Eclipse中使用Ant
- LeetCode-Permutation Sequence
- 【思维导图】01-卷积神经网络笔记