微信小程序是什么?如何快速搭建一个微信小程序?(代码片段)

哪吒 哪吒     2022-12-11     465

关键词:


目录

一、微信小程序是什么

微信小程序是一种不用下载就能使用的应用,也是一项创新,经过将近两年的发展,已经构造了新的微信小程序开发环境和开发者生态。微信小程序也是这么多年来中国IT行业里一个真正能够影响到普通程序员的创新成果,已经有超过150万的开发者加入到了微信小程序的开发,与我们一起共同发力推动微信小程序的发展,微信小程序应用数量超过了一百万,覆盖200多个细分的行业,日活用户达到两个亿,微信小程序还在许多城市实现了支持地铁、公交服务。微信小程序发展带来更多的就业机会,2017年小程序带动就业104万人,社会效应不断提升。

二、安全管理

微信小程序在产品功能设计上给用户更多控制力。在微信小程序的设置页,为用户提供了数据权限开关,一旦用户授权之后又关闭,微信小程序再次使用该用户数据时需要重新获得授权,为用户提供更方便的数据控制权。用户在微信小程序的资料页还可以看到隐私数据保护的提示以及投诉入口。
微信小程序在收集、获取用户数据上,微信小程序坚持“必要+合理”原则。必要是指只有在微信小程序的具体业务中,确实有场景需要获取用户数据的情况下,开发者才能去获取用户的同意授权;合理是指开发者获取数据的范围不应该超出具体场景所需要的数据范围。例如一个提供外卖服务的微信小程序,可能需要获得电话、地址等数据,但没有必要获取性别、年龄等数据,否则平台会认为微信小程序收集用户数据的行为违反了“必要并且合理”的原则,会对这类微信小程序进行处理。

三、微信小程序的功能

微信小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无需安装卸载。对于开发者而言,微信小程序开发门槛相对较低,难度不及APP,能够满足简单的基础应用,适合生活服务类线下商铺以及非刚需低频应用的转换。微信小程序能够实现消息通知、线下扫码、公众号关联等七大功能。其中,通过公众号关联,用户可以实现公众号与微信小程序之间相互跳转。由于微信小程序不存在入口。

四、快速开发一个微信小程序APP

今天以Android版本为例快速实现一个小程序开发APP,一起深入理解整个小程序开发开发流程。我们最终实现效果如下:

按照惯例,为了快速实现,我们继续基于即构实时通话SDK进行开发。在正式开发之前,我们先理一下小程序开发开发流程。

  1. 初始化即构SDK
  2. 房主创建房间ID,并进入房间。 观众根据房间ID进入房间
  3. 房主推实时视频流,观众拉实时视频流

1、集成即构实时音视频SDK

SDK集成方式请直接参考官方文档https://doc-zh.zego.im/article/195, 这里不过多描述。

2、初始化SDK引擎

这里我们把所有调用即构SDKAPI封装到Zego类中,并使用单例模式调用。其中初始化SDK引擎工作放入到构造函数中:

private Zego(Application app) 
    ZegoEngineProfile profile = new ZegoEngineProfile();
    profile.appID = KeyCenter.APPID;
    profile.scenario = ZegoScenario.GENERAL;  // 通用场景接入
    profile.application = app;
    mEngine = ZegoExpressEngine.createEngine(profile, null);

3、创建房间与登录房间

登录画面如下:

4、房主创建房间

(1)验证房间ID的有效性

在创建房间之前,需要房主提供房间号,当然了,这一步可以由后台自动生成。作为一个Demo,我们暂时让房主自己设置。为了避免房间号冲突,我们需要先验证当前房间号是否已存在,如果有个人服务器自然很轻松判断。如果没有个人服务器,可以调用即构提供的服务器端API接口查询当前房间的人数。

简单来说,使用服务器端API就是访问一个http址,返回对应的JSON参数。

(2)使用ID创建房间并登录

我们将登录房间函数封装到Zego类里面。登录房间代码如下。

注意,无须显式创建房间,如果指定的房间ID不存在,则会自动创建。

public boolean loginRoom(String userId, String userName, String roomId, String token) 
    ZegoUser user = new ZegoUser(userId, userName);
    ZegoRoomConfig config = new ZegoRoomConfig();
    config.token = token; // 请求开发者服务端获取
    config.isUserStatusNotify = true;
    mEngine.loginRoom(roomId, user, config);
    return true;

注意到此函数需要传入token参数。token参数是采用对称算法生成。其大致原理如下:

  1. 生成一个随机数,并将有效时长等其他相关参数,按照固定格式排列得到未加密版的token
  2. 使用密钥(在即构官方控制台中获取,每个APPID对应一个密钥)并使用对称加密算法加密,得到加密版的token,这个token是给客户端登录时使用的。

具体的代码实现操作请参考文末提供的源码,这里不再过多描述。

需要注意的是,为了安全考虑,token的生成操作最好放到个人服务器中,以免泄露密钥。

(3)观众登录房间

观众登录房间的方式与2.1.2中描述的一致,实现代码也一致,即房主与观众可以复用同一套登录函数。

5、推流与拉流

(1)房主推流

房主进入房间后,需要做如下事情:

  1. 申请摄像头、语音的手机权限。
  2. 开启摄像头,本地预览画面。
  3. 推流。将本地实时画面推向即构服务器,由即构服务器做直播流数据分发。

申请摄像头等权限这里不描述,不清楚的可以直接查看文末源码或相关文档。

(2)开启摄像头并预览

实时画面预览效果如下:

如果从零开始做个摄像头实时画面预览需要大量代码量,即构SDK早已将这行工作封装好,我们只需提供一个已经在ContentView中布局好的TextureView即可。示例代码如下:

ZegoCanvas canvas = new ZegoCanvas(textureView);
canvas.viewMode = ASPECT_FILL;
mEngine.startPreview(canvas);

(3)推流与停止推流

推流更简单,直接调用即构SDK一行代码:

   mEngine.startPublishingStream(streamId);

指定视频流的唯一ID,传给startPublishingStream函数即可。停止推流直接调用stopPublishingStream()函数:

mEngine.stopPublishingStream();

6、拉流预览

与本地预览实时画面一样,即构SDK将拉取远程视频流也封装到了极致,只需一行代码即可。我们在调用的时候仅需指定TextureView与对应的流ID

ZegoCanvas canvas = new ZegoCanvas(textureView);
canvas.viewMode = ASPECT_FILL;
mEngine.startPlayingStream(streamId, canvas);

7、播放实时画面统一封装

根据拉流与推流的介绍,我们知道,其实播放实时画面得时候(房主和观众都一样)最多仅需TextureView与对应的流ID两个参数,因此我们把这两个参数封装到PreviewItem中:

public class PreviewItem 
    public TextureView tv;
    public String streamId;

    public PreviewItem(TextureView tv, String streamId) 
        this.tv = tv;
        this.streamId = streamId;
    

然后封装playPreview函数, 不管是房主还是观众,都可以统一调用这个函数:

public void playPreview(PreviewItem pi, boolean isMyself) 
        ZegoCanvas canvas = new ZegoCanvas(pi.tv);
        canvas.viewMode = ASPECT_FILL;
        //不管有没有推流,先停止推流
        mEngine.stopPublishingStream();
        if (isMyself) //本地预览
            mEngine.startPublishingStream(pi.streamId);
            mEngine.startPreview(canvas);
         else //拉取视频流
            //拉取远程视频流
            mEngine.startPlayingStream(pi.streamId, canvas);
        
    

如果是房主,则在预览画面的同时,执行推流任务。如果是观众,直接拉流即可。

8、其他工作

由于本文没有采用个人后台服务器做一些权限控制,因此会存在安全风险。如果是线上APP,请务必记得将敏感操作放到自己的后台服务器中执行。

五、观众如何得知房主的视频流ID ?

在本文中,对于每个用户,如果需要推流,则将其推流的ID设置为其serID强烈建议线上产品不要这么做,最好是由个人服务器生成随机字符串。因此如果我们知道房主的userID即可拉取其视频流。

1、如何获取房主ID?直播间的商品信息?直播间的名称信息?

同样的问题,如果有个人服务器,直接访问服务器查询相关数据库即可获取。但没有个人服务器怎么办?这里我们通过房主监听每个用户登录房间回调函数+房间内实时消息来实现。具体可描述如下:

房主监听登录房间回调函数,如果有用户登录房间,则发送商品信息、房主userID、房间名称等数据消息。

发送消息可以调用sendCustomCommand函数实现:

public void sendMsg(String roomId, ArrayList<ZegoUser> userList, Msg msg) 
    String msgPack = msg.toString();
    // 发送自定义信令,`toUserList` 中指定的用户才可以通过 
	// onIMSendCustomCommandResult 收到此信令.
    // 若 `toUserList` 参数传 `null` 则 SDK 将发送该信令给房间内所有用户
    mEngine.sendCustomCommand(roomId, msgPack, userList, new IZegoIMSendCustomCommandCallback() 
        @Override
        public void onIMSendCustomCommandResult(int errorCode) 
    );

2、源码分享

本文的小程序Demo使用的是即构的实时音视频SDK,感兴趣的开发者可访问即构文档中心,动手尝试集成。

如果想轻量开发电商直播Demo,微信小程序端也是一个不错的选择。用完即走且自带流量便于推广。即构提供了微信小程序版本的RTC SDK,包含了音视频直播、主播美颜、房间消息等功能,大家可参考该组件实现自己的需求。

如需下载小程序示例源码可点击https://doc-zh.zego.im/article/3927进行下载!

一个小时快速搭建微信小程序

...)。本以为没有AppID这个月就与小程序无缘了,庆幸的是微信这两天发布了正式版开发者工具,无需内测邀请也可以尝鲜了。因此也就有了我与「小程序」的初体验,而我的感受只有一个字——爽!选择哪个「小程序」Demo?在知... 查看详情

如何快速开发一个自己的微信小程序

....为什么要学小程序开发?  对于前端开发而言,微信小程序因为其简单快速、开发成本低、用户流量巨大等特点,也就成了前端开发工程师必会的一个技能。 2.先看看小程序效果(1)欢迎页  (2)... 查看详情

搭建mock服务器(微信小程序)(代码片段)

搭建mock服务器(微信小程序)如何在微信小程序使用mock.js实在是个问题,为了完全模拟访问路由和数据,选择在搭建本地mock服务器是一个不错的选择。以下示例了一个mock服务器的搭建过程以及以学生为对象进行增删改查分页的示... 查看详情

两天快速开发一个自己的微信小程序

...1.为什么要学小程序开发?  对于前端开发而言,微信小程序因为其简单快速、开发成本低、用户流量巨大等特点,也就成了前端开发工程师必会的一个技能。 2.先放上我做的小程序可以在微信小程序搜索“悬笔e绝”... 查看详情

如何快速开发个微信小程序

...这四个问题,那一切就OK了,下面我就讲一下,我在学习微信小程序开发,如何用这四步法快速上手开发的学习一门新技术先看下它的开发文档小程序介绍然后呢就是开始一些准备的步骤,微信公众平台提供我们开发管理的功能... 查看详情

搭建微信小程序商城需要哪些步骤?

如今依托微信平台的巨大流量,微信小程序越来越火爆,因此也吸引了很多商家在微信小程序上开通自己的商城店铺。那么小程序商城到底该如何开通呢?搭建小程序商城需要哪些步骤呢?下面跟着我一起来看看吧!第一步,要... 查看详情

微信小程序需要后台吗?怎么搭建后台

微信小程序需要后台吗?怎么搭建后台小程序前端会,后端不知道怎么搭建微信小程序需要后台,后台就像是网站那样子的管理后台,可以上传产品信息,图片等功能。一般后端程序员把后台弄好,前端程序员就是负责整个小程... 查看详情

用这种眼光看微信小程序

先抛出结论:微信小程序就是一个类似RN的轮子,可以快速开发,有一定的适用场景,但是也有其局限性。(结论是基于微信小程序的示例代码做的解读,可能存在谬误本文针对微信小程序的示例代码进行分析,告诉大家:微信... 查看详情

快速开发一个自己的微信小程序

...1.为什么要学小程序开发?  对于前端开发而言,微信小程序因为其简单快速、开发成本低、用户流量巨大等特点,也就成了前端开发工程师必会的一个技能。 2.先看看小程序效果(1)欢迎页  (2)首页:轮播... 查看详情

微信小程序|搭建一个博客小程序

文章目录一、文章前言二、创建小程序三、功能开发(1)首页(2)领域页(3)博客详情页(4)个人中心页一、文章前言此文主要通过小程序搭建一个博客系统,实现博客的一些基础功能,也可以当做备忘录或者空间动态使用... 查看详情

微信小程序资源汇总整理

开源项目wechatApp-demo -微信小程序DEMOweapp-ide-crack -微信小应用资源破解API -API文档weapp-quick -微信小应用示例代码weapp-gold -掘金主页微信小应用示例文档简易教程开发者工具文档API文档视图组件文档常见问题教程微信小程序开发... 查看详情

微信小程序链接快速生成方法(代码片段)

文章目录前言一、如何生成微信小程序链接?二、生成微信小程序链接步骤1.获取URLScheme2.获取URLLink3.获取ShortLink4.短信打开小程序5.NFC标签打开小程序总结前言微信官方更新了链接跳转微信小程序的功能,在点击链接后即... 查看详情

快速了解微信小程序的使用,一个根据小程序的框架开发的todosapp

微信官方已经开放微信小程序的官方文档和开发者工具。前两天都是在看相关的新闻来了解小程序该如何开发,这两天官方的文档出来之后,赶紧翻看了几眼,重点了解了一下文档中框架与组件这两个部分,然后根据简易教程,... 查看详情

如何提交发布微信小程序

微信小程序是一种不需要下载安装即可使用的应用,它实现了应用「触手可及」的梦想,用户扫一扫或搜一下即可打开应用。那么,开发者该怎么进行申请呢?01微信小程序介绍:小程序是一种新的开放功能,开发者可以快速地... 查看详情

微信小程序开发环境搭建

微信小程序可谓是今天最火的一个名词了,一经出现真是轰炸了整个开发人员,当然很多App开发人员有了一个担心,微信小程序的到来会不会给移动端App带来一个寒冬,身为一个Android开发者我是不相信的,即使有,那也是很遥... 查看详情

(转)快速了解微信小程序的使用,一个根据小程序的框架开发的todosapp

微信官方已经开放微信小程序的官方文档和开发者工具。前两天都是在看相关的新闻来了解小程序该如何开发,这两天官方的文档出来之后,赶紧翻看了几眼,重点了解了一下文档中框架与组件这两个部分,然后根据简易教程,... 查看详情

如何让精准用户知道我们的小程序?微信小程序带给门店商家什么?

在4月的腾讯“互联网+”数字峰会上,微信透露了一个数据:能够切实解决用户痛点的小程序七日留存接近30%。而这类微信小程序基本都已经让用户完成了品牌认知,用户会从微信任务栏或者历史列表中主动找到它们,然后重复... 查看详情

微信小程序-枯木学习笔记1-环境搭建(代码片段)

...户使用。这就免了安装之苦了。目前比较流行的是:微信小程序、支付宝小程序等等下面我们就做自己的微信小程 查看详情