tencent cloud

<!-- wxml -->
<view> {{message}} </view>

// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>

<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>

// page.js
Page({
  data: {
    view: 'MINA'
  }
})

<!--wxml-->
<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>

// page.js
Page({
  data: {
    staffA: {firstName: 'Hulk', lastName: 'Hu'},
    staffB: {firstName: 'Shang', lastName: 'You'},
    staffC: {firstName: 'Gideon', lastName: 'Lin'}
  }
})

/** common.wxss **/
.small-p {  
  padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

<!--wxml-->
<wxs module="m1">
var msg = "hello world";

module.exports.message = msg;
</wxs>

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

hello world

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5, 1, 2, 3, 4]
  }
})

<!--wxml-->
<!-- The following getMax function takes an array and returns the value of the largest element in the array -->
<wxs module="m1">
var getMax = function(array) {
  var max = undefined;
  for (var i = 0; i < array.length; ++i) {
    max = max === undefined ?
      array[i] :
      (max >= array[i] ? max : array[i]);
  }
  return max;
}

module.exports.getMax = getMax;
</wxs>

<!-- Calls the getMax function in WXS with the "array" in page.js as the parameter -->
<view> {{m1.getMax(array)}} </view>

5

<view id="tapTest" data-hi="Weixin" bindtap="tapName"> Click me! </view>

Page({
  tapName: function(event) {
    console.log(event)
  }
})

{
  "type":"tap",
  "timeStamp":895,
  "target": {
    "id": "tapTest",
    "dataset":  {
      "hi":"Weixin"
    }
  },
  "currentTarget":  {
    "id": "tapTest",
    "dataset": {
      "hi":"Weixin"
    }
  },
  "detail": {
    "x":53,
    "y":14
  },
  "touches":[{
    "identifier":0,
    "pageX":53,
    "pageY":14,
    "clientX":53,
    "clientY":14
  }],
  "changedTouches":[{
    "identifier":0,
    "pageX":53,
    "pageY":14,
    "clientX":53,
    "clientY":14
  }]
}

var wxsFunction = function(event, ownerInstance) {
  var instance = ownerInstance.selectComponent('.classSelector') // Returns an instance of the component
  instance.setStyle({
      "font-size": "14px" // Support for rpx
  })
  instance.getDataset()
  instance.setClass(className)
  // ...
  return false // does not bubble up, which is equivalent to calling both stopPropagation and preventDefault
}

<wxs module="test" src="./test.wxs"></wxs>
<view 
  change:prop="{{test.propObserver}}" 
  prop="{{propValue}}" 
  bindtouchmove="{{test.touchmove}}" 
  class="movable">
</view>

module.exports = {
  touchmove: function(event, instance) {
      console.log('log event', JSON.stringify(event))
  },
  propObserver: function(newValue, oldValue, ownerInstance, instance) {
      console.log('prop observer', newValue, oldValue)
  }
}

<view bindtap="handleTap">
    Click here!
</view>

<view bindtap="{{ handlerName }}">
  Click here!
</view>

<view id="outer" bindtap="handleTap1">
  outer view
  <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" bindtap="handleTap3">
      inner view
    </view>
  </view>
</view>

<view id="outer" mut-bind:tap="handleTap1">
  outer view
  <view id="middle" bindtap="handleTap2">
    middle view
    <view id="inner" mut-bind:tap="handleTap3">
      inner view
    </view>
  </view>
</view>

<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
  outer view
  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
    inner view
  </view>
</view>

<view id="outer" bind:touchstart="handleTap1" capture-catch:touchstart="handleTap2">
  outer view
  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
    inner view
  </view>
</view>

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>

Page({
  bindViewTap:function(event){
    event.currentTarget.dataset.alphaBeta === 1 // - will convert to camel case
    event.currentTarget.dataset.alphaBeta === 2 // uppercase will be converted to lowercase
  }
})

<tagname property="value">
Content goes here ...
</tagname>

const query = wx.createSelectorQuery()
query.select('#the-id').boundingClientRect(function(res){
  res.top // Coordinates of the upper boundary of the #the-id node (relative to the display area)
})
query.selectViewport().scrollOffset(function(res){
  res.scrollTop // the vertical scroll position of the display area
})
query.exec()

Page({
  onLoad: function(){
    wx.createIntersectionObserver().relativeToViewport().observe('.target-class', (res) => {
      res.id // target node id
      res.dataset // target node dataset
      res.intersectionRatio // the proportion of the intersection area to the layout area of the target node
      res.intersectionRect // The intersection region
      res.intersectionRect.left // the coordinates of the left boundary of the intersection region
      res.intersectionRect.top // the upper boundary of the intersection region
      res.intersectionRect.width // width of the intersection region
      res.intersectionRect.height // height of the intersection region
    })
  }
})

Page({
  onLoad: function(){
    wx.createIntersectionObserver(this, {
      thresholds: [0.2, 0.5]
    }).relativeTo('.relative-class').relativeToViewport().observe('.target-class', (res) => {
      res.intersectionRatio // the proportion of the intersection area to the layout area of the target node
      res.intersectionRect // The intersection region
      res.intersectionRect.left // the coordinates of the left boundary of the intersection region
      res.intersectionRect.top // the upper boundary of the intersection region
      res.intersectionRect.width // width of the intersection region
      res.intersectionRect.height // height of the intersection region
    })
  }
})

.my-class {
  width: 40px;
}

@media (min-width: 480px) {
  /* Style rules that only work on screens 480px or wider */
  .my-class {
    width: 200px;
  }
}

Page({
  onResize(res) {
    res.size.windowWidth // The width of the new display area.
    res.size.windowHeight // the height of the new display area
  }
})