站长网网站模板下载,潍坊网站建设品牌,电子商务网站的主要评价指标有,网站制作公司属于广告发布者吗目录 使用场景用户图片商家图片 官方文档官方文档地址插件地址 项目创建uniCloud开发环境申请开发环境申请完后 概括开始使用步骤1App.vue 步骤2找到软件登录图片找到软件登录接口登录源码如下 步骤3找到软件注册图片注册源码如下 步骤4找到index.vue首页图片 index.vue源码如下… 目录 使用场景用户图片商家图片 官方文档官方文档地址插件地址 项目创建uniCloud开发环境申请开发环境申请完后 概括开始使用步骤1App.vue 步骤2找到软件登录图片找到软件登录接口登录源码如下 步骤3找到软件注册图片注册源码如下 步骤4找到index.vue首页图片 index.vue源码如下角标图片 步骤5使用页面detail.vue图片 源码如下 步骤6pages.json图片 步骤7最后 使用场景
用户图片 商家图片 下载完插件自动配置插件的路由也就是想要的商家列表页面和用户列表页面 官方文档
官方文档地址 文档要看仔细一会要用 uniapp官方https://doc.dcloud.net.cn/uniCloud/uni-im.html
插件地址
插件地址https://ext.dcloud.net.cn/plugin?nameuni-im
项目创建uniCloud开发环境
申请开发环境
注意我这个项目是申请的阿里云的开发环境要用HBuilder X的账号申请阿里云开发环境这个申请过程不是我弄的后端账号给的我。
申请完后
1.登录HBuilder X刚才申请的账号
2.点击项目根目录最外层的文件在HBuilder X里面左击创建开发环境uniCloud找到申请的阿里云这就关联到自己HBuilder X账号申请的阿里云环境
图片
概括
1.首先这个过程即时通信也有登录注册过程这个两个过程 必须软件的账号登录和注册同时的也就是说登录和注册都要调用即时通信注册接口
2.在首页挂在登录方法
3.使用页面跳转即可
开始使用
步骤1
App.vue 引入文件 script//1. 导入统一身份信息管理模块import uniIdPagesInit from /uni_modules/uni-id-pages/init.js;//2. 导入uniIm的Utils工具类import uniImUtils from /uni_modules/uni-im/common/utils.js;export default {onLaunch: function() {//3. 初始化uni身份信息管理模块uniIdPagesInit();//4. 初始化uniImuniImUtils.init();},onShow: function() {//3. 初始化uni身份信息管理模块uniIdPagesInit();//4. 初始化uniImuniImUtils.init();},};
/script步骤2
找到软件登录图片 找到软件登录接口
软件登录接口调用即时通信登录接口
登录源码如下
templateview classview class clickformSubmit登录/view/view
/templatescriptexport default{methods:{/*登录方法*/formSubmit() {this.disLogin truelet self this;let formdata {mobile: self.formData.mobile,}let url ;uni.showLoading({title: 正在提交});self._post(url,formdata,result {uni.setStorageSync(token, result.data.token);uni.setStorageSync(user_id, result.data.user_id);// 调用即时通信注册接口self.registerUniIm(result.data.token);},false,() {uni.hideLoading();self.disLogin false});},// 调用即时通信注册接口后端要参数传好和后端协调registerUniIm(token) {let self this;let userInfo uni.getSystemInfoSync();self._post(user.useruniim/uniImLogin, {token:token,uniPlatform:userInfo.uniPlatform,appId:userInfo.appId,deviceId:userInfo.deviceId}, function(res) {console.log(res);});},}}
/script步骤3
找到软件注册图片
同样也要调用即时通信注册接口
我这个是验证码登录你的要是注册也要调用即时通信接口 注册源码如下
templateview classview class clickformSubmit注册/view/view
/templatescriptexport default{methods:{/*注册方法*/formSubmit() {this.disLogin truelet self this;let formdata {mobile: self.formData.mobile,}let url ;uni.showLoading({title: 正在提交});self._post(url,formdata,result {uni.setStorageSync(token, result.data.token);uni.setStorageSync(user_id, result.data.user_id);// 调用即时通信注册接口self.registerUniIm(result.data.token);},false,() {uni.hideLoading();self.disLogin false});},// 调用即时通信注册接口后端要参数传好和后端协调registerUniIm(token) {let self this;let userInfo uni.getSystemInfoSync();self._post(user.useruniim/uniImLogin, {token:token,uniPlatform:userInfo.uniPlatform,appId:userInfo.appId,deviceId:userInfo.deviceId}, function(res) {console.log(res);});},}}
/script步骤4
找到index.vue首页
图片 index.vue源码如下
template/templatescript// 要记得引入哦~// 引入2下面import uniImUtils from /uni_modules/uni-im/common/utils.js;//引入2 uniImMethodsimport uniIm from /uni_modules/uni-im/lib/main.js;export default {onShow() {// this.getTabBarLinks(); // 底部导航注定义的函数释掉// 当前时间毫秒时间戳var timestamp (new Date()).valueOf(); // 1604297892942// console.log(timestamp,毫秒时间戳);// 获取过期时间 毫秒时间戳let tokenExpiredUnIm uni.getStorageSync(tokenExpiredUnIm)let newTime tokenExpiredUnIm - timestamp;if (!tokenExpiredUnIm newTime 3600000) {// 在首页 调用即时通信 登录接口this.loginUniIm();}// console.log(newTime, 新时间);// 下面看自己需求加不加。都可以let unreadCount uniIm.conversation.unreadCount();console.log(unreadCount,获取未读总数量)// 下面是给底部tabar加角标消息数量uni.setStorageSync(unreadCount,unreadCount)if (unreadCount 0) {uni.setTabBarBadge({index: 2, // text: String(unreadCount), text: unreadCount,});} else { uni.removeTabBarBadge({index: 2 });}},methods: {// 在首页 调用即时通信 登录接口loginUniIm() {let self this;let userInfo uni.getSystemInfoSync();self._post(user.useruniim/uniImRegister, {uniPlatform: userInfo.uniPlatform,appId: userInfo.appId,deviceId: userInfo.deviceId}, async function(res) {console.log(res.data.newToken);let uniIdToken res.data.newToken;await uniImUtils.login(uniIdToken)// console.log(uniIdToken.tokenExpired, 打印);// 获取过期时间 毫秒时间戳uni.setStorageSync(tokenExpiredUnIm, uniIdToken.tokenExpired)});},}};
/script角标图片
步骤5
使用页面detail.vue
图片
用户联系商家按钮
源码如下
templateview classcontentview classbtns-wrap-lft-btn btns-wrap-lft-btn1 clickgoSiXintext私信联系/text/view/view
/template
script//引入uniImMethodsimport uniIm from /uni_modules/uni-im/lib/main.js;export default {methods: {data() {return {store_im_id: }},onLoad() {this.getData();},methods: {/*获取数据*/getData() {let self this;let product_id self.product_id;uni.showLoading({title: 加载中});self._get(product.product/detail, {product_id: product_id,url: self.url,visitcode: self.getVisitcode()},function(res) {// console.log(res.data.store_im_id);// 后端返回 对应的用户idself.store_im_id res.data.store_im_id;});},goSiXin() {// 文档有下面这个方法路由下载插件就自动配置好了// uni.navigateTo({// url:/uni_modules/uni-im/pages/chat/chat?user_id 对应的用户id// })let store_im_id this.store_im_id;uni.navigateTo({url: /uni_modules/uni-im/pages/chat/chat?user_id store_im_id})},}}};
/script步骤6
pages.json图片 步骤7
大功告成啦哪里如果有遗漏大家可以在评论区进行补充感谢大家这么久的陪伴
最后 感觉文章好的话记得点个心心和关注和收藏有错的地方麻烦指正一下如果需要转载,请标明出处多谢
