微信小程序 基础语法

微信小程序 基础语法

官网：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 的值以两种形式提供 ：

1. 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
2. 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
   如不提供 wx:key ，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

注意区分：

1. 在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。wx:for和wx:for-items作用一样
2. 默认数组的当前的下标变量名默认为index，数组当前项的变量名默认为item。
3. 使用wx:for-item 可以指定数组当前元素的变量名。起别名，默认是 item。使用wx:for-index 可以指定数组当前下标的变量名
4. wx:key 如果列表中项目的位置会动态改变或有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 中的输入内容， 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

条件渲染

<view wx:if="{{logged}}">登录</view>
<view wx:else>未登录</view>

这里需要注意一下：如果好几个判断中间是 elif
wx:if,wx:elif,wx:else

模板渲染

1. 定义模板
   使用 template 标签进行定义一个标签<template></template>。
   使用 name 属性，作为模板的名字。
2. 使用模板
   使用 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类