HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

引入腾讯即时通讯IM,导致vendor.js文件变大,无法发布小程序

1,分包处理
除了tabBar用的页面首页外,其他都放到分包里面,具体看分包的方法,components里的公共组件,分包用到的也放到分包里面。

2,引入腾讯即时通讯IM 会 增大主包大小(800k左右)官方客服说的。所以尽量留出这个大小。
引入腾讯即时通讯IM 要用 《无UI集成方案》这个会小一些,千万不要用《含UI集成方案》;自己来写后面的通话之类的逻辑。这些逻辑放到分包里面,就不用占用主包大小

安装 无UI集成方案 按照官方的文档就可以
我这边只是用到了 1v1 的聊天功能,如下

(1),在您的项目中使用 npm 安装相应的 IM SDK 依赖。

npm install @tencentcloud/chat

相对于 集成方案里的 npm i @tencentcloud/chat-uikit-uniapp unplugin-vue2-script-setup 小很多
官方提供的 后两个依赖,我聊天 所有不用,就没有安装

(2),引入模块,在main.js 文件中加入,最后两句非常重要,咱们在后面的页面要用到

import TencentCloudChat from '@tencentcloud/chat';  
let options = {  
  SDKAppID: 0 // 接入时需要将0替换为您的即时通信 IM 应用的 SDKAppID  
};  
let chat = TencentCloudChat.create(options); // SDK 实例通常用 chat 表示  
chat.setLogLevel(0);  
Vue.prototype.chat = chat  
Vue.prototype.TencentCloudChat = TencentCloudChat

(3),登录==可以在进入对话之前就完成登录的操作,这样就可以一直保持登录的状态,防止初始化未完成就进入对话无法完成操作

<template>  
    <view>  
        <view id="j_page">  
            <view v-for="(item, index) in messageList" :key="index">  
                <!-- 第一条必显示时间 返回的是时间戳自己转化一下-->  
                <view v-if="index == 0">{{ item.time }}</view>  
                <view v-else-if="item.time - messageList[index - 1].time >= 600">{{ item.time }}</view>  
                <!--聊天的左右自行添加样式-->  
                <view><image class="msg-main-r-message-avatar-container-image" :src="item.avatar"></image>{{item.payload.text }}</view>  
            </view>  
        </view>  
        <view>  
            <input placeholder="请输入内容" v-model="msg" @confirm="sendMsg"></input>  
            <view @click="sendMsg">发送</view>  
        </view>  
    </view>  
</template>  

<script>  
export default {  
    components: { },  
    data() {  
        return {  
            userID: '你的 userID',  
            C2Cid: '对方的 C2Cid',  
            userSig: '',  
            messageList: [],  
            msg: '',  
        }  
    },  
    onLoad(option) {  
    },  
    onShow() {  
        this.loginBox()  
    },  
    onReachBottom() {  
    },  
    onReady() {  
    },  
    mounted() {  
        let onMessageReceived = function (event) {  
            this.messageList.push(event.data[0])  
            this.scrollToBottom()  
        };  
        this.chat.on(this.TencentCloudChat.EVENT.MESSAGE_RECEIVED, onMessageReceived, this);  

        let onSdkReady = function (event) {  
            console.log('SDK初始化完成');  
            this.sendFriend(this.C2Cid)  
            this.getMessageListBox(this.C2Cid)  
            this.setMessageReadBox(this.C2Cid)  
        };  
        this.chat.on(this.TencentCloudChat.EVENT.SDK_READY, onSdkReady, this);  
    },  
    methods: {  
        // 登录===================  
        // userSig 后台获取,或者通过 debug文件夹中的 GenerateTestUserSig.js 获取  
        loginBox() {  
            var _this = this  
            let promise = this.chat.login({ userID: this.userID, userSig: this.userSig });  
            promise.then(function (imResponse) {  
                console.log('登录成功2====>', imResponse.data); // 登录成功  
                if (imResponse.data.repeatLogin === true) {  
                    // 标识账号已登录,本次登录操作为重复登录。  
                    console.log(imResponse.data.errorInfo);  
                    _this.sendFriend(_this.C2Cid)  
                    _this.getMessageListBox(_this.C2Cid)  
                    _this.setMessageReadBox(_this.C2Cid)  
                }  
            }).catch(function (imError) {  
                console.warn('login error:', imError); // 登录失败的相关信息  
            });  
        },  
        // 获取会话资料===================  
        sendFriend(id) {  
            var _this = this  
            let promise = this.chat.getConversationProfile(id);  
            promise.then(function (imResponse) {  
                _this.conversation = imResponse.data.conversation  
            }).catch(function (imError) {  
                console.warn('getConversationProfile error:', imError); // 获取会话资料失败的相关信息  
            });  
        },  
        // 获取历史消息===================  
        getMessageListBox(C2CuserID) {  
            var _this = this  
            // 打开某个会话时,第一次拉取消息列表  
            let promise = this.chat.getMessageList({ conversationID: C2CuserID });  
            promise.then(function (imResponse) {  
                const messageList = imResponse.data.messageList; // 消息列表。  
                _this.messageList = messageList  
                _this.scrollToBottom()  
            });  
        },  
        // 到底部  
        scrollToBottom() {  
            wx.createSelectorQuery().select('#j_page').boundingClientRect(function (rect) {  
                // 使页面滚动到底部  
                wx.pageScrollTo({  
                    scrollTop: rect.bottom  
                })  
            }).exec()  
        },  
        // 发送消息===================  
        sendMsg() {  
            var _this = this  
            // 发送文本消息,Web 端与小程序端相同  
            // 1. 创建消息实例,接口返回的实例可以上屏  
            let message = this.chat.createTextMessage({  
                to: this.conversation.userProfile.userID,  
                conversationType: this.TencentCloudChat.TYPES.CONV_C2C,  
                payload: {  
                    text: this.msg  
                },  
            });  
            // 2. 发送消息  
            let promise = this.chat.sendMessage(message);  
            promise.then(function (imResponse) {  
                // 发送成功  
                _this.messageList.push(imResponse.data.message)  
                _this.scrollToBottom()  
                _this.msg = ''  
            }).catch(function (imError) {  
                // 发送失败  
                console.warn('sendMessage error:', imError);  
            });  
        },  
        // 将某会话下所有未读消息已读上报===================  
        setMessageReadBox(e) {  
            // 将某会话下所有未读消息已读上报  
            let promise = this.chat.setMessageRead({ conversationID: e });  
            promise.then(function (imResponse) {  
                // 已读上报成功,指定 ID 的会话的 unreadCount 属性值被置为0  
            }).catch(function (imError) {  
                // 已读上报失败  
                console.warn('setMessageRead error:', imError);  
            });  
        }  

    }  
}  
</script>  
<style lang="scss" scoped></style>

最后看一下依赖分析的大小

继续阅读 »

1,分包处理
除了tabBar用的页面首页外,其他都放到分包里面,具体看分包的方法,components里的公共组件,分包用到的也放到分包里面。

2,引入腾讯即时通讯IM 会 增大主包大小(800k左右)官方客服说的。所以尽量留出这个大小。
引入腾讯即时通讯IM 要用 《无UI集成方案》这个会小一些,千万不要用《含UI集成方案》;自己来写后面的通话之类的逻辑。这些逻辑放到分包里面,就不用占用主包大小

安装 无UI集成方案 按照官方的文档就可以
我这边只是用到了 1v1 的聊天功能,如下

(1),在您的项目中使用 npm 安装相应的 IM SDK 依赖。

npm install @tencentcloud/chat

相对于 集成方案里的 npm i @tencentcloud/chat-uikit-uniapp unplugin-vue2-script-setup 小很多
官方提供的 后两个依赖,我聊天 所有不用,就没有安装

(2),引入模块,在main.js 文件中加入,最后两句非常重要,咱们在后面的页面要用到

import TencentCloudChat from '@tencentcloud/chat';  
let options = {  
  SDKAppID: 0 // 接入时需要将0替换为您的即时通信 IM 应用的 SDKAppID  
};  
let chat = TencentCloudChat.create(options); // SDK 实例通常用 chat 表示  
chat.setLogLevel(0);  
Vue.prototype.chat = chat  
Vue.prototype.TencentCloudChat = TencentCloudChat

(3),登录==可以在进入对话之前就完成登录的操作,这样就可以一直保持登录的状态,防止初始化未完成就进入对话无法完成操作

<template>  
    <view>  
        <view id="j_page">  
            <view v-for="(item, index) in messageList" :key="index">  
                <!-- 第一条必显示时间 返回的是时间戳自己转化一下-->  
                <view v-if="index == 0">{{ item.time }}</view>  
                <view v-else-if="item.time - messageList[index - 1].time >= 600">{{ item.time }}</view>  
                <!--聊天的左右自行添加样式-->  
                <view><image class="msg-main-r-message-avatar-container-image" :src="item.avatar"></image>{{item.payload.text }}</view>  
            </view>  
        </view>  
        <view>  
            <input placeholder="请输入内容" v-model="msg" @confirm="sendMsg"></input>  
            <view @click="sendMsg">发送</view>  
        </view>  
    </view>  
</template>  

<script>  
export default {  
    components: { },  
    data() {  
        return {  
            userID: '你的 userID',  
            C2Cid: '对方的 C2Cid',  
            userSig: '',  
            messageList: [],  
            msg: '',  
        }  
    },  
    onLoad(option) {  
    },  
    onShow() {  
        this.loginBox()  
    },  
    onReachBottom() {  
    },  
    onReady() {  
    },  
    mounted() {  
        let onMessageReceived = function (event) {  
            this.messageList.push(event.data[0])  
            this.scrollToBottom()  
        };  
        this.chat.on(this.TencentCloudChat.EVENT.MESSAGE_RECEIVED, onMessageReceived, this);  

        let onSdkReady = function (event) {  
            console.log('SDK初始化完成');  
            this.sendFriend(this.C2Cid)  
            this.getMessageListBox(this.C2Cid)  
            this.setMessageReadBox(this.C2Cid)  
        };  
        this.chat.on(this.TencentCloudChat.EVENT.SDK_READY, onSdkReady, this);  
    },  
    methods: {  
        // 登录===================  
        // userSig 后台获取,或者通过 debug文件夹中的 GenerateTestUserSig.js 获取  
        loginBox() {  
            var _this = this  
            let promise = this.chat.login({ userID: this.userID, userSig: this.userSig });  
            promise.then(function (imResponse) {  
                console.log('登录成功2====>', imResponse.data); // 登录成功  
                if (imResponse.data.repeatLogin === true) {  
                    // 标识账号已登录,本次登录操作为重复登录。  
                    console.log(imResponse.data.errorInfo);  
                    _this.sendFriend(_this.C2Cid)  
                    _this.getMessageListBox(_this.C2Cid)  
                    _this.setMessageReadBox(_this.C2Cid)  
                }  
            }).catch(function (imError) {  
                console.warn('login error:', imError); // 登录失败的相关信息  
            });  
        },  
        // 获取会话资料===================  
        sendFriend(id) {  
            var _this = this  
            let promise = this.chat.getConversationProfile(id);  
            promise.then(function (imResponse) {  
                _this.conversation = imResponse.data.conversation  
            }).catch(function (imError) {  
                console.warn('getConversationProfile error:', imError); // 获取会话资料失败的相关信息  
            });  
        },  
        // 获取历史消息===================  
        getMessageListBox(C2CuserID) {  
            var _this = this  
            // 打开某个会话时,第一次拉取消息列表  
            let promise = this.chat.getMessageList({ conversationID: C2CuserID });  
            promise.then(function (imResponse) {  
                const messageList = imResponse.data.messageList; // 消息列表。  
                _this.messageList = messageList  
                _this.scrollToBottom()  
            });  
        },  
        // 到底部  
        scrollToBottom() {  
            wx.createSelectorQuery().select('#j_page').boundingClientRect(function (rect) {  
                // 使页面滚动到底部  
                wx.pageScrollTo({  
                    scrollTop: rect.bottom  
                })  
            }).exec()  
        },  
        // 发送消息===================  
        sendMsg() {  
            var _this = this  
            // 发送文本消息,Web 端与小程序端相同  
            // 1. 创建消息实例,接口返回的实例可以上屏  
            let message = this.chat.createTextMessage({  
                to: this.conversation.userProfile.userID,  
                conversationType: this.TencentCloudChat.TYPES.CONV_C2C,  
                payload: {  
                    text: this.msg  
                },  
            });  
            // 2. 发送消息  
            let promise = this.chat.sendMessage(message);  
            promise.then(function (imResponse) {  
                // 发送成功  
                _this.messageList.push(imResponse.data.message)  
                _this.scrollToBottom()  
                _this.msg = ''  
            }).catch(function (imError) {  
                // 发送失败  
                console.warn('sendMessage error:', imError);  
            });  
        },  
        // 将某会话下所有未读消息已读上报===================  
        setMessageReadBox(e) {  
            // 将某会话下所有未读消息已读上报  
            let promise = this.chat.setMessageRead({ conversationID: e });  
            promise.then(function (imResponse) {  
                // 已读上报成功,指定 ID 的会话的 unreadCount 属性值被置为0  
            }).catch(function (imError) {  
                // 已读上报失败  
                console.warn('setMessageRead error:', imError);  
            });  
        }  

    }  
}  
</script>  
<style lang="scss" scoped></style>

最后看一下依赖分析的大小

收起阅读 »

无意中找到nvue国际化场景下每个nvue页面都需要引入VueI18n的解决方案

国际化 nvue
// nvue 目前的国际化方案需要在每个页面单独引入uni-i18n,后续框架会抹平差异,抹平差异后和 vue 页面一样只需要在 main.js 中引入  
<script>  
  import {  
    initVueI18n  
  } from '@dcloudio/uni-i18n'  

  // const messages = {} 此处内容省略,和 vue 全局引入的写法一致  

  const { t } = initVueI18n(messages)  

  export default {  
    data() {  
      return {  
      }  
    }  
  }  
</script>  

这是官网推荐的方案,需要在每个nvue都有这段代码

今天发现我们其实可以在app.vue的onLaunch中把t挂载到uni下,类似 uni.$locale = t去挂载,然后在nvue页面内直接使用 uni.$locale('common.edit')

下面是app.vue的示例代码

<script>  
    import {  
        initVueI18n  
    } from '@dcloudio/uni-i18n';  
    import messages from '@/locale';  
    const {  
        t  
    } = initVueI18n(messages);  
    export default {  
        onLaunch: function() {  
            console.log('App Launch')  
            uni.$locale = t  
            uni.$language = uni.getLocale()  
        },  
        onShow: function() {  
            console.log('App Show')  
        },  
        onHide: function() {  
            console.log('App Hide')  
        },  
    }  
</script>  

<style lang="scss">  
</style>
继续阅读 »
// nvue 目前的国际化方案需要在每个页面单独引入uni-i18n,后续框架会抹平差异,抹平差异后和 vue 页面一样只需要在 main.js 中引入  
<script>  
  import {  
    initVueI18n  
  } from '@dcloudio/uni-i18n'  

  // const messages = {} 此处内容省略,和 vue 全局引入的写法一致  

  const { t } = initVueI18n(messages)  

  export default {  
    data() {  
      return {  
      }  
    }  
  }  
</script>  

这是官网推荐的方案,需要在每个nvue都有这段代码

今天发现我们其实可以在app.vue的onLaunch中把t挂载到uni下,类似 uni.$locale = t去挂载,然后在nvue页面内直接使用 uni.$locale('common.edit')

下面是app.vue的示例代码

<script>  
    import {  
        initVueI18n  
    } from '@dcloudio/uni-i18n';  
    import messages from '@/locale';  
    const {  
        t  
    } = initVueI18n(messages);  
    export default {  
        onLaunch: function() {  
            console.log('App Launch')  
            uni.$locale = t  
            uni.$language = uni.getLocale()  
        },  
        onShow: function() {  
            console.log('App Show')  
        },  
        onHide: function() {  
            console.log('App Hide')  
        },  
    }  
</script>  

<style lang="scss">  
</style>
收起阅读 »

uts踩坑集锦

uts

一、自定义类型永远不要直接定义在函数声明中,特别是长一点的自定义类型。类型定义要设置在专门的声明文件中
二、类implements接口编辑器自动补全的代码,只留下函数名,(),{},这三个东西就行,其他的删掉自己写。记得 public和override这两个修饰符
三、uts暴露给js的函数的参数,参数类型不要设置成复杂的嵌套,uniapp1.0下会有问题。

继续阅读 »

一、自定义类型永远不要直接定义在函数声明中,特别是长一点的自定义类型。类型定义要设置在专门的声明文件中
二、类implements接口编辑器自动补全的代码,只留下函数名,(),{},这三个东西就行,其他的删掉自己写。记得 public和override这两个修饰符
三、uts暴露给js的函数的参数,参数类型不要设置成复杂的嵌套,uniapp1.0下会有问题。

收起阅读 »

uniapp app 安卓端 百度语音识别 "code": 4004,App name unknown

百度语音识别
plus.speech.startRecognize(  
                    options,  
                    function(s) {  
                        console.log("pass----",s);  
                        _this.sayData = s;  
                        plus.speech.stopRecognize();  
                        uni.redirectTo({  
                            url: '/pages/recentsearch/recentsearch?sayData='   _this.sayData  
                        })  

                    },   
                    function(e) {//失败  
                        console.log("fail----",e);  
                        uni.showToast({  
                            title: '语音识别失败',  
                            icon: 'none'  
                        });  
                    }  
                );

错误提示信息


{  
    "code": 4004,  
    "message": "App name unknown[(-3004)asr authentication failed[info:-3004]]"  
}

解决方法:
1、我们用的是个人的百度语音免费权限,权限过期了,重新换账号申请了一个并申请了免费的额度
2、在manifest配置最新的账号
3、真机调试时,把原来手机上的删除,重新制作自定义基座,基座完成后,重新运行到基座,即可实现语音功能!!!!!

继续阅读 »
plus.speech.startRecognize(  
                    options,  
                    function(s) {  
                        console.log("pass----",s);  
                        _this.sayData = s;  
                        plus.speech.stopRecognize();  
                        uni.redirectTo({  
                            url: '/pages/recentsearch/recentsearch?sayData='   _this.sayData  
                        })  

                    },   
                    function(e) {//失败  
                        console.log("fail----",e);  
                        uni.showToast({  
                            title: '语音识别失败',  
                            icon: 'none'  
                        });  
                    }  
                );

错误提示信息


{  
    "code": 4004,  
    "message": "App name unknown[(-3004)asr authentication failed[info:-3004]]"  
}

解决方法:
1、我们用的是个人的百度语音免费权限,权限过期了,重新换账号申请了一个并申请了免费的额度
2、在manifest配置最新的账号
3、真机调试时,把原来手机上的删除,重新制作自定义基座,基座完成后,重新运行到基座,即可实现语音功能!!!!!

收起阅读 »

普通vue项目打包为app

App离线打包
  1. vue路由设置为hash模式
  2. 打包
  3. 通过hbuilder创建5+APP项目
  4. 将打包问题覆盖到根目录
  5. 云打包

其实最重要就是hash模式 不然就是白屏。

  1. vue路由设置为hash模式
  2. 打包
  3. 通过hbuilder创建5+APP项目
  4. 将打包问题覆盖到根目录
  5. 云打包

其实最重要就是hash模式 不然就是白屏。

npm install报错

执行npm install报错

npm ERR! code CERT_HAS_EXPIRED  
npm ERR! errno CERT_HAS_EXPIRED  
npm ERR! request to https://registry.npm.taobao.org/@dcloudio/uni-helper-json failed, reason: certificate has expired

我并不知道这个应该怎么去解决当删除package.json中的"@dcloudio/uni-helper-json": "^1.0.13",npm就能完成下载并且用HbuilderX也能正常运行到开发者工具,请问应该怎么解决这个报错呢

继续阅读 »

执行npm install报错

npm ERR! code CERT_HAS_EXPIRED  
npm ERR! errno CERT_HAS_EXPIRED  
npm ERR! request to https://registry.npm.taobao.org/@dcloudio/uni-helper-json failed, reason: certificate has expired

我并不知道这个应该怎么去解决当删除package.json中的"@dcloudio/uni-helper-json": "^1.0.13",npm就能完成下载并且用HbuilderX也能正常运行到开发者工具,请问应该怎么解决这个报错呢

收起阅读 »

技术合伙人

1能力和待遇(饼向)
要求:主要是前端和后端精通就行,安卓原生要有个1年的经验起,因为很多uniapp搞不定的,需要自行写,有些买不起,太贵!年龄没有限制,学历也没有限制,我个人的技术全是学来的,初中毕业。

1能力和待遇(饼向)
要求:主要是前端和后端精通就行,安卓原生要有个1年的经验起,因为很多uniapp搞不定的,需要自行写,有些买不起,太贵!年龄没有限制,学历也没有限制,我个人的技术全是学来的,初中毕业。

UniPush-谷歌推送FCM新版V1配置指南

unipush fcm

FCM旧版HTTP 将在2024年6月20日后废弃,建议在此时间前迁移到最新的HTTP V1。

一、下载 V1 版本密钥文件

1,登录Firebase官网,进入项目设置

2,选择配置语言,点击生成新的私钥

3,生成密钥

4,生成密钥后,会下载到本地一个json文件

二、保存配置

登录Dcloud官网,上传并保存密钥文件。
⚠️注意:若google-services.json文件有变更,保存后需要重新云打包。若无变更,则仅需在后台保存配置。

继续阅读 »

FCM旧版HTTP 将在2024年6月20日后废弃,建议在此时间前迁移到最新的HTTP V1。

一、下载 V1 版本密钥文件

1,登录Firebase官网,进入项目设置

2,选择配置语言,点击生成新的私钥

3,生成密钥

4,生成密钥后,会下载到本地一个json文件

二、保存配置

登录Dcloud官网,上传并保存密钥文件。
⚠️注意:若google-services.json文件有变更,保存后需要重新云打包。若无变更,则仅需在后台保存配置。

收起阅读 »

前端网页托管,H5使用history路由模式,除了首页刷新白屏,文件不存在解决办法

找到前端网页托管=>参数配置=>配置404页面就可以解决

找到前端网页托管=>参数配置=>配置404页面就可以解决

***



邮箱验证的时候收不到邮件

邮箱验证的时候,可以收到验证码,但是收不到验证邮箱的消息
下面以网易邮箱为例:

  1. 用网易邮箱登录Hbuilder时会提示“当前账号尚未验证邮箱,请登录开发者中心 https://dev.dcloud.net.cn 完成邮箱验证后再登录”
  2. 去该网址验证时,登录的邮箱可以收到验证码,但是到验证的步骤,点击‘验证’按钮时会出现附件中的提示,然后邮箱中也收不到验证的消息
    重点来了!!!!!
    解决办法(以网易邮箱为例):
    网易邮箱-设置-反垃圾/黑白名单-白名单 里面添加 dev.dcloud.net.cn

我已经验证成功了!!!给小伙伴们避雷!!!

继续阅读 »

邮箱验证的时候,可以收到验证码,但是收不到验证邮箱的消息
下面以网易邮箱为例:

  1. 用网易邮箱登录Hbuilder时会提示“当前账号尚未验证邮箱,请登录开发者中心 https://dev.dcloud.net.cn 完成邮箱验证后再登录”
  2. 去该网址验证时,登录的邮箱可以收到验证码,但是到验证的步骤,点击‘验证’按钮时会出现附件中的提示,然后邮箱中也收不到验证的消息
    重点来了!!!!!
    解决办法(以网易邮箱为例):
    网易邮箱-设置-反垃圾/黑白名单-白名单 里面添加 dev.dcloud.net.cn

我已经验证成功了!!!给小伙伴们避雷!!!

收起阅读 »