微信小程序信息展示

ゝ一纸荒年。 2022-05-31 10:16 315阅读 0赞

# 概述 #

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

# 详细 #

#### 代码下载：[http://www.demodashi.com/demo/10719.html][http_www.demodashi.com_demo_10719.html] ####

#### 一、准备工作 ####

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

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

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

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

#### 二、程序实现 ####

1、程序结构

![图片.png][.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。

#### 三、运行效果 ####

1、将项目导入到微信 web 开发者工具，点击编译即可运行

2、运行截图

![1500990690476038683.png][]

![1500990690376055820.png][]

![1500990690571067127.png][]

#### 四、其他补充 ####

1、[微信小程序俱乐部地址][Link 1]

2、进入俱乐部后，点击 API 中心，可以根据自己需要进行创建，在附件中会将数据进行导出。可以将data里的数据导入到自己微信俱乐部 API 中。

#### 注：本文著作权归作者，由demo大师（[http://www.demodashi.com][http_www.demodashi.com]）宣传，拒绝转载，转载需要作者授权 ####

[http_www.demodashi.com_demo_10719.html]: http://www.demodashi.com/demo/10719.html
[.png]: /images/20220531/fe84a1f2b8e2416ca64757895e385467.png
[1500990690476038683.png]: /images/20220531/6ef18fdbe09c40989ad9b69ab16fc8e1.png
[1500990690376055820.png]: /images/20220531/22eab4d2489f43f8a5f98c5a4d298574.png
[1500990690571067127.png]: /images/20220531/14de8c3d85324334bf3e1a51c7c95dc4.png
[Link 1]: http://www.wxappclub.com/
[http_www.demodashi.com]: http://www.demodashi.com/