微信小程序——聊天功能(一、环境搭建)
2023-09-11 14:19:16 时间
具体效果:
一、环境搭建
总来的来说,初始化搭建一般有两部:
1.环境的初始化
2.基本页面的搭建
一、环境的初始化
1.1首先新建有关云函数的文件夹
编辑
1.2在project中配置云环境目录,配置完成后点保存,此时云函数文件夹变为黄色
"cloudfunctionRoot": "cloudFunctions/",
编辑
1.3配置云环境初始化参数代码
// 云开发环境环境的初始化
wx.cloud.init({
env:"pay-try-0gmo3urf4597ee3d"
})
编辑
二、基础页面
直接在app.js中输入页面,保存之后直接在page文件夹中生成
编辑
注意事项
1.注意配置云函数的时候,格式很容易写错
2.别忘记在app.js中写入初始化代码,其中的一串复杂变量是我们自己的环境id
思路导图:
三、数据库表
一共有两个表,一个存放用户好友数据,一个存放聊天数据。
chat_users1用户表 、chat_record1聊天记录表。
步骤1
在云开发中新建数据库表
步骤2
修改数据库表的权限
修改读、写的值都为true
四、搭建tabar
步骤1.找好我们的图标
步骤2.写tabar路径
步骤1.找好我们的图标
可以在阿里图标的官网找。
步骤2.写tabar
注意图片路径和对应的页面路径是否一致
"tabBar": {
"color": "black",
"selectedColor": "#2c3e50",
"list": [
{
"pagePath": "pages/message/message",
"text": "消息",
"iconPath": "icon/消息(2).png",
"selectedIconPath": "icon/消息(1).png"
},
{
"pagePath": "pages/friends/friends",
"text": "好友",
"iconPath": "icon/好友.png",
"selectedIconPath": "icon/好友(1).png"
},
{
"pagePath": "pages/my/my",
"text": "主页",
"iconPath": "icon/我的(5).png",
"selectedIconPath": "icon/我的(6).png"
}
]
}
注意:在app.js 中写的。注意tabar放的位置。
搭建完成的效果:
相关文章
- ❤️为你的微信制作好友头像照片墙吧⁉️
- 微信小程序 - 非入侵式布局
- 【小程序】把微信小程序转换h5代码的几个关键字替换
- 微信小程序 - 音乐列表点击播放 / 暂停音频,流畅切换音频(支持暂停音乐后,保留音乐 “进度“ 继续播放)最好用最详细的源码示例教程,适用于wechat列表点击后播放 mp3 wav 文件的需求
- 微信小程序 - TDesign 组件库环境搭建(Windows)
- 《微信小程序:开发入门及案例详解》—— 第2章 小程序开发核心 2.1 简介
- 《微信小程序:开发入门及案例详解》—— 2.6 小结
- 《微信小程序:开发入门及案例详解》—— 3.4 小结
- 微信小程序地图组件
- 前端微信小程序云开发基础
- 前端微信小程序云开发基础讲解
- 《移动App测试的22条军规》—App测试综合案例分析23.21节测试微信App的log提交
- 个人微信号接收不到服务器自动返回的消息-微信公众平台开发2
- 关于微信小程序保存文件的最佳解决方案
- 微信小程序——聊天小程序——01环境搭建
- 微信小程序不同机型底部安全区域问题
- 微信小程序获取openid用springboot
- 微信小程序实战–集阅读与电影于一体的小程序项目(四)
- 微信小程序表单校验WxValidate.js使用
- 微信小程序----团购或秒杀的批量倒计时实现
- 微信小程序中用户登录和登录态维护
- 微信小程序云开发 | 城市信息管理
- 亚洲移动社交三巨头“微信、LINE、Kakao”,这些年的相爱相杀