美文网首页
[微信小程序开发] 动态数据不够用,本地静态数据的使用教程

[微信小程序开发] 动态数据不够用,本地静态数据的使用教程

作者: HelloMUJO | 来源:发表于2016-11-24 09:43 被阅读1397次

鉴于目前小黄象API调用次数限制(主要是穷,没有积分去兑换),我使用本地数据进行调试,也可以达到同样效果。
闲话少说,直接上代码,目录结构就是微信小程序官方结构

目录结构

staticData.js

var data_ = require('../../utils/data.js')
Page({
    data:{
        list:[]
    },
    onLoad:function(){
        this.setData({
            list:data_.getSData()
        });
    }
});

staticData.json

{
    "navigationBarTitleText": "数据"
}

staticData.wxml

<!--staticData.wxml-->
<view class="container log-list">
  <block wx:for="{{list}}" wx:for-item="log" wx:key="*this">
    <text class="log-item">key:{{log.key}},value:{{log.value}}</text>
  </block>
</view>

staticData.wxss

.log-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}
.log-item {
  margin: 10rpx;
}

data.js

function getSData(){
    var data = [{
        key:'1',
        value:'1V'
    },{
        key:'2',
        value:'2V'
    },{
        key:'3',
        value:'3V'
    },{
        key:'4',
        value:'4V'
    }];
    return data;
}
module.exports = {
  getSData: getSData
}

运行效果图

运行效果图

最后发现,好像真的好好用(并没有,你咬我啊)

下文
数据null导致无法展示,控制台不报错,踩坑

相关文章

网友评论

      本文标题:[微信小程序开发] 动态数据不够用,本地静态数据的使用教程

      本文链接:https://www.haomeiwen.com/subject/pqrbpttx.html