小程序學習：兩種數據加載方式

第一種

靜態數據直接寫入 index.js:

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    text: 'hello china!',
    array: ['明修棧道', '暗度陳倉']
  },

修改index.wxml:

  <text style='color:red'>{{text}}</text>
  <text>{{array[0]}}:{{array[1]}}</text>

結果：

第二種：

修改 index.js

  onLoad: function () {
    var content = {
      test1:"魚戲蓮葉間", test2: "魚戲蓮葉東"
    }
    this.setData(content);

修改 index.wxml:

  <text>{{test1}}，{{test2}}</text>

運行結果：

 

繼續修改：

  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    text: 'hello china!',
    array: ['明修棧道', '暗度陳倉'],
    poem: [{
      text: '離離原上草',
      author: '白居易'
    }, {
        text: '慈母手中線',
        author: '孟郊'
    }]
  },

.usermotto {
  margin-top: 200px;
}

.poem {
  margin-top: 20px;
}

  <view class="poem">
    <text class="user-motto">{{motto}}</text>
  </view>

  <view wx:for="{{['青青園中葵','朝露待日晞']}}">
    {{item}}
  </view>

  <view class="poem" wx:for="{{poem}}"> 
    {{item.text}}
  </view>

還可以這樣：

  <view class="poem" wx:for="{{poem}}" wx:for-item='item' wx:for-index='key'> 
    {{item.text}}:{{key}}
  </view>