微信小程序直播接入
微信已经成为我们生活的一部分，正如微信的广告语，微信，是一种生活方式!不论是工作中，学习中还是生活中，我们每个人早都已经离不开微信，但是在使用微信的过程中，仍然有一部分同学不知道微信小程序直播接入碰巧的是小编正要打算写一篇微信小程序直播接入文章，来给大家解疑答惑!
入门
准备工作
想要开发微信小程序，首先必须要有一个微信公众平台小程序的帐号(目前帐号只有内测邀请唯一途径)，此帐号用于获取app id、secret id、添加开发者等管理后台操作。
然后你需要下载官方提供的微信web开发者工具，这是一个集成了编码、调试、预览、发布功能的一个IDE。
编码功能：
调试功能，集成了chrome开发者工具，可以实现样式预览、JS断点调试等：
发布、预览功能，可以在此上传你的程序，预览生成二维码，提供在手机微信上预览小程序的功能;另外，开发者工具还集成了ES6编译、代码压缩等基础代码构建功能：
开发入门
对于哪怕是只有一点点web前端经验的开发者来说，微信小程序的入门门槛简直是低到不能再低了。
一个小程序的主要文件目录简洁到如下：
├─ app.json
├─ app.wxss
├─ app.js
└── pages
├─ index
│ ├─ index.wxml
│ ├─ index.wxss
│ └─ index.js
└─ my-page
├─ my-page.json
├─ my-page.wxml
├─ my-page.wxss
└─ my-page.js
一个小程序大体上分为两大块：
应用实例app
页面pages
应用实例
小程序会读取根目录的app.json，app.js，app.wxss生成程序实例，当然样式文件不是必需的。
程序配置app.json
// app.json
{
"pages":[
"pages/index/index"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
在这个文件里可以针对以下内容作小程序的全局配置：
页面文件的路径
网络超时时间
程序级tab配置
窗口颜色
手机导航栏、小程序标题栏的背景色、字体色，下图是设置了导航栏颜色为绿色的效果：
下拉刷新行为(禁用下拉、下拉文字、图标、颜色)，下图是典型的下拉刷新效果：
逻辑脚本app.js
每一个小程序都是通过App({/*configs*/})这样一个App方法来注册的，在其具体的配置中，我们可以监听并处理程序级的生命周期函数、声明全局变量。比如，需要设置程序启动、显示时的一些操作，设置一些程序全局的数据、变量、方法，都可以在这里完成。
//app.js
App({
onLaunch: function () {
// do something
},
global: {
data: null
}
})
在app.js里声明的属*及方法，都可以在小程序的任意页面里访问到：
// page.js
//获取应用实例
var app = getApp()
Page({
doSth: function() {
console.log(app.globalData);
}
})
app.js里支持的的程序级的生命周期回调包括：
onLaunch 小程序初始化完成时触发
onShow 启动，从后台进入前台显示时触发
onHide 从前台进入后台时触发
页面
一个页面简单讲可以理解成小程序的一个完整界面单元，每一次完整的界面切换就是page之间的跳转，下图演示一个典型的页面切换、回退过程：
一个页面的组成部分包括：
视图层
WXML(WeiXin Markup language) 用于描述页面的结构
WXSS(WeiXin Style Sheet) 用于描述页面的样式，非必需
逻辑层
JS 控制页面行为及数据变化
JSON 页面级配置，非必需
视图层与逻辑层的关系：数据驱动 + 事件绑定
视图层与逻辑层统一通过数据和事件相互联系起来，用一句话描述就是：数据驱动。
如果你有使用过React、Vue(或其他MVVM框架)等，对于“数据驱动”肯定一点都不陌生了，没错，小程序毫无疑问吸收了这一开发理念。
来看看一个简单页面的代码：
{{userInfo.nickName}}
//index.js
Page({
data: {
userInfo: {
nickName: 'test',
avatarUrl: 'a/test.png'
}
},
//事件处理函数
bindViewTap: function() {
console.log('触发了tap');
}
})
这段代码实现的是一个简单的页面效果：
可以看到出：
每一个“页面”，都是通过JS逻辑层的Page({/*configs*/})方法来注册的;
WXML统一通过{{data}}花括号的方式来引用逻辑层的数据;
视图层通过bind+event key来和逻辑层的事件回调实现绑定;
当逻辑层需要控制视图层变化时，统一通过关键函数setData来驱动数据变化，间接改变视图，如：
//index.js
Page({
data: {
userInfo: {
nickName: 'test',
avatarUrl: 'a/test.png'
}
},
//事件处理函数
bindViewTap: function() {
console.log('触发了tap');
this.setData({
userInfo: {
nickName: 'test',
avatarUrl: 'a/change.png'
}
});
}
})
上述代码中，setData调用后，页面图片就变化了。setData与React中的setState真的是有相当的相似之处。
其实，微信小程序是完全不支持DOM操作的，千万不要想着手动去控制DOM结构。简单的说，HTML5开发中BOM的那一整套API都没法使用，包括window、document ......
WXML在近似于HTML外，吸收了很多其他模板标记语言的优点，例如支持:
循环列表：
{{index}}: {{item.message}}
事件绑定(交互回调)
前面已经提到过事件绑定，前端人对于事件还是非常熟悉的，事件是视图层到逻辑层的通讯方式。
小程序支持的事件类型包括有：
touchstart 手指触摸
touchmove 手指触摸后移动
touchcancel 手指触摸动作被打断，如来电提醒，弹窗
touchend 手指触摸动作结束
tap 手指触摸后离开
longtap 手指触摸后，超过350ms再离开
和web事件类似，小程序也支持冒泡事件和非冒泡事件，在绑定过程中通过bind(冒泡)和catch(非冒泡)区分：
outer view
middle view
inner view
inner-inner view
//page.js
Page({
data: {
},
handleTap1: function () {
console.log(1);
},
handleTap2: function () {
console.log(2);
},
handleTap3: function () {
console.log(3);
},
handleTap4: function () {
console.log(4);
}
})
上述程序中，middle view是关键分割点，点击inner-inner view，将会依次显示4，3，2，因为middle view中使用了catch来绑定事件并阻止事件往上层冒泡，middle view及其子组件的tap冒泡事件都会在它这一层被截断。
以上文章的全部内容是经过小编Tim精心整理编辑出来的关于微信小程序直播接入的内容，希望可以给广大微信用户带来最大的帮助，如果您还想了解更多的关于公众号,小程序,微信群,朋友圈,微信运动,微信红包,微信好友,微信聊天和微信支付及微信开放平台等的使用帮助和图文素材,以及微信相关产品和功能的使用帮助和图文素材，敬请关注微微风。微微风致力于解决每一位微信产品使用者和运营者的遇到的问题!
推荐阅读：
微信小程序支持直播
微信小程序直播功能是什么?
微信小程序直播开发