1. 程式人生 > >微信小程式-初入json渲染頁面

微信小程式-初入json渲染頁面

最近在弄小程式,感覺資料很少,自己是後端開發,之前自己玩過一點安卓,感覺還行挺像的

首先看一下目錄吧

在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渲染頁面


相關推薦

程式-json渲染頁面

最近在弄小程式,感覺資料很少,自己是後端開發,之前自己玩過一點安卓,感覺還行挺像的首先看一下目錄吧在pages下的是頁面,js,css檔案,utils目錄下是工具類的js 可以引入app全域性的,app.json如下,裡面的pages配置頁面的新新增的頁面需要配置在裡面現

程式體驗,入門練手專案--通訊錄,部署上線(二)

接上一篇《微信小程式初體驗,入門練手專案--通訊錄,後臺是阿里雲伺服器》:https://www.cnblogs.com/chengxs/p/9898670.html   開發微信小程式最尷尬的是好不容易開發完了,卻在程式碼稽核時被卡住了。因為你可能認為你的類目是開放類目中的一個,但是微信可能判

程式開發-app.json解析

App.json檔案解析 Page屬性: 接受一個數組,每一項都是字串,來指定小程式由哪些頁面組成。每一項代表對應頁面的【路徑+檔名】資訊,陣列的第一項代表小程式的初始頁面。小程式中新增/減少頁面,都需要對 pages 陣列進行修改。 檔名不需要寫檔案字尾,因為框架會自動去尋找路徑.json,.js,.

程式體驗,入門練手專案--通訊錄,後臺是阿里雲伺服器

本文內容: 一、前言 二、相關概念 三、開始工作 四、啟動專案起來 五、專案結構 六、設計理念 七、路由 八、部署線上後端服務 同步交流學習社群: https://www.mwcxs.top/page/440 原始碼地址:https://github.com/sau

程式】app.json配置

最近因公司開發團隊合併,需要了解微信小程式,估找了demo來學習。 app.json配置項列表 pages 接受一個數組,每一項都是字串,來指定小程式由哪些頁面組成。每一項代表對應頁面的【路徑+檔名】資訊, 陣列的第一項代表小程式的初始頁面。小程式中新增/

程式體驗,入門練手專案--通訊錄,後臺是阿里雲伺服器(一)

內容: 一、前言 二、相關概念 三、開始工作 四、啟動專案起來 五、專案結構 六、設計理念 七、路由 八、部署線上後端服務 一、前言(坑爹的玩意)         微信小程式自從2017年,被各種看好,不過一段時間過去了還是反響平平,下半年隨著各項功能的開放,很多企業陸續接入了

程式踩坑

剛開始接觸微信小程式,有一點做網站的基礎,會點前端和js,下面是踩坑記錄 tabBar按鈕 1.1 tabBar不要拼錯了,之前有拼成toolbar,不要搞混了 1.2 tabBar上使用到的頁面都要在app.jon中註冊 展示資料 wx:for迴圈顯

關於程式接受後臺json資料漢字變成問號

   最近做微信小程式開發,發現後臺傳來的json資料裡面的中文全變成了“?”    如下圖:          上網找也沒找到解決方法,後來經過自己除錯半天,突然就解決了,解決方案如下圖所示:           把 請求,響應的編碼格式和型別的語句 都放在  Pri

程式開發門第七章:收藏、評論、點贊及計數功能

    本章內容有一定的難度,但其中的技巧和知識還是很豐富的。本章通過編寫幾乎所有內容型應用都會附帶的“評論”“點贊”“閱讀計數”“收藏”等功能,來學習使用小程式的互動反饋元件、快取的應用、圖片選擇和預覽、遮蔽關鍵字、錄音、拍照以及播放錄音等功能7.1 收藏、評論、點贊、計數

程式傳陣列(Json字串)到Java後端

一:小程式端: wxml中程式碼: <!--index.wxml--> <view> <view> <button bindtap="onShow"> 調介面 </button> </view> &l

程式入門教程--列表渲染多層巢狀迴圈及wx:key的使用

入門教程之列表渲染多層巢狀迴圈,目前官方的文件裡,主要是一維陣列列表渲染的案例,還是比較簡單單一,給剛入門的童鞋還是無從入手的感覺。 <view wx:for="{{items}}"> {{index}}: {{item.message}} </view> 還有一個九九乘法表把資

程式入門教程---列表渲染多層巢狀迴圈及wx:key的使用(雙層for迴圈)

前言 入門教程之列表渲染多層巢狀迴圈,目前官方的文件裡,主要是一維陣列列表渲染的案例,還是比較簡單單一,給剛入門的童鞋還是無從入手的感覺。 <view wx:for="{{items}}"> {{index}}: {{item.message}} <

程式步入坑指南

微信小程式初步入坑小指南 安裝工具 app.json 為json格式的檔案,為一個配置檔案,屬於全域性的 初始化的檔案內容 { "pages":[ "pages/index/index", "pages/logs/l

程式-中處理json資料 (從json資料中提取想要的值 將變數json字串轉成json物件)

1、新增依賴 <dependency> <groupId>net.sf.json-lib</groupId> <artifactId>jso

程式WXML之列表渲染

這一章節我們來學習一下我們在程式中另一個重要的語法結構迴圈結構,在java或C中是用for關鍵字的,在微信小程式中也是for關鍵字,但是不同的是語法結構有點不同,下面我們介紹一下。 wx:for 在元件上使用wx:for控制屬性繫結一個數組,即可使用陣列中各項的資料重複渲

程式體驗-列表的上拉載入和下拉重新整理的實現

微信小程式可謂是9月21號之後最火的一個名詞了,一經出現真是轟炸了整個開發人員,當然很多App開發人員有了一個擔心,微信小程式的到來會不會讓移動端App顛覆,讓移動端的程式設計師失業,身為一個Android開發者我是不相信的,即使有,那也是需要個一兩年的過度和打

程式體驗--封裝http請求

最近看了一下微信小程式,大致翻了一下,發現跟angular很相似的,但是比angular簡單的很多具體可參考官方文件 https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/page.html?t

程式-----1-app.json剖析

                                            app.json剖析1.pages存放頁面路徑,型別為Array是唯一一個在app.json必須存在的配置項小程式中新增/減少頁面,都需要對pages陣列進行修改。檔名不需要寫檔案字尾,因

程式體驗-helloworld篇

首先,我們需要擁有一個帳號,如果你能看到該文件,我們應當已經邀請併為你建立好一個帳號。注意不可直接使用服務號或訂閱號的 AppID。 利用提供的帳號,登入 https://mp.weixin.qq.com ,就可以在網站的「設定」-「開發者設定」中,檢視到微信小程式的 AppID 了。 注

程式體驗筆記(圖書館爬蟲)

之前用PHP寫了一個爬蟲,結果圖書館不可以外網訪問,就暫停了,最近加深了一下JS,,發現微信小程式用得是JS開發的前端,用得樣式也是類似於CSS,可惜的是DOM不可以用了。看了兩天API,就上手寫了。主要是用到了input元件和button元件其他的就是正則爬蟲了。下面是de