小白开发微信小程序21--网络API(asp.net core版)

文章介绍了如何在微信小程序中使用wx.request调用外部WebAPI接口,以ASP.NETCore构建的WebAPI为例,展示了创建API接口和从小程序端发起请求的步骤。通过示例代码,阐述了数据模型和控制器的实现,以及小程序页面展示接口数据的方法。
摘要由CSDN通过智能技术生成

1、什么是网络API

在一个网站里面发起https请求是很常见的,但是,由于微信小程序是腾讯内部的产品,不能直接打开一个外部的链接,例如,您在微信小程序里面无法直接打开网站,但是,在做小程序开发的时候,如果想调用这个网站的一个接口,这时,如何使用?因为,微信小程序里面不能直接使用浏览器,所以,只有使用腾讯给我们封装好的API wx.request(object)。

wx.request其实是腾讯封装好的一个request请求的函数,类似php语言里面的函数,在php程序里面的函数是由开发php程序的公司用c语言封装好的一个一个的函数,我们做php开发的,只需要拿过来这些函数使用即可,不需要关心函数底层代码,同样,wx.request是腾讯给我们封装好的“函数”直接拿过来用就行了,只要理解了这个“函数”里面的参数的使用即可

2、wx.request

功能描述:发起 HTTPS 网络请求。

3、搭建asp.net core版的webapi接口程序

  1. 创建asp.net core web api项目

book.cs代码:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace webapitest.Models
{
    /// <summary>
    /// 图书实体
    /// </summary>
    public class Book
    {
        /// <summary>
        /// 序号
        /// </summary>
        public int id { get; set; }
        /// <summary>
        /// 标题
        /// </summary>
        public string title { get; set; }
        /// <summary>
        /// 作者
        /// </summary>
        public string author { get; set; }
        /// <summary>
        /// 图片地址
        /// </summary>
        public string image { get; set; }
        /// <summary>
        /// 出版商
        /// </summary>
        public string publisher { get; set; }
    }
}

WebXinController.cs代码

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using webapitest.Models;

namespace webapitest.Controllers
{
    /// <summary>
    /// 微信小程序控制器
    /// </summary>
    [Route("api/[controller]")]
    [ApiController]
    public class WebXinController : ControllerBase
    {
        List<Book> booklist = null;

        private static List<Book> getBookList()
        {
            List<Book> books = new List<Book>();

            Book b1 = new Book();
            b1.id = 9032;
            b1.title = "java开发指南";
            b1.author = "杨强标";
            b1.publisher = "吉林出版公司";
            b1.image = "img01.jpg";
            books.Add(b1);

            Book b2 = new Book();
            b2.id = 7232;
            b2.title = "web项目指导";
            b2.author = "毛二平";
            b2.publisher = "山东出版公司";
            b2.image = "img02.jpg";
            books.Add(b2);

            Book b3 = new Book();
            b3.id = 6832;
            b3.title = "小程序教程";
            b3.author = "风间云";
            b3.publisher = "海南出版公司";
            b3.image = "img03.jpg";
            books.Add(b3);
            return books; 
        }

        /// <summary>
        /// 图书列表
        /// </summary>
        /// <returns></returns>
        [HttpGet("findBookList")]
        public List<Book> findBookList()
        {
            booklist = getBookList();
            return booklist; 
        }


    }
}

2、启动项目,测试接口

3、微信小程序页面访问后台api

  1. 创建页面myaspnet,准备一些图片,放在小程序项目目录的images下,文件名要与上面book的image属性对应(b3.image = "img03.jpg";)

  1. js代码

3、wxss样式

样式代码

.book {
    padding: 5px 5px 3px 3px;
}
.book-left {
    float: left;
    width: 200rpx;
    text-align: center;
}
.book-left image {
    width: 180rpx;
    height: 160rpx;
}
.book-right {
    padding-top: 0px;
    margin-left: 200rpx;
    height: 80px;
    line-height: 50rpx;
    border-bottom: 1px solid gray;
}
.book-right #title {
    font-size: 14px;
}
.book-right #author {
    font-size: 12px;
    color: gray;
}
.book-right #publisher {
    font-size: 14px;
    color: red;
    font-weight: bold;
}

4、保存编译小程序,效果如下:

  1. 在通往吹牛逼的路上,我渐渐的牛逼起来。

  1. 如果猪都会飞了,谁还买飞机?骑着猪上天不就行了。

  1. 兄弟,我这辈子最美好的时光都是在和你们喝酒吹牛B了。

  • 3
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hqwest

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值