从零搭建uni-app开发H5: 基于uni-app + vant2 的项目

导入vant

首先执行命令安装vant

npm install vant --save

接着在main.js中导入

import Vant from 'vant';
Vue.use(Vant);

然后需要单独引入css，在uni-app项目中直接在main.js中导入css会出现报错，我们需要在App.vue文件中全局导入vant的css

<style>
	@import 'vant/lib/index.css';
	/*每个页面公共css */
</style>

执行完上述操作后就可以在uni-app中使用vant了

引入微信SDK

首先在官方文档查看下载地址

这里给出下载地址，http://res2.wx.qq.com/open/js/jweixin-1.6.0.js，点击打开后全选网页内容，将js代码粘贴到我们项目中，在项目中新建`src/common/jweixin.js`,将我们复制的代码粘贴到js文件中

然后在main.js里面引入jweixin.js

import wx from "./common/jweixin";
// 将 wx 挂载到 Vue 原型上当做全局变量使用
Vue.prototype.$wx = wx;

这里个坑需要注意，我们引入之后启动项目会报如下错误，导致我们页面无法正常显示

解决办法是将我们下载的微信sdk源文件中的第一个this修改为window，打开jweixin.js,搜索并找到第一个this,然后修改为window

这是我们在打开控制台发现错误就没有了。

接着我们要通过config接口注入权限验证配置,新建src/common/wechar.js文件，创建如下代码

const wechat = {
  initWxConfig() {
    this.$wx.config({
      debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: "wx21....", // 必填，公众号的唯一标识
      timestamp: "1629855330", // 必填，生成签名的时间戳
      nonceStr: "5p6z8ti6r5", // 必填，生成签名的随机串
      signature: "55b733732423b....", // 必填，签名
      jsApiList: [ 
        "updateAppMessageShareData",
        "updateTimelineShareData",
        "onMenuShareTimeline",
        "onMenuShareAppMessage",
        "onMenuShareQQ",
        "onMenuShareWeibo",
        "onMenuShareQZone",
        "startRecord",
        "stopRecord",
        "onVoiceRecordEnd",
        "playVoice",
        "pauseVoice",
        "stopVoice",
        "onVoicePlayEnd",
        "uploadVoice",
        "downloadVoice",
        "chooseImage",
        "previewImage",
        "uploadImage",
        "downloadImage",
        "translateVoice",
        "getNetworkType",
        "openLocation",
        "getLocation",
        "hideOptionMenu",
        "showOptionMenu",
        "hideMenuItems",
        "showMenuItems",
        "hideAllNonBaseMenuItem",
        "showAllNonBaseMenuItem",
        "closeWindow",
        "scanQRCode",
        "chooseWXPay",
        "openProductSpecificView",
        "addCard",
        "chooseCard",
        "openCard",
      ], // 必填，需要使用的JS接口列表
    });
    this.$wx.ready(function() {
      console.log("通过ready接口处理成功验证");
    });
    this.$wx.error(function(res) {
      console.log(res, "通过error接口处理失败验证");
    });
  },
};

export default wechat;

其中config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。

另外config中的appId、timestamp、nonceStr、signature这几个字段都是由后端来生成，前端只需要调用接口获取即可。

需要注意的是上线后我们要把 debug设置为 false，否则调用的所有api的返回值会在客户端alert出来

初始化完成后再main.js中将该文件引入并注册全局变量

import weChar from "./common/wechar";
Vue.prototype.$weChar = weChar;

在后再App.vue文件中的onLaunch钩子函数中调用wechar.js中的initWxConfig方法来对微信sdk进行初始化操作

// 应用初始化完成时触发，全局只触发一次
onLaunch: function () {
    console.log("App Launch");
    // 初始化微信配置
    this.$weChar.initWxConfig.call(this);
},

onLaunch方法全局只会触发一次，所以非常适合做一些初始化工作

上述配置完成后刷新页面打开控制台看打印信息

可以看到已经打印了ready方法中的信息，说明我们初始化成功了。如果没有执行ready方法，或者报错等要检查一下签名，时间戳，随机字符串等是否和后台的一致，或者签名是否正确。

初始化成功后，我们就可以在页面中使用了。

使用之前需要将前端项目的域名配置在微信公众号的JS接口安全域名中,下面是我前端项目的域名

配置完成后要将该地址配置到微信公众号的菜单中，配置方法

全部准备就绪后，在项目中比如使用扫码，代码如下

<van-cell title="扫码" is-link @click="scanCode" />

<script>
export default{
    methods:{
        scanCode() {
            const that = this;
            wx.scanQRCode({
                needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
                success: function(res) {
                    // res.resultStr 当needResult 为 1 时，扫码返回的结果
                    that.$dialog.alert({
                        message: res.resultStr,
                    });
                },
            });
        }
    }
}
</script>

然后通过微信公众号进入H5页面，点击扫码，可以看到效果

使用goeasy实现在线聊天

GoEasy致力于打造"Web开发人员最喜爱的即时通讯平台", 只需要一个SDK，就可以帮助开发人员快速的完成各种即时通讯功能：

提醒类：系统提醒，订单提醒等
数据实时更新：页面同步，位置实时跟踪，实时图表
直播间聊天室
用户在线状态监听
手机APP通知栏推送
游戏对战
IM聊天

官方文档

首先继承GoEasy SDK,官方提供了三种方式，我们选择第二种

将下载好的goeasy-2.1.11.min.js文件放在src/common文件夹下，如图

之后在main.js中做如下初始化操作

import GoEasy from "./common/goeasy-2.1.11.min";

// 初始化goEasy
const goeash = GoEasy.getInstance({
  host: "hangzhou.goeasy.io", //若是新加坡区域：singapore.goeasy.io
  appkey: "这里替换成自己的appkey",
  modules: ["pubsub", "im"], //根据需要，传入‘pubsub’或'im’，或数组方式同时传入
});
// 声明两个全局变量
Vue.prototype.$goeasy = goeash;
Vue.prototype.$GoEasy = GoEasy;

appkey我们需要注册后创建一个应用，然后在应用里面可以看到，官方文档介绍的也非常详细，详情点这里

初始化完成之后在使用GoEasy进行消息的接收和发送之前，需要先初始化GoEasy对象, 并建立与GoEasy服务器的连接，一个网页、一个应用中需要，且只需要建立一个连接即可，在成功断开连接之前，不需要，也不能反复建立连接。

创建src/common/goEasyConfig.js文件用来建立连接，编写如下代码

// 建立goEasy链接
const goEasyConfig = {
  connect() {
    //建立连接
    this.$goeasy.connect({
      id: "user001", //pubsub选填，im必填
      data: { avatar: "/www/xxx.png", nickname: "Neo" }, //必须是一个对象，pubsub选填，im必填，用于上下线提醒和查询在线用户列表时，扩展更多的属性
      onSuccess: function() {
        //连接成功
        console.log("连接成功");
      },
      onFailed: function(error) {
        //连接失败
        console.log("连接失败:" + error.code + ",error:" + error.content);
      },
      onProgress: function(attempts) {
        //连接或自动重连中
        console.log("连接或自动重连中", attempts);
      },
    });
  },
  //断开连接
  disconnect() {
    goeasy.disconnect({
      onSuccess: function() {
        console.log("断开链接成功");
      },
      onFailed: function(error) {
        console.log("断开链接失败" + error.code + ",error:" + error.content);
      },
    });
  },
};

export default goEasyConfig;

上面的id是自己的id，作为和其他聊天对象区分的唯一标识，一般通过后台来获取当前用户的唯一标识。这里暂时写死。

完成之后继续在main.js文件里面引入上面的goEasyConfig.js文件

import goEasyConfig from "./common/goEasyConfig";
// 同样将goEasyConfig作为全局变量使用
Vue.prototype.$goEasyConfig = goEasyConfig;

然后在App.vue文件中调用建立链接的方法

// 应用初始化完成时触发，全局只触发一次
onLaunch: function () {
    // 初始化链接
    this.$goEasyConfig.connect.call(this);
},

onLaunch方法在上面引入微信sdk时已经说过，所以在这里面做链接操作在合适不过了

现在我们来到项目控制台查看是否链接成功

我们可以看到已经链接成功了。

在GoEasy的控制台可以查看当前在线客户端，可以看到我们链接成功后就会有一个设备在线

下面就是发送消息了，核心代码如下

<van-button round type="info" size="small" @click="sendMessage" :disabled="!message">
    发送
</van-button>

<script>
    export default{
        data() {
            return {
              // 当前输入框输入的消息
              message: "",
              // 已接收和已发送的消息数组
              messageList: [],
            };
        },
        mounted() {          
            let that = this;
            let im = this.$goeasy.im;
            // 监听接收消息
            let onPrivateMessageReceived = function(res) {
              console.log("监听到消息过来",res);      
              // push当前发送的内容
              that.messageList.push({
                message: res.payload.text,
                userimage: that.myUserImage, // 头像图片地址，根据具体业务替换
                time: res.timestamp,
                type: "from",
                status: res.status,
              });
              // 让聊天内容滚动到最底部
              that.scrollBottom();
            };
            //监听和接收单聊消息
            im.on(
              that.$GoEasy.IM_EVENT.PRIVATE_MESSAGE_RECEIVED,
              onPrivateMessageReceived
            );
        },
        methods:{
            // 发送消息方法
            sendMessage() {
                // 获取goeasy.im实例
                var im = this.$goeasy.im;
                const that = this	;
                let textMessage = im.createTextMessage({
                    text: that.message, //消息内容
                    to: {
                        type: that.$GoEasy.IM_SCENE.PRIVATE,
                        id: "user002",
                        data: {
                            avatar: that.myUserImage, // 头像图片地址，根据具体业务替换
                            nickname: "Neo",
                        },
                    },
                });
                //发送消息
                im.sendMessage({
                    message: textMessage,
                    onSuccess: function(res) {
                        //发送成功
                        console.log("发送成功", res);
                        // push当前发送的内容
                        that.messageList.push({
                            message: res.payload.text,
                            userimage: that.myUserImage,
                            time: res.timestamp,
                            type: "send",
                            status: res.status,
                        });
                        // 消息发送成功后清空输入框的值
                        that.message = "";
                        // 让聊天内容滚动到最底部
                        that.scrollBottom();
                    },
                    onFailed: function(error) {
                        //发送失败
                        console.log("发送失败" + error.code + " ,error " + error.content);
                    },
                });
            },
        }
    }
</script>

代码的大致意思为先封装了一个消息对象，然后通过im.sendMessage方法将消息发送给我们上面填写的userid所在的聊天界面，然后通过im.on去监听对方发送过来的消息。

这里我没有对接后台代码，所以我们可以通过复制一份代码的方式手动创建两个用户，然后启动两个项目，来模拟两个用户聊天，一个用户是 user001,另外一个用户是user002。在实际开发中这里的id都是根据用户登录后获取所获取的用户信息来实现自动填写

我们复制一份项目后再新复制的项目中goEasyConfig.js里面的初始化id就要写成user002，然后启动两个项目

这时再打开Goeasy控制台可以看到有两个客户端在线，分别是user001,user002

然后我们来模拟聊天

是不是感觉非常简单呢。至此一个基本的聊天就完成了。更多的功能可以查看GoEasy的官方文档，个人感觉文档写的通俗易懂，非常容易上手。

SongZX / 从零搭建uni-app开发H5

导入vant

引入微信SDK

使用goeasy实现在线聊天

简介

发行版

贡献者

近期动态

SongZX / 从零搭建uni-app开发H5 .gitee-modal { width: 500px !important; }

导入vant

引入微信SDK

使用goeasy实现在线聊天

简介

发行版

贡献者

近期动态

搜索帮助

SongZX / 从零搭建uni-app开发H5