微信小程序信息展示

概述

使用第三方在线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 })
    })
  }
})

4、配置文件说明

utils 文件夹下 config.js 里 appKey 为微信小程序俱乐部 API 中心的 appKey，这里可以使用我的 appKey 进行测试，也可以使用你们自己的。

在解析 html 时使用了开源库 wxParse。