微信小程序信息展示

微信小程序信息展示 - demo例子集

demodashi 2021-12-15 原文

微信小程序信息展示

概述

使用第三方在线API模拟数据，进行微信小程序开发。不会后端开发也可以体验微信小程序。

详细

代码下载：http://www.demodashi.com/demo/10719.html

一、准备工作

1、下载安装微信 Web 开发者工具

2、本实例中使用的 appKey 为我个人账户，如需使用自己微信小程序俱乐部上的 appKey 可以进行替换

3、感兴趣的同学可以自己在微信小程序俱乐部进行注册，获取属于自己的 appKey

4、该 Demo 主要实践如何使用第三方 API 进行微信小程序的开发

二、程序实现

1、程序结构

图片.png

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 })
    })
  }
})