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

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

作者: 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