小程序对接视频号接口整理_使用整理

Posted 2023-04-02 天马3798

一、小程序对接视频号组件

微信文档》组件》媒体组件

1.channel-live  视频号直播组件 （注版本还在更新中，暂时不推荐使用）

小程序内嵌视频号直播组件，展示视频号直播状态和封面，并无弹窗跳转至视频号。注意：使用该组件打开的视频号视频需要与小程序的主体一致。

只有手机端可以使用，pc端目前不支持。

官网地址：channel-live | 微信开放文档

使用案例：

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) 
        var _this = this;
        wx.getChannelsLiveInfo(
            finderUserName: 'sphM3vWYCKM6VRc',
            success: res => 
                _this.setData(
                    liveList: res,
                    feedId: res.feedId
                );
            ,
            fail: res => 
                console.error(res);
            
        );
    ,

<channel-live finder-user-name="sphM3vWYCKM6VRc" feed-id="feedId">
	</channel-live>

2.channel-video 视频号视频组件

小程序内嵌视频号视频组件，支持在小程序中播放视频号视频，并无弹窗跳转至视频号。

注意：

使用该组件打开的视频号视频需要与小程序的主体一致。

暂不支持纯图片视频号内容。

官网地址：channel-video | 微信开放文档

使用案例：

<channel-video class="channelvideo" autoplay="true" loop="true" 
finder-user-name="sphM3vWYCKM6VRc" 
feed-id="export/UzFfAgtgekIEAQAAAAAAddkJ_jfK7AAAAAstQy6ubaLX4KHWvLEZgBPEvIIAFDQKfrGBzNPgMJpIh5iicDNNo-PLxFUJeSii"></channel-video>

二、小程序对接视频号接口

1.跳转视频号主页 

wx.openChannelsUserProfile

官方文档：wx.openChannelsUserProfile(Object object) | 微信开放文档

        wx.openChannelsUserProfile(
            finderUserName: 'sphM3vWYCKM6VRc',
            success: res => 
                wx.showToast(
                    title: '跳转成功',
                )
            ,
            fail: res => 
                wx.showToast(
                    title: '跳转失败',
                )
            
        );

2.跳转视频号视频

wx.openChannelsActivity

官网文档：wx.openChannelsActivity(Object object) | 微信开放文档

        wx.openChannelsActivity(
            finderUserName: 'sphM3vWYCKM6VRc',
            feedId: 'export/UzFfAgtgekIEAQAAAAAAddkJ_jfK7AAAAAstQy6ubaLX4KHWvLEZgBPEvIIAFDQKfrGBzNPgMJpIh5iicDNNo-PLxFUJeSii',
        );

3.跳转视频号活动

wx.openChannelsEvent

官网文档：wx.openChannelsEvent(Object object) | 微信开放文档

    wx.openChannelsEvent(
            finderUserName: 'sphM3vWYCKM6VRc',
            eventId: 'event/UzFfAgtgekIEAQAAAAAAh1IJ-9Ai3QAAAAstQy6ubaLX4KHWvLEZgBPEkqMQaUkHVreBzNPgMJp4VvfElleQxT8mfoMG8Z7e'
        );

4.视频号直播

获取直播信息 wx.getChannelsLiveInfo

官方文档：wx.getChannelsLiveInfo(Object object) | 微信开放文档

获取预告信息 wx.getChannelsLiveNoticeInfo

官网文档：wx.getChannelsLiveNoticeInfo(Object object) | 微信开放文档

预约直播 wx.reserveChannelsLive

官网地址：wx.reserveChannelsLive(Object object) | 微信开放文档

打开直播 wx.openChannelsLive

官网地址：wx.openChannelsLive(Object object) | 微信开放文档

更多：

微信小程序图片验证组件封装微信小程序中使用字体库_小程序使用自定义字体库小程序消息推送配置 Token校验失败，请检查确认

微信小程序学习资料整理

基础篇

官网：

https://mp.weixin.qq.com/cgi-bin/wx

微信小程序：

小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

微信公众号和小程序的主要区别？

1、定位不同（公众号服务于营销与信息传递，小程序面向产品与服务）

2、实现技术区别 （公众号基于H5（html5 vue angular react ionic），

小程序必须用小程序的语法开发）

3、用户体验 （小程序的用户体验要比 html5好一些，更接近原生app）

4、调用原生的能力 （微信公众号可以借助jssdk调用手机的摄像头拍照 ，调用扫描二

维码等 能力有限。 小程序调用原生的能力非常强大，能实现几乎app能实现的所有功

能） （调用原生的功能 *可以不开发app ）

5、微信app上面的入口不一样

微信小程序的应用场景：

互联网+ 物联网+ 人工智能+

餐厅点餐+小程序

      基于LBS小程序直接搜索附近的餐厅，进店用进行扫码点餐、支付。

无人点餐：

公交+小程序
　　
      公交车站放一个小程序二维码，扫一扫就知道公交什么时候来。

买电影票+小程序

　　   进入小程序直接搜附近电影院下单搞定。


加油站缴费+小程序
　　
      加油下车排队缴费太麻烦，扫小程序不用下车就能解决。

火车上叫餐+小程序
　　
      不用去固定车厢点餐，扫座椅后背的小程序二维码下单，乘务员给你送来。

旅行+小程序
　　
      旅行酒店预订、周边攻略、目的地、游记等都可以在小程序里轻松搞定。

快递+小程序
　　
      一键打开快递小程序，查看自己的订单，查看快递送达的时间，查看宝贝现在的物流情况。

医疗+小程序
　　    
      用小程序，提前挂号、网上排队，就医后扫码支付，直接拿药

景区+小程序
　　
      扫描景点门票小程序的二维码，即可查看景区详情

零售+小程序
　　
      想吃个水果或吃点零食，直接搜索附近小程序下单，送货上门。

小程序开发文档、开发工具、开发指南、体验demo

开发文档

https://developers.weixin.qq.com/miniprogram/dev/

开发工具

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

体验demo

https://developers.weixin.qq.com/miniprogram/dev/demo.html

 微信开放社区

https://developers.weixin.qq.com/community/

微信小程序的目录结构

.json 后缀的 JSON 配置文件
.wxml 后缀的 WXML 模板文件
.wxss 后缀的 WXSS 样式文件
.js 后缀的 JS 脚本逻辑文件

 JSON 配置

我们可以看到在项目的根目录有一个 app.json 和 project.config.json，此外在 pages/logs 目录下还有一个 logs.json，我们依次来说明一下它们的用途。

小程序配置 app.json

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。QuickStart 项目里边的 app.json 配置内容如下：

{
  "pages": ["pages/index/index", "pages/logs/logs"],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  }
}

我们简单说一下这个配置各个项的含义:

1. pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。（写好页面路径保存，可以直接生成文件）
2. window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。

其他配置项细节可以参考文档 小程序的配置 app.json 。

工具配置 project.config.json

在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

其他配置项细节可以参考文档 开发者工具的配置 。

页面配置 page.json

让开发者可以独立定义每个页面的一些属性，例如顶部颜色、是否允许下拉刷新等等。

其他配置项细节可以参考文档 页面配置 。

WXML 模板

 WXML 充当的就是类似 HTML 的角色。

更详细的文档可以参考 WXML

WXSS 样式

WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。

1. WXSS在底层支持新的尺寸单位 rpx 。

2. 可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。

3.  WXSS 仅支持部分 CSS 选择器

更详细的文档可以参考 WXSS 。

JS 交互逻辑

通过编写 JS 脚本文件来处理用户的操作。

响应用户的操作就是这么简单，更详细的事件可以参考文档 WXML - 事件 。

 

微信小程序事件、方法、事件对象、方法传值、获取data数据、修改data数据、冒泡非冒泡事件

<!--pages/news/news.wxml-->
<view>
{{msg}}
</view>

<button size=\'mini\' bindtap="run">
 执行run方法，注意触发方法不需要写()
</button>

<button size=\'mini\' bindtap="getMsg">
 获取msg中的值
</button>

<button size=\'mini\' bindtap="setMsg">
 改变msg中的值
</button>

　　

// pages/news/news.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    msg: \'小程序中的msg\'
  },
 /**
   * 自定义方法
   */
  run() {
    console.log(\'执行小程序run方法！\')
  },
  /**
   * 获取data中的值
   */
  getMsg() {
    // 获取data中的数据
    const msg = this.data.msg
    console.log(msg)
  },
  /**
 * 设置data中的值
 */
  setMsg() {
    // 设置data中的数据
    this.setData({
      msg:\'改变msg中的值\'
    })
    console.log(this.data.msg)
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 执行自定义方法
    this.getMsg()
  }
})