javascript - 微信小程序奇怪问题，数据获取不到

问题描述

问 题

1.微信小程序通过app.json去add page，其中pages中已添加"pages/monthDetail/index"页面，并且能从首页访问到该页面，静态页面完全OK。下一步上模拟数据。
2.通过以下数据来模拟真实数据，其中js中无其他ES6语法，此时，页面console提示
`

data: {
    yearList: [{
      year: '2016',
      totalIncome:'2016',
      monthList: [{
        month: '04',
        income: 233,
        cost: 23,
      },{
        month: '06',
        income: 232,
        cost:23,
      }]
    },{
      year: '2015',
      totalIncome:'2016',
      monthList: [{
        month: '12',
        income: 2323,
        cost: 111
      }]
    }]
  },

`
此时，页面console提示错误：

Page[pages/monthDetail/index] not found. May be caused by: 1. Forgot to add page route in app.json. 2. Invoking Page() in async task.

但是明明app.json里面已经添加过该页面，并且能访问得到，只是数据拿不到。app.json如下

{
  "pages":[    
    "pages/index/index",
    "pages/logs/logs",
    "pages/monthDetail/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#25282e",
    "navigationBarTitleText": "微信小程序",
    "navigationBarTextStyle":"#fff",
    "enablePullDownRefresh": true
  }
}

在wxml中代码如下：

<view wx:for-item="{{yearList}}">
  <view class="year box box-lr">
    <view class="box box-tb box-pack-center box-left">{{ item.year }}</view>
    <view class="box box-tb box-pack-center box-center">
      <view><view class="tip">收</view>：{{ item.totalIncome }}</view>
      <view><view class="tip">支</view>：{{ item.totalCost }}</view>
    </view>
    <view class="box box-tb box-pack-center box-right">
      <view>{{ item.totalIncome - item.totalCost }}</view>
      <view>结余</view>
    </view>
  </view>
  <view class="month box box-lr"  wx:for-item="{{item.monthList}}" wx:for-item="items">
    <view class="box box-tb box-pack-center box-left">{{ items.month }}</view>
    <view class="box box-tb box-pack-center box-center">
      <view><view class="income">收</view>：{{ items.income }}</view>
      <view><view class="cost">支</view>：{{ items.cost }}</view>
    </view>
    <view class="box box-tb box-pack-center box-right">
      <view>{{ items.income - items.cost }}</view>
      <view>结余</view>
    </view>
  </view>
</view>

3.有一起研究小程序的同伴大神遇到过这样的问题吗？

补充提问：

有看到大神遇到这样的情况，说是在app.json中二级页面的定义要在一级页面的下面。此方法也修改了，不报之前的console错误，但是数据依旧无法正常显示。

解决方案

<view class="flow-outer" wx:for="{{yearList}}">
  <view class="year box box-lr">
    <view class="box box-tb box-pack-center box-left">{{ item.year }}</view>
    <view class="box box-tb box-pack-center box-center">
      <view><view class="tip">收</view>：{{ item.totalIncome }}</view>
      <view><view class="tip">支</view>：{{ item.totalCost }}</view>
    </view>
    <view class="box box-tb box-pack-center box-right">
      <view>{{ item.totalIncome - item.totalCost }}</view>
      <view>结余</view>
    </view>
  </view>
  <view class="month box box-lr"  wx:for="{{item.monthList}}" wx:for-item="items">
    <view class="box box-tb box-pack-center box-left">{{ items.month }}</view>
    <view class="box box-tb box-pack-center box-center">
      <view><view class="income">收</view>：{{ items.income }}</view>
      <view><view class="cost">支</view>：{{ items.cost }}</view>
    </view>
    <view class="box box-tb box-pack-center box-right">
      <view>{{ items.income - items.cost }}</view>
      <view>结余</view>
    </view>
  </view>
</view>

以上即为正确写法，有关于wx:for和wx:for-item以及wx:for-item="item"的正确用法

这篇关于javascript - 微信小程序奇怪问题，数据获取不到的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！