微信小程序实战,用vue3实现每日浪漫情话推荐~
浪漫情话微信小程序太阳码在这里,欢迎体验哈
1、前言
之前做了个恋爱话术微信小程序,满足了日常聊天的需要,实现高情商的恋爱聊天。最近也完成了话术库的优化更新,新增30万条话术数据,同时使用了分词技术,匹配更完善。
但最近突然发现,每天早上给女朋友发一段优美情话可以让她开心一整天,但无奈自己的语言水平确实有限,不能随手拈来,着实让人有点不爽。
不过办法总比困难多,作为高情商的程序猿,来源于日常生活的需求往往是咱们最大的动力,必须盘他,所以想着在之前的恋爱话术小程序上在加一个每日情话推荐的功能。
希望这个程序对其他单身或者恋爱中的兄弟们有所帮助,也希望兄弟们关注加三连支持一波哈~~~
2、推荐接口简介
辣鸡服务器,兄弟们轻点调哈
浪漫推荐情话开放接口
接口地址:https://yin-feng.top/open/getRecommendLove
请求方式:POST
请求数据类型:application/json
响应数据类型:*/*
请求参数:
{}
响应参数:
参数名称 | 参数说明 | 类型 | schema |
---|---|---|---|
content | 内容 | string | |
id | id | integer(int64) | integer(int64) |
score | 分数 | integer(int32) | integer(int32) |
title | 标题 | string |
响应示例:
[{"content": "","id": 0,"score": 0,"title": ""}
]
3、前端页面开发
老样子,咱们还是使用uniapp框架来开发,uniapp的介绍就不多说了哈。
3.1 配置pages.json文件
我们这次打算配两个菜单,包括浪漫情话推荐和话术搜索。主要在pages.json里面就行配置。
pages.json 文件用来对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。它类似微信小程序中app.json的页面管理部分。
在 pages.json 中提供 tabBar 配置,不仅仅是为了方便快速开发导航,更重要的是在App和小程序端提升性能。在这两个平台,底层原生引擎在启动时无需等待js引擎初始化,即可直接读取 pages.json 中配置的 tabBar 信息,渲染原生tab。
官方文档参考tabBar
特别注意
- 当设置 position 为 top 时,将不会显示 icon
- tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。
- tabbar 切换第一次加载时可能渲染不及时,可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花(hello uni-app使用了此方式)
- tabbar 的页面展现过一次后就保留在内存中,再次切换 tabbar 页面,只会触发每个页面的onShow,不会再触发onLoad。
- 顶部的 tabbar 目前仅微信小程序上支持。需要用到顶部选项卡的话,建议不使用 tabbar 的顶部设置,而是自己做顶部选项卡。
新增浪漫情话页面配置
{"path": "pages/recommend/recommend","style": {"navigationBarTitleText": "浪漫情话","backgroundColor": "#eeeeee","enablePullDownRefresh": false}}
添加两个tab标签
"tabBar": {"color": "#7A7E83","selectedColor": "#0055ff","borderStyle": "black","backgroundColor": "#ffffe1","height":"60px","fontSize":"18px","list": [{"pagePath": "pages/recommend/recommend","iconPath": "static/imgs/love1.png","selectedIconPath": "static/imgs/love2.png","text": "浪漫情话"},{"pagePath": "pages/index/index","iconPath": "static/imgs/爱心1.png","selectedIconPath": "static/imgs/爱心2.png","text": "话术搜索"}]}
完整的page.json文件
{"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages{"path": "pages/recommend/recommend","style": {"navigationBarTitleText": "浪漫情话","backgroundColor": "#eeeeee","enablePullDownRefresh": false}},{"path": "pages/index/index","style": {"navigationBarTitleText": "恋爱话术","backgroundColor": "#eeeeee","enablePullDownRefresh": false}}, {"path": "component/WebView/WebView","style": {"navigationBarTitleText": "","enablePullDownRefresh": false}}],"tabBar": {"color": "#7A7E83","selectedColor": "#0055ff","borderStyle": "black","backgroundColor": "#ffffe1","height":"60px","fontSize":"18px","list": [{"pagePath": "pages/recommend/recommend","iconPath": "static/imgs/love1.png","selectedIconPath": "static/imgs/love2.png","text": "浪漫情话"},{"pagePath": "pages/index/index","iconPath": "static/imgs/爱心1.png","selectedIconPath": "static/imgs/爱心2.png","text": "话术搜索"}]},"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "恋爱话术","navigationBarBackgroundColor": "#ffffe1","backgroundColor": "#f5ffff"}
}
3.2 封装api接口
主要在http.api.js里面配置,这个文件之前也包含了咱们的话术搜索接口
import service from './http.interceptor.js'const api = {// 话术搜索getLoveChat: params => service.post('/open/getLoveChat', params),getBanner: () => service.post('/open/getBanner'),// 浪漫情话推荐getRecommendLove: () => service.post('/open/getRecommendLove'),loveScore: params => service.post('/open/loveScore', params),
}export default api
3.3 编写浪漫情话页面
咱们还是使用vue3加uniapp的语法进行页面开发,同时为了使页面更优美,封装一个瀑布流组件进行渲染数据。下图就是咱们要实现的大致效果
3.3.1 封装瀑布流组件
<template><view class="u-waterfall"><view id="u-left-column" class="u-column"><slot name="left" :leftList="leftList"></slot></view><view id="u-right-column" class="u-column"><slot name="right" :rightList="rightList"></slot></view></view>
</template><script>export default {name: "waterfall",props: {value: {// 瀑布流数据type: Array,required: true,default: function() {return [];}}},data() {return {leftList: [],rightList: [],tempList: []}},watch: {copyFlowList(nVal, oVal) {this.tempList = this.cloneData(this.copyFlowList);this.leftList = []this.rightList = []this.splitData();}},mounted() {this.tempList = this.cloneData(this.copyFlowList);this.splitData();},computed: {// 破坏flowList变量的引用,否则watch的结果新旧值是一样的copyFlowList() {return this.cloneData(this.value);}},methods: {async splitData() {if (!this.tempList.length) return;let leftRect = await this.$uGetRect('#u-left-column');let rightRect = await this.$uGetRect('#u-right-column');// 如果左边小于或等于右边,就添加到左边,否则添加到右边let item = this.tempList[0];// 解决多次快速上拉后,可能数据会乱的问题,因为经过上面的两个await节点查询阻塞一定时间,加上后面的定时器干扰// 数组可能变成[],导致此item值可能为undefinedif (!item) return;if (leftRect.height < rightRect.height) {this.leftList.push(item);} else if (leftRect.height > rightRect.height) {this.rightList.push(item);} else {// 这里是为了保证第一和第二张添加时,左右都能有内容// 因为添加第一张,实际队列的高度可能还是0,这时需要根据队列元素长度判断下一个该放哪边if (this.leftList.length <= this.rightList.length) {this.leftList.push(item);} else {this.rightList.push(item);}}// 移除临时列表的第一项this.tempList.splice(0, 1);// 如果临时数组还有数据,继续循环if (this.tempList.length) {this.splitData();} else {// 在这里模拟触发 我们定义的全局事件 实现数据通信的目的let height = (leftRect.height > rightRect.height ? leftRect.height : rightRect.height) + 120uni.$emit('swiperHeightChange', height + 'px')}},// 复制而不是引用对象和数组cloneData(data) {return JSON.parse(JSON.stringify(data));},}}
</script><style lang="scss" scoped>@mixin vue-flex($direction: row) {/* #ifndef APP-NVUE */display: flex;flex-direction: $direction;/* #endif */}.u-waterfall {@include vue-flex;flex-direction: row;align-items: flex-start;}.u-column {@include vue-flex;flex: 1;flex-direction: column;height: auto;}.u-image {width: 100%;}
</style>
3.3.2 template代码编写
这里在引入瀑布流组件之后可直接在html里面使用
<template><view><view class="change" @click="changeContent">没找到想要的?赶紧点击这里<text class="change-btn">换一批</text><view class="card">点击下方卡片可直接复制</view></view><waterfall :value="dataList"><template v-slot:left="left"><view v-for="item in left.leftList" :key="item.id" class="left-content" @click="copy(item)"><view class="item">{{item.content}}</view></view></template><template v-slot:right="right"><view v-for="item in right.rightList" :key="item.id" class="right-content" @click="copy(item)"><view class="item">{{item.content}}</view></view></template></waterfall></view>
</template>
3.3.3 js核心方法编写
关键代码也不多,主要是一些请求数据的方法和响应式变量的定义。
<script>import {toRefs,reactive,onMounted} from 'vue'import waterfall from '../../component/waterfall/index.vue'import api from '../../axios/http.api.js'export default {name: 'content',components: {waterfall},setup() {const state = reactive({dataList: [],loading: false,})const methods = reactive({getRecommendLove: async () => {state.loading = truelet res = await api.getRecommendLove()state.loading = falseif (res.code) {uni.showToast({title: res.msg,icon: 'none',position: 'top'})}state.dataList = res.data},copy(item) {// 复制话术到剪切板uni.setClipboardData({data: item.content})methods.score(item.id)},// 换一批changeContent() {methods.getRecommendLove()},// 打分async score(id) {let res = await api.loveScore({id})if (res.code) {uni.showToast({title: res.msg,icon: 'none',position: 'top'})}}})onMounted(() => {methods.getRecommendLove()// 分享菜单wx.showShareMenu({withShareTicket: true,menus: ['shareAppMessage', 'shareTimeline']})})return {...toRefs(state),...toRefs(methods)}}}
</script>
3.3.4 css样式代码编写
咱们毕竟不是专业的前端,所以样式就随便应付一下就行,兄弟们不要介意哈
<style lang="less" scoped>.change {width: 100%;height: 120px;border-bottom: 2px #aaaaff solid;border-radius: 0 0 50px 50px;background-size: 100% 100%;opacity: 0.8;padding-top: 45px;text-align: center;font-size: 20px;color: #000000;background-image: url(../../static/imgs/img4.png);.change-btn {display: inline-block;padding: 2px;color: red;}.card {padding-top: 12px;font-size: 13px;}}.left-content {margin: 15px 5px 15px 10px;padding: 8px;border-radius: 6px;background: #aaffff linear-gradient(44deg, #aaffff 0%, #F4F8FF 100%);font-size: 16px;letter-spacing: 5px;.item {margin-bottom: 10px;}}.right-content {margin: 15px 10px 15px 5px;padding: 8px;border-radius: 6px;background: #aaffff linear-gradient(44deg, #aaffff 0%, #F4F8FF 100%);font-size: 16px;letter-spacing: 5px;.item {margin-bottom: 10px;}}
</style>
4、发布微信小程序
发布流程参考这篇博客恋爱话术微信小程序
兄弟们可以扫描下面的太阳码进行体验哈
5、总结
源码地址在这哈,会保持一直开源,希望兄弟们多多支持,下了源码的老铁麻烦点个star哈
// 下了源码的老铁麻烦点个star哈
https://gitee.com/yinfeng-code/love-chat-wx.git
肝文不易,希望对其他单身或者恋爱中的兄弟们有所帮助,也希望兄弟们关注加三连支持一波哈
微信小程序实战,用vue3实现每日浪漫情话推荐~相关推荐
- axure 小程序 网盘_万门大学微信小程序实战开发特训班【完结】网盘高清全套最新系列精品课程...
万门大学微信小程序实战开发特训班[完结]网盘高清全套最新系列精品课程 课 程 简介 我买了这个课程,课程很有价值,我们通过链接或百度网盘群的形式在共享资料库中与您共享,需要万门大学微信小程序实战开发特 ...
- 微信小程序实战篇:商品属性联动选择(案例)
本期的微信小程序实战篇来做一个电商网站经常用到的-商品属性联动选择的效果,素材参考了一点点奶茶. 效果演示: 商品属性联动.gif 代码示例 1.commodity.xml <!-- <v ...
- 微信小程序实战开发视频
微信小程序实战开发视频: 链接:http://pan.baidu.com/s/1jIAwBLs 密码:ej3b
- 小程序swiper怎么让内容撑开高度_[视频]微信小程序实战优购商城,涵盖你所学的技能点...
很多友友都在找视频教程学习,IT技术教程分享网[http://www.mano100.cn]已经为你收集了各种各样的视频教程,不用再到处找视频教程学习了.无论是免费的,还是收费的,都在这里了.只要你注 ...
- 微信小程序实战 购物车功能
代码地址如下: http://www.demodashi.com/demo/12400.html 一.准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.com ...
- [转]微信小程序之购物车 —— 微信小程序实战商城系列(5)
本文转自:http://blog.csdn.net/michael_ouyang/article/details/70755892 续上一篇的文章:微信小程序之商品属性分类 -- 微信小程序实战商城 ...
- 微信小程序实战篇-下拉刷新与加载更多
下拉刷新 实现下拉刷新目前能想到的有两种方式 调用系统的API,系统有提供下拉刷新的API接口 下拉刷新API.png 监听scroll-view,自定义下拉刷新,还记得scroll-view里面有一 ...
- 微信小程序之顶部导航栏(选项卡)实例 —— 微信小程序实战系列(1)
需求:顶部导航栏 效果图: wxml: <!--导航条--> <view class="navbar"><text wx:for="{{na ...
- 微信小程序实战教程-闫涛-专题视频课程
微信小程序实战教程-38472人已学习 课程介绍 介绍微信小程序API,包括页面布局.网络交互.媒体文件.本地缓存.地理位置.WebSocket和传感器技术,后以翼健康为模板,开发一套 ...
最新文章
- 【 FPGA 】时钟域问题简介
- 全网都在看的Jmeter精选原创文章
- 我的世界服务器组件怎么用,我的世界:两款服务器的组件功能,种树也有学问,种树技巧!...
- Myeclipse XXX.jsp文件 中文乱码问题 (同时适用于mac版)
- Can't use function return value in write context 使用empty遇到报错
- 【TSP】基于matlab蚁群算法求解旅行商问题【含Matlab源码 1130期】
- 软考历年真题以及真题试卷
- Solidworks介绍与 solidwords 2018安装过程
- Java顺序结构综合练习三之金融投资收益计算
- c语言输出字母空心菱形,C语言实现打印菱形和空心菱形
- 大数据分页实现与性能优化【转】
- iTop开源 ITSM/ITIL 系统部署(16 图)
- Android Botton 事件
- 如何高效设计游戏——从抽奖模型到圆桌算法(上)
- 软件工程计算机水平 推荐表,软件工程就业推荐表2014届.doc
- 华为推送 简介 集成 MD
- EDA虚拟机分享2020版本(Synopsys2020)
- mysql 验证用户名重复,Ajax案例——检验用户名是否重复
- 申请支付宝-Alipay 密钥流程
- Selenium3自动化测试【21】find_element定位元素
热门文章
- 怎样进行软件测试结果分析,具体实例教你如何做LoadRunner结果分析
- linux docker自动启动命令行,docker容器内服务随容器自启动
- 对datatable类型列名排序_表格数据的排序功能(支持多列)
- 在QEMU硬件环境中启动 kernel 2.6 + busybox as rootfs
- android arcgis多变形边框颜色,ArcGIS制图技巧—边框的选择
- 华纳传媒和Discovery合并交易将提前完成 华纳CEO将在交易之前辞职
- 王思聪名下企业被拍卖1100万债权,此前还债20亿 网友:拍下等于“接盘侠”?...
- 刷抖音18.5G、看视频22.5G,国美通报员工上班摸鱼:回应来了
- 北京严厉打击违规发布网络房源信息行为 18家机构被查处
- 消息称荣耀7月发布年度旗舰 或用上旗舰级芯片骁龙 888