微信小程序信息展示

概述

使用第三方在線API模擬數據，進行微信小程序開發。不會后端開發也可以體驗微信小程序。

詳細

代碼下載：http://www.demodashi.com/demo/10719.html

 

一、准備工作

1、下載安裝微信 Web 開發者工具

2、本實例中使用的 appKey 為我個人賬戶，如需使用自己微信小程序俱樂部上的 appKey 可以進行替換

3、感興趣的同學可以自己在微信小程序俱樂部進行注冊，獲取屬於自己的 appKey

4、該 Demo 主要實踐如何使用第三方 API 進行微信小程序的開發

二、程序實現

1、程序結構

2、實現思路

利用微信小程序俱樂部 API 提供的接口實現信息請求，並返回數據。

 

微信小程序俱樂部 API 主要配置:

module.exports = {
    appKey: "9emcn7gs9wx8c5i200yzdqlad3tb1d2m",
    clubApi: {
        put: 'https://api.wxappclub.com/put',
        get: 'https://api.wxappclub.com/get',
        del: 'https://api.wxappclub.com/del',
        match: 'https://api.wxappclub.com/match',
        list: 'https://api.wxappclub.com/list',
        wxUser: 'https://api.wxappclub.com/wxUser'
    }
}

 

 

 

以首頁進行說明：

加載頁面時，請求微信小程序俱樂部 API 獲取輪播的圖片，和文章，進行展示，其他幾個界面類似

Page({
  data: {
    imgUrls: [],
    indicatorDots: true,
    autoplay: true,
    interval: 2000,
    duration: 100
  },
  onLoad: function (options) {
    this.getShowImg()
    this.getLastNews()
  },
  //請求展示的圖片
  getShowImg: function (options) {
    let that = this
    options = {
      url: config.clubApi.get,
      data: {
        appkey: config.appKey,
        key: "show",
        type: "picture"
      }
    }
    util.request(options, function (res) {
      let showPictures = res.data.result.value
      
      that.setData({ showPictures: showPictures })
    })
  },
  //請求最新新聞
  getLastNews: function (options) {
    let that = this
    options = {
      url: config.clubApi.get,
      data: {
        appkey: config.appKey,
        key: "lastnews",
        type: "article"
      }
    }
    util.request(options, function (res) {
      let lastnews = res.data.result.value
      that.setData({ lastnews: lastnews })
    })
  }
})

 

4、配置文件說明

 

utils 文件夾下 config.js 里 appKey 為 微信小程序俱樂部 API 中心的 appKey，這里可以使用我的 appKey 進行測試，也可以使用你們自己的。

 

在解析 html 時使用了開源庫 wxParse。

三、運行效果

1、將項目導入到微信 web 開發者工具，點擊編譯即可運行

2、運行截圖

 

四、其他補充

1、微信小程序俱樂部地址

2、進入俱樂部后，點擊 API 中心，可以根據自己需要進行創建，在附件中會將數據進行導出。可以將data里的數據導入到自己微信俱樂部 API 中。

代碼下載：http://www.demodashi.com/demo/10719.html

注：本文著作權歸作者，由demo大師發表，拒絕轉載，轉載需要作者授權