小程序轻松放B站视频，教程+实战案例，小白也能轻松学会！

在这个数字化时代，小程序已经成为人们生活中不可或缺的一部分。而B站（哔哩哔哩）作为年轻人喜爱的视频平台，其内容丰富，深受广大用户喜爱。今天，我们就来聊聊如何在微信小程序中轻松播放B站视频，让小白也能轻松学会！

一、准备工作

在开始之前，我们需要准备以下工具：

1. 微信开发者工具：用于开发微信小程序。
2. B站视频API：用于获取B站视频信息。
3. 图片素材：用于小程序封面和图标。

二、获取B站视频API

1. 注册B站开发者账号：登录B站官网，注册开发者账号并创建应用。
2. 获取AppID和AppSecret：在应用管理页面，找到你的应用，获取AppID和AppSecret。
3. 获取API接口：在B站开发者中心，找到视频API接口，复制接口地址。

三、小程序开发

1. 创建小程序项目：打开微信开发者工具，创建一个新的小程序项目。
2. 配置AppID：在项目根目录下的app.js文件中，将AppID替换为你的AppID。
3. 引入B站视频API：在utils目录下创建一个名为bilibili.js的文件，将B站视频API接口地址写入其中。

// utils/bilibili.js
const API_URL = 'https://api.bilibili.com/x/player/web-interface?bvid=';
module.exports = API_URL;

1. 创建视频播放页面：在pages目录下创建一个名为video的文件夹，并在其中创建index.wxml、index.wxss和index.js文件。

<!-- index.wxml -->
<view class="container">
  <video src="{{videoUrl}}" controls></video>
</view>

/* index.wxss */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

// index.js
const API_URL = require('../../utils/bilibili.js');

Page({
  data: {
    videoUrl: ''
  },
  onLoad: function (options) {
    const bvid = options.bvid;
    this.getVideoUrl(bvid);
  },
  getVideoUrl: function (bvid) {
    const that = this;
    wx.request({
      url: API_URL + bvid,
      method: 'GET',
      success: function (res) {
        const data = res.data.data;
        that.setData({
          videoUrl: data.durl[0].url
        });
      }
    });
  }
});

1. 分享视频：在app.json文件中，添加分享配置。

{
  "pages": [
    "pages/video/video"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "B站视频播放",
    "navigationBarTextStyle": "black"
  },
  "shareAppMessage": {
    "title": "分享视频",
    "path": "/pages/video/video?bvid=YOUR_BVID"
  }
}

四、实战案例

1. 获取B站视频链接：在B站视频页面，复制视频链接中的bvid值。
2. 分享视频：将视频链接分享到微信好友或群聊。
3. 打开小程序：点击分享的链接，即可在小程序中观看视频。

五、总结

通过以上教程，相信你已经学会了如何在微信小程序中播放B站视频。快来试试吧，让你的小程序更加丰富有趣！