<!--pages/wxml/index.wxml-->
<!--
<view>
<text>Hello Wechat mini World</text>
</view>
<view>
<image src="./image_one.png"></image>
</view>
<Text> Current Time: {{time}} </ text>
<view>{{w}}</view>
<view>{{W}}</view>
<view>{{undefined}}</view>
<view>{{null}}</view>
-->
<text>Hello Wechat World</text>
<! - chestnut ternary operator a = 1 ->
<View> {{a == 10 "variable a equals 10":? "Variable a is not equal to 10"}} </ view>
<! - output variable is not equal to a 10 ->
<! - chestnut arithmetic operation {a: 1, b: 2, c: 3} ->
<view> {{ a + b }} + {{ c }} + d </view>
<! - Output 3 + 3 + d ->
<! - chestnut string concatenation {name: 'world'} ->
<view>{{ 'hello ' + name }}</view>
<-! Output hello world ->
<-! Chestnuts constant ->
<view>{{[1,2,3]}}</view>
<! - Output 1,2,3 ->
<! - chestnut logic determination ->
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
<- length:! 10 output 1 ->
<-! Length not defined output 3 ->
<! - determining a plurality of disposable chestnut determination logic element tag ->
<block wx:if="{{false}}">
<view> view1 </view>
<view> view2 </view>
</block>
<-! No output ->
<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>
<! - Output
view1
view2
-->
<-! Chestnuts list Render ->
<- wx used in the assembly:! For controlling a property binding array, the array can be used to render the component data is repeated. The default subscript of an array variable name defaults to the current item index, the current array variable name item default item ->
<-! Corresponding script file
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
-->
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
<- Output 0:! Foo ->
<-! Chestnuts list of the current element and render the specified array subscript variable name ->
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
<- Output 0:! Foo ->
<-! Chestnuts list rendering <block /> ->
<block wx:for="{{[100,200,300]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
<!--
0:
100
1:
200
2:
300
-->
<-! Chestnuts render dynamic list ->
<!--
If the position of the items in the list should be dynamically changed or new items added to the list, and the desired item in the list maintain their characteristics and status (e.g. <input /> contents inputted, <switch /> is selected) need to use wx: key to assign a unique identifier items in the list.
WX: value for key is provided in two forms:
String that represents a property of the for loop in Array of item, the value of the property needs to be unique in the list of strings or numbers, and can not be changed dynamically.
This represents the reserved keywords for the item in the loop itself, this representation requires a unique item itself string or a number, such as:
When data changes trigger re-rendering render layers when will the correction with key components of the framework will ensure that they are re-ordered, rather than re-create, in order to ensure that the components retain their status, and to improve the efficiency of a list rendering.
-->
<!--
Page({
data: {
objectArray: [
{id: 5, unique: 'unique_5'},
{id: 4, unique: 'unique_4'},
{id: 3, unique: 'unique_3'},
{id: 2, unique: 'unique_2'},
{id: 1, unique: 'unique_1'},
{id: 0, unique: 'unique_0'},
],
numberArray: [1, 2, 3, 4]
},
switch: function(e) {
const length = this.data.objectArray.length
for (let i = 0; i < length; ++i) {
const x = Math.floor(Math.random() * length)
const y = Math.floor(Math.random() * length)
const temp = this.data.objectArray[x]
this.data.objectArray[x] = this.data.objectArray[y]
this.data.objectArray[y] = temp
}
this.setData({
objectArray: this.data.objectArray
})
},
addToFront: function(e) {
const length = this.data.objectArray.length
this.data.objectArray = [{id: length, unique: 'unique_' + length}].concat(this.data.objectArray)
this.setData({
objectArray: this.data.objectArray
})
},
addNumberToFront: function(e){
this.data.numberArray = [ this.data.numberArray.length + 1 ].concat(this.data.numberArray)
this.setData({
numberArray: this.data.numberArray
})
}
})
-->
<switch wx:for="{{objectArray}}" wx:key="unique">{{item.id}}</switch>
<button bindtap="switch"> Switch </button>
<button bindtap="addToFront"> Add to the front </button>
<switch wx:for="{{numberArray}}" wx:key="*this"> {{item}} </switch>
<button bindtap="addNumberToFront"> Add Numnber to the front </button>
<-! Chestnuts render dynamic list ->