小程序学习：两种数据加载方式

第一种

静态数据直接写入 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>