學習了大神分享的微信小程式開發教程，自己也過了一遍，也在此下筆記記錄，留下自己的學習成果。

l  首先搭建好小程式的佈局。

解析：

1、Images資料夾存放圖片。

2、Detail資料夾是系統文章的詳細頁面。

3、Lists資料夾是系統文章列表的頁面。

4、其他的是標準的模板內容。

l  App.json檔案中新增載入頁面的配置

{

  "pages":[

    "pages/lists/lists",

    "pages/detail/detail",

    "pages/index/index",

    "pages/logs/logs"

  ],

l  首先，先新增文章列表lists的介面。

l  Lists.wxml程式碼如下：

<!--index.wxml-->

<viewclass="warp">

 

  <templatename="items">

    <navigatorurl='../../pages/detail/detail?id={{id}}'hover-class='navigator-hover'>

     <viewclass='imgs'><imagesrc='{{img}}'class='in-img'background-size="cover"model="scaleToFill"></image></view>

     <viewclass='infos'>

        <viewclass='title'>{{title}}</view>

        <viewclass='date'>{{cTime}}</view>

     </view>

    </navigator>

  </template>

 

  <blockwx:for="{{newList}}"wx:key="newList"class="list">

    <templateis="items"data="{{...item}}"/>

  </block>

 

</view>
 

l  解析：

1、<template>下的內容是模板，模板設定後使用<templateis="items">呼叫，引用的是<template>下設定下的內容。

2、<navigator>標籤設定跳轉的url。

3、使用wx:for要在<block>下使用，還要必須帶wx:key，不會影響執行，但是後臺會列印提醒。

3、{{cTime}}、{{title}}、{{id}}、{{img}}、{{newList}}等標籤，動態獲取來自lists.js定義的資料。

l  lists.js程式碼如下：

Page({

  data: {

    newList:[

      { id: 1, title: "aaaaaaaa", img: "../../images/1.png", cTime:"2018-01-2316:00"},

      { id: 2, title: "bbbbbbbb", img: "../../images/2.png", cTime: "2018-01-2316:00" },

      { id: 3, title: "cccccccc", img: "../../images/3.png", cTime: "2018-01-2316:00" },

      { id: 4, title: "ddddddddd", img: "../../images/4.png", cTime: "2018-01-2316:00" },

    ]

  },

 

  onLoad: function (options) {

 

    var that = this//首先定義that值

 

    wx.request({

          url: 'http://localhost:8080/index.php?s=/addon/Cms/Cms/getList',          data: {},

          header: {

            'content-type': 'application/json'// 預設值

          },

          success: function (res) {

            console.log(res.data)

              that.setData({

                newList: res.data

              })

          }

        }

    )

  },

})
 

l  解析：

1、 Data{}下面定義的是資料來源，newList:[]下面定義的是陣列。

2、  onLoad: function(options) {}是頁面載入時觸發的事件，options是需要輸入的引數。

3、  wx.request是接收其他系統的程式碼塊，url定義接收的連結，接收內容要求是ajson格式。

4、  success: function (res){}呼叫成功後資料處理的方法。that.setData是設定當前newList[]陣列的資料為res.data。

l  lists.wxss程式碼如下：

.warp{

    height:100%;

    display:flex;

    flex-direction:column;

    padding:20rpx;

}

navigator { overflow:hidden;}

 

.list {margin-bottom:20rpx;height:200rpx;position:relative;}

.imgs {float:left;}

.imgsimage {display:block; width:200rpx;height:200rpx;}

 

.infos {float:left; width:480rpx; height:200rpx;padding:20rpx0020rpx;}

.title {font-size:20px;}

.date {font-size:16px;color:blueviolet; position:absolute;}

 

.loadMore {text-align:center;margin:30px;color:#aaa;font-size:16px}

注：暫不做解析。

l  lists.json無特殊要求不需編寫，自動載入app.json內容：

l  該頁面編寫完後的結果如下：

l  首先，先新增文章內容詳情detail的介面。

l  detail.wxml程式碼如下：

<viewclass='warp'>

 

  <viewclass='title'> {{info.title}}</view>

  <view  class='cTime'> {{info.cTime}}</view>

  <view  class='img'><imagesrc='{{info.img}}'class='in-img'background-size="cover"model="scaleToFill"></image></view> 

  <viewclass='content'>{{info.content}}</view>

 

</view>

具體解析與lists.xml差不多，只是佈局不一樣。

l  detail.js程式碼如下：

Page({

  data: {

    info: {

      id: 1, title: "aaaaaaaa", img: "../../images/1.png", cTime: "2018-01-2316:00", content: "每一個小程式頁面也可以使用.json檔案來對本頁面的視窗表現進行配置。頁面的配置比app.json全域性配置簡單得多，只是設定 app.json 中的 window 配置項的內容，頁面中配置項會覆蓋 app.json 的 window 中相同的配置項。" }

  },

 

  onLoad: function (options) {

 

    var that = this

 

    wx.request({

      url: 'http://localhost:8080/index.php?s=/addon/Cms/Cms/getDetail', //僅為示例，並非真實的介面地址

      data: { id: options.id},

      header: {

        'content-type': 'application/json'// 預設值

      },

      success: function (res) {

        console.log(res.data)

        that.setData({

          info: res.data

        })

      }

    }

    )

  },

})

具體解析也與lists.js差不多，需要注意的是wx.request({})下data: { id: options.id},定義了資料di下面的資料為options.id，等到that.setData({info: res.data})獲取的是url指定的ID。

l  detail.wxss程式碼如下：

.warp {

    height:100%;

    display:flex;

    flex-direction:column;

    padding:20rpx;

    font-size:16px;

}

.title {

    text-align:center;

    padding:20rpx;

    font-size:20px;

}

.cTime {

    color:#aaa;

}

.img {

    text-align:center;

    padding:20rpx;

}

.imgimage {

    width:120px;

    height:120px;

}

.content {

    text-indent:2em;

}

.close {

    text-align:center;

    margin:30px;

    font-size:20px;

    color:#aaa

}

注：暫不做解析。

l  detail.json無特殊要求不需編寫，自動載入app.json內容：

l  該頁面編寫完後的結果如下：

l  前臺頁面做完了，剩下需要搭建後臺，此教程後臺搭建是使用weicms程式碼來搭建，需要一定的PHP部署基礎，在網上下載weicms.zip，解壓後部署在wamp上，在本地安裝。

l  安裝後找出程式碼，具體位置在\wamp\www\Addons\Cms\Controller\CmsController.class.php。

在CmsController.class.php上面編寫程式碼如下：

.warp {

    height:100%;

    display:flex;

    flex-direction:column;

    padding:20rpx;

    font-size:16px;

}

.title {

    text-align:center;

    padding:20rpx;

    font-size:20px;

}

.cTime {

    color:#aaa;

}

.img {

    text-align:center;

    padding:20rpx;

}

.imgimage {

    width:120px;

    height:120px;

}

.content {

    text-indent:2em;

}

.close {

    text-align:center;

    margin:30px;

    font-size:20px;

    color:#aaa

}

編寫後使用以下url測試是否成功，

輸出的是JSON格式的資料，則為成功。

總結，小程式前段加後端具體如上，本人成功編寫成功，這次只做記錄，寫到比較簡陋，願意提供原創視訊教程和程式碼給大家使用。

連結：https://pan.baidu.com/s/1dzQfGM 密碼：bzvf