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

Posted 2023-04-21

参考技术A 无论是前端开发，还是后端开发，时间长了，你总会能总结出它的一些规律的，对于前端开发主要就两条，页面展现，逻辑处理。如果是全流程开发的话，那就是，如何创建项目，页面如何实现，数据获取和逻辑处理如何实现，如何打包上线。移动端或者前端，基本开发流程就这个四个步骤。所以在在前端方面去学习新一门开发技术，只要你解决了这四个问题，那一切就OK了，下面我就讲一下，我在学习微信小程序开发，如何用这四步法快速上手开发的

学习一门新技术先看下它的开发文档 小程序介绍

然后呢就是开始一些准备的步骤，微信公众平台提供我们开发管理的功能 微信工作平台

账号注册

小程序信息配置

请看 小程序开发步骤

小程序项目的创建

到此第一个问题我们就算完成了，接下来解决小程序界面如何搭建。

然后最重要的，微信提供自己的开发者工具，不需要用chrome什么调试， 微信开发者工具 提供wxapi的调用测试能力，这些在chrome里面是测试不了的

框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。

将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。

WXML(WeiXin Markup language) 用于描述页面的结构。

WXS(WeiXin Script) 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

WXSS(WeiXin Style Sheet) 用于描述页面的样式。

小程序的页面是由wxml 和wxss这两个文件来实现的，wxml结构如何写请参考 微信小程序组件

wxss是负责样式控制的，基本类似于css,支持flex布局，所以要想上手构建微信小程序的界面，最好要熟悉html ,css.

还有最重要的就是生命周期了

//index.js

Page(

  data:

    text: "This is page data."

  ,

  onLoad: function(options)

    // 页面创建时执行

  ,

  onShow: function()

    // 页面出现在前台时执行

  ,

  onReady: function()

    // 页面首次渲染完毕时执行

  ,

  onHide: function()

    // 页面从前台变为后台时执行

  ,

  onUnload: function()

    // 页面销毁时执行

  ,

  onPullDownRefresh: function()

    // 触发下拉刷新时执行

  ,

  onReachBottom: function()

    // 页面触底时执行

  ,

  onShareAppMessage: function ()

    // 页面被用户分享时执行

  ,

  onPageScroll: function()

    // 页面滚动时执行

  ,

  onResize: function()

    // 页面尺寸变化时执行

  ,

  onTabItemTap(item)

    // tab 点击时执行

    console.log(item.index)

    console.log(item.pagePath)

    console.log(item.text)

  ,

  // 事件响应函数

  viewTap: function()

    this.setData(

      text: 'Set some data for updating view.'

    , function()

      // this is setData callback

    )

  ,

  // 自由数据

  customData:

    hi: 'MINA'

 

)

微信提供的界面组件很多，没必要一下子全学会，会用一两个就行，其他的遇到需要的时候现查先做，这样又节约学习时间，又能够加深理解。到此第二个问题我们解决了，下面看第三个问题，数据逻辑如何处理。

数据定义

数据展现

逻辑处理是通过js文件来操作的

一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作。

<view> msg </view>

<button bindtap="clickMe">点击我</button>

点击 button 按钮的时候，我们希望把界面上 msg 显示成 "Hello World"，于是我们在 button 上声明一个属性: bindtap ，在 JS 文件里边声明了 clickMe 方法来响应这次点击操作：

Page(

  clickMe: function()

    this.setData( msg: "Hello World" )

 

)

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

此外你还可以在 JS 中调用小程序提供的丰富的 API，利用这些 API 可以很方便的调起微信提供的能力，例如获取用户信息、本地存储、微信支付等。在前边的 QuickStart 例子中，在 pages/index/index.js 就调用了 wx.getUserInfo 获取微信用户的头像和昵称，最后通过 setData 把获取到的信息显示到界面上。更多 API 可以参考文档  小程序的API  。

现在几乎每个应用都需要从后端获取数据，那么小程序如何获取呢，当然是通过网路操作了。我们封装了小程序的网络操作

const app = getApp()

const request = (url, options) =>

  return new Promise((resolve, reject) =>

    wx.request(

      url: `$app.globalData.host$url`,

      method: options.method,

      data: options.method === 'GET' ? options.data : JSON.stringify(options.data),

      header:

        'Content-Type': 'application/json; charset=UTF-8'

        // 'x-token': 'x-token'  // 看自己是否需要

      ,

      success(request)

        if (request.data.error_code === 0)

          resolve(request.data)

        else

          reject(request.data)

       

      ,

      fail(error)

        reject(error.data)

     

    )

  )



const gets = (url, options = ) =>

  return request(url, method: 'GET', data: options )



const post = (url, options) =>

  return request(url, method: 'POST', data: options )



const put = (url, options) =>

  return request(url, method: 'PUT', data: options )



// 不能声明DELETE（关键字）

const remove = (url, options) =>

  return request(url, method: 'DELETE', data: options )



module.exports =

  gets,

  post,

  put,

  remove



如何使用请看下图

数据获取

数据展现如下图

数据展现

到此，第三个问题我们就解决的了下面看第四个问题。

小程序发布文档说明

小程序发布步骤

到此四个问题都解决了。

总结：本文内容是很简单的，借用了大部分官方文档，其实本文目的不是教你学小程序开发，而是分享一下在学习一项新事物我的方法和思路，互联网技术变化是很快的，我觉得一个人的能力，不仅仅是你技术有多好，你要明白技术是用来干什么的，技术是用来解决现实生活中的问题的，一个好的程序员，不是技术能力，而是解决问题的能力，解决问题不可能只用一种技术，这就要求你的学习能力要强，针对不同的问题，使用不同的技术，哪怕使用的技术你不熟悉，但它是解决问题最好的方法，那就要求你有快速学习并解决问题的能力。

学习一项新技术，我们要先抓住主线，把流程搞通了，以后再在工作中慢慢的熟悉和丰富对它细节的一些认知，所以学一项东西前多问自己几个问题，我学什么，我为什么学，我怎么学，等。先思考后学习，一定会让你事半功倍。

对于怎么学习微信小程序开发，我问了自己上面的四个问题，每个问题，我只需要了解大体内容，四个问题都解决了，然后整个流程也就通了，以后也就是慢慢的对每个问题内容的细节慢慢的熟悉和了解了，其实花了不到一下午的时间，我就搞出了一个简单的demo出来了，了解的内容基本已经覆盖微信小程序日常开发80%的内容了。以上就是我的一点学习心得。

最后 小程序Demo

Demo截图

首页

我的

点击我的任意条目，数据是从第三方聚合平台提供的api获取的

最后目前有很多的多端开发框架，背景大多是都是因为小程序开发的盛行

其他还有很多例如

阿里的rax

我们自己的ditto

微信小程序是什么？如何快速搭建一个微信小程序？

目录

• • 一、微信小程序是什么
  • 二、安全管理
  • 三、微信小程序的功能
  • 四、快速开发一个微信小程序APP
  • • 1、集成即构实时音视频SDK
    • 2、初始化SDK引擎
    • 3、创建房间与登录房间
    • 4、房主创建房间
    • 5、推流与拉流
    • 6、拉流预览
    • 7、播放实时画面统一封装
    • 8、其他工作
  • 五、观众如何得知房主的视频流ID ？
  • • 1、如何获取房主ID？直播间的商品信息？直播间的名称信息？
    • 2、源码分享

一、微信小程序是什么

微信小程序是一种不用下载就能使用的应用，也是一项创新，经过将近两年的发展，已经构造了新的微信小程序开发环境和开发者生态。微信小程序也是这么多年来中国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引擎

这里我们把所有调用即构SDK的API封装到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进行下载！