微信小程序-初入json渲染页面

最新推荐文章于 2024-08-08 07:49:11 发布

王建新

最新推荐文章于 2024-08-08 07:49:11 发布

阅读量9.3k

点赞数 1

分类专栏：微信小程序

本文链接：https://blog.csdn.net/csdnwangjianxin/article/details/54602883

版权

微信小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近在弄小程序，感觉资料很少，自己是后端开发，之前自己玩过一点安卓，感觉还行挺像的
首先看一下目录吧
在pages下的是页面，js,css文件，
utils目录下是工具类的js 可以引入
app全局的，app.json如下，里面的pages配置页面的新添加的页面需要配置在里面
现在我们在index.js里访问接口
我写在了onload方法里，wx.request()方法

,
  onLoad: function () {
    wx.request({
      url:'http://www.*****.com/mCase/show.json',
      data: {
        pagenum:1,
        pagesize:100,
        type:1
      },
      method: 'GET',// OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      success: function(res){
        console.info(res);
        that.setData({
          casearticle:res
        })
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
    var that = this
  },

使用setData绑定数据

在页面中

<view wx:for="{{casearticle.data.rv}}" class="shelf-nav-item"
    >  
        <image src="http://img.qicheke.com/source/{{item.pcImage}}" ></image>
<text class="article_title">{{item.title}}</text>
        <text class="time">{{item.createtime}}</text>
      </view>

这里使用{{}}的写法，在image中写了bindtap是绑定事件的，绑定了detial方法,data-hi是用于传参

这样简单的json渲染页面