微信小程式資訊展示

概述

使用第三方線上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 中。

微信小程式資訊展示 - demo例子集