微信小程序实战，用vue3实现每日浪漫情话推荐~

1、前言

之前做了个恋爱话术微信小法式，满足了平常聊天的需要，实现高情商的恋爱聊天。比来也完成了话术库的优化更新，新增30万条话术数据，同时利用了分词技术，婚配更完善。
但比来忽然发现，天天早上给女朋友发一段优美情话可以让她高兴一成天，但无法自己的说话水平确切有限，不能随手拈来，实在让人有点不爽。
不外法子总比困难多，作为高情商的法式猿，来历于平常生活的需求常常是我们最大的动力，必须盘他，所以想着在之前的恋爱话术小法式上在加一个逐日情话保举的功用。
希望这个法式对其他单身大概恋爱中的兄弟们有所帮助，也希望兄弟们关注加三连支持一波哈~~~

2、保举接口简介

==辣鸡办事器，兄弟们轻点调哈==
浪漫保举情话开放接口

接口地址:https://yin-feng.top/open/getRecommendLove
请求方式:POST
请求数据范例:application/json
响应数据范例:*/*
请求参数:

1. {}

复制代码

响应参数:


响应示例:

1. [
2.     {
3.         "content": "",
4.         "id": 0,
5.         "score": 0,
6.         "title": ""
7.     }
8. ]

复制代码

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 的顶部设备，而是自己做顶部选项卡。
  

新增浪漫情话页面设置

1. {
2.             "path": "pages/recommend/recommend",
3.             "style": {
4.                 "navigationBarTitleText": "浪漫情话",
5.                 "backgroundColor": "#eeeeee",
6.                 "enablePullDownRefresh": false
7.             }
9.         }

复制代码

增加两个tab标签

1. "tabBar": {
2.         "color": "#7A7E83",
3.         "selectedColor": "#0055ff",
4.         "borderStyle": "black",
5.         "backgroundColor": "#ffffe1",
6.         "height":"60px",
7.         "fontSize":"18px",
8.         "list": [
9.             {
10.                 "pagePath": "pages/recommend/recommend",
11.                 "iconPath": "static/imgs/love1.png",
12.                 "selectedIconPath": "static/imgs/love2.png",
13.                 "text": "浪漫情话"
14.             },
15.             {
16.                 "pagePath": "pages/index/index",
17.                 "iconPath": "static/imgs/爱心1.png",
18.                 "selectedIconPath": "static/imgs/爱心2.png",
19.                 "text": "话术搜索"
20.             }
22.         ]
23.     }

复制代码

完整的page.json文件

1. {
2.     "pages": [ //pages数组中第一项暗示利用启动页，参考：https://uniapp.dcloud.io/collocation/pages
3.         {
4.             "path": "pages/recommend/recommend",
5.             "style": {
6.                 "navigationBarTitleText": "浪漫情话",
7.                 "backgroundColor": "#eeeeee",
8.                 "enablePullDownRefresh": false
9.             }
11.         },
12.         {
14.             "path": "pages/index/index",
15.             "style": {
16.                 "navigationBarTitleText": "恋爱话术",
17.                 "backgroundColor": "#eeeeee",
18.                 "enablePullDownRefresh": false
19.             }
20.         }, {
21.             "path": "component/WebView/WebView",
22.             "style": {
23.                 "navigationBarTitleText": "",
24.                 "enablePullDownRefresh": false
25.             }
27.         }
29.     ],
30.     "tabBar": {
31.         "color": "#7A7E83",
32.         "selectedColor": "#0055ff",
33.         "borderStyle": "black",
34.         "backgroundColor": "#ffffe1",
35.         "height":"60px",
36.         "fontSize":"18px",
37.         "list": [
38.             {
39.                 "pagePath": "pages/recommend/recommend",
40.                 "iconPath": "static/imgs/love1.png",
41.                 "selectedIconPath": "static/imgs/love2.png",
42.                 "text": "浪漫情话"
43.             },
44.             {
45.                 "pagePath": "pages/index/index",
46.                 "iconPath": "static/imgs/爱心1.png",
47.                 "selectedIconPath": "static/imgs/爱心2.png",
48.                 "text": "话术搜索"
49.             }
51.         ]
52.     },
53.     "globalStyle": {
54.         "navigationBarTextStyle": "black",
55.         "navigationBarTitleText": "恋爱话术",
56.         "navigationBarBackgroundColor": "#ffffe1",
57.         "backgroundColor": "#f5ffff"
58.     }
59. }

复制代码

在这里插入图片描写

3.2 封装api接口

首要在==http.api.js==里面设置，这个文件之前也包括了我们的话术搜索接口

1. import service from './http.interceptor.js'
3. const api = {
4.     // 话术搜索
5.     getLoveChat: params => service.post('/open/getLoveChat', params),
6.     getBanner: () => service.post('/open/getBanner'),
7.     // 浪漫情话保举
8.     getRecommendLove: () => service.post('/open/getRecommendLove'),
9.     loveScore: params => service.post('/open/loveScore', params),
10. }
12. export default api

复制代码

3.3 编写浪漫情话页面

我们还是利用vue3加uniapp的语法停止页面开辟，同时为了使页面更优美，封装一个瀑布流组件停止衬着数据。下图就是我们要实现的大致结果

在这里插入图片描写

3.3.1 封装瀑布流组件

1. <template>
2.     <view class="u-waterfall">
3.         <view id="u-left-column" class="u-column">
4.             <slot name="left" :leftList="leftList"></slot>
5.         </view>
6.         <view id="u-right-column" class="u-column">
7.             <slot name="right" :rightList="rightList"></slot>
8.         </view>
9.     </view>
10. </template>
12. <script>
13.     export default {
14.         name: "waterfall",
15.         props: {
16.             value: {
17.                 // 瀑布流数据
18.                 type: Array,
19.                 required: true,
20.                 default: function() {
21.                     return [];
22.                 }
23.             }
24.         },
25.         data() {
26.             return {
27.                 leftList: [],
28.                 rightList: [],
29.                 tempList: []
30.             }
31.         },
32.         watch: {
33.             copyFlowList(nVal, oVal) {
34.                 this.tempList = this.cloneData(this.copyFlowList);
35.                 this.leftList = []
36.                 this.rightList = []
37.                 this.splitData();
38.             }
39.         },
40.         mounted() {
41.             this.tempList = this.cloneData(this.copyFlowList);
42.             this.splitData();
43.         },
44.         computed: {
45.             // 破坏flowList变量的援用，否则watch的成果新旧值是一样的
46.             copyFlowList() {
47.                 return this.cloneData(this.value);
48.             }
49.         },
50.         methods: {
51.             async splitData() {
52.                 if (!this.tempList.length) return;
53.                 let leftRect = await this.$uGetRect('#u-left-column');
54.                 let rightRect = await this.$uGetRect('#u-right-column');
55.                 // 假如左侧小于或即是右侧，就增加到左侧，否则增加到右侧
56.                 let item = this.tempList[0];
57.                 // 处理屡次快速上拉后，能够数据会乱的题目，由于经过上面的两个await节点查询阻塞一按时候，加上前面的按时器干扰
58.                 // 数组能够酿成[]，致使此item值能够为undefined
59.                 if (!item) return;
60.                 if (leftRect.height < rightRect.height) {
61.                     this.leftList.push(item);
62.                 } else if (leftRect.height > rightRect.height) {
63.                     this.rightList.push(item);
64.                 } else {
65.                     // 这里是为了保证第一和第二张增加时，左右都能有内容
66.                     // 由于增加第一张，现实行列的高度能够还是0，这时需要按照行列元素长度判定下一个该放哪边
67.                     if (this.leftList.length <= this.rightList.length) {
68.                         this.leftList.push(item);
69.                     } else {
70.                         this.rightList.push(item);
71.                     }
72.                 }
73.                 // 移除姑且列表的第一项
74.                 this.tempList.splice(0, 1);
75.                 // 假如姑且数组还稀有据，继续循环
76.                 if (this.tempList.length) {
77.                     this.splitData();
78.                 } else {
79.                     // 在这里模拟触发 我们界说的全局事务 实现数据通讯的目标
80.                     let height = (leftRect.height > rightRect.height ? leftRect.height : rightRect.height) + 120
81.                     uni.$emit('swiperHeightChange', height + 'px')
82.                 }
84.             },
85.             // 复制而不是援用工具和数组
86.             cloneData(data) {
87.                 return JSON.parse(JSON.stringify(data));
88.             },
89.         }
90.     }
91. </script>
93. <style lang="scss" scoped>
94.     @mixin vue-flex($direction: row) {
95.         /* #ifndef APP-NVUE */
96.         display: flex;
97.         flex-direction: $direction;
98.         /* #endif */
99.     }
101.     .u-waterfall {
102.         @include vue-flex;
103.         flex-direction: row;
104.         align-items: flex-start;
105.     }
107.     .u-column {
108.         @include vue-flex;
109.         flex: 1;
110.         flex-direction: column;
111.         height: auto;
112.     }
114.     .u-image {
115.         width: 100%;
116.     }
117. </style>

复制代码

3.3.2 template代码编写

这里在引入瀑布流组件以后可间接在html里面利用

1. <template>
2.     <view>
3.         <view class="change" @click="changeContent">
4.             没找到想要的？赶紧点击这里
5.             <text class="change-btn">换一批</text>
6.             <view class="card">
7.                 点击下方卡片可间接复制
8.             </view>
9.         </view>
10.         <waterfall :value="dataList">
11.             <template v-slot:left="left">
12.                 <view v-for="item in left.leftList" :key="item.id" class="left-content" @click="copy(item)">
13.                     <view class="item">
14.                         {{item.content}}
15.                     </view>
16.                 </view>
17.             </template>
18.             <template v-slot:right="right">
19.                 <view v-for="item in right.rightList" :key="item.id" class="right-content" @click="copy(item)">
20.                     <view class="item">
21.                         {{item.content}}
22.                     </view>
23.                 </view>
24.             </template>
25.         </waterfall>
26.     </view>
27. </template>

复制代码

3.3.3 js焦点方式编写

关键代码也不多，主如果一些请求数据的方式和响应式变量的界说。

1. <script>
2.     import {
3.         toRefs,
4.         reactive,
5.         onMounted
6.     } from 'vue'
7.     import waterfall from '../../component/waterfall/index.vue'
8.     import api from '../../axios/http.api.js'
9.     export default {
10.         name: 'content',
11.         components: {
12.             waterfall
13.         },
14.         setup() {
15.             const state = reactive({
16.                 dataList: [],
17.                 loading: false,
18.             })
19.             const methods = reactive({
20.                 getRecommendLove: async () => {
21.                     state.loading = true
22.                     let res = await api.getRecommendLove()
23.                     state.loading = false
24.                     if (res.code) {
25.                         uni.showToast({
26.                             title: res.msg,
27.                             icon: 'none',
28.                             position: 'top'
29.                         })
30.                     }
31.                     state.dataList = res.data
32.                 },
33.                 copy(item) {
34.                     // 复制话术到剪切板
35.                     uni.setClipboardData({
36.                         data: item.content
37.                     })
38.                     methods.score(item.id)
39.                 },
40.                 // 换一批
41.                 changeContent() {
42.                     methods.getRecommendLove()
43.                 },
44.                 // 打分
45.                 async score(id) {
46.                     let res = await api.loveScore({
47.                         id
48.                     })
49.                     if (res.code) {
50.                         uni.showToast({
51.                             title: res.msg,
52.                             icon: 'none',
53.                             position: 'top'
54.                         })
55.                     }
56.                 }
58.             })
59.             onMounted(() => {
60.                 methods.getRecommendLove()
61.                 // 分享菜单
62.                 wx.showShareMenu({
63.                     withShareTicket: true,
64.                     menus: ['shareAppMessage', 'shareTimeline']
65.                 })
67.             })
68.             return {
69.                 ...toRefs(state),
70.                 ...toRefs(methods)
71.             }
72.         }
73.     }
74. </script>

复制代码

3.3.4 css款式代码编写

我们究竟不是专业的前端，所以款式就随意对付一下就行，兄弟们不要介意哈

1. <style lang="less" scoped>
2.     .change {
3.         width: 100%;
4.         height: 120px;
5.         border-bottom: 2px #aaaaff solid;
6.         border-radius: 0 0 50px 50px;
7.         background-size: 100% 100%;
8.         opacity: 0.8;
9.         padding-top: 45px;
10.         text-align: center;
11.         font-size: 20px;
12.         color: #000000;
13.         background-image: url(../../static/imgs/img4.png);
15.         .change-btn {
16.             display: inline-block;
17.             padding: 2px;
18.             color: red;
19.         }
21.         .card {
22.             padding-top: 12px;
23.             font-size: 13px;
24.         }
25.     }
27.     .left-content {
28.         margin: 15px 5px 15px 10px;
29.         padding: 8px;
30.         border-radius: 6px;
31.         background: #aaffff linear-gradient(44deg, #aaffff 0%, #F4F8FF 100%);
32.         font-size: 16px;
33.         letter-spacing: 5px;
35.         .item {
36.             margin-bottom: 10px;
37.         }
38.     }
40.     .right-content {
41.         margin: 15px 10px 15px 5px;
42.         padding: 8px;
43.         border-radius: 6px;
44.         background: #aaffff linear-gradient(44deg, #aaffff 0%, #F4F8FF 100%);
45.         font-size: 16px;
46.         letter-spacing: 5px;
48.         .item {
49.             margin-bottom: 10px;
50.         }
51.     }
52. </style>

复制代码

在这里插入图片描写

4、公布微信小法式

公布流程参考这篇博客恋爱话术微信小法式

在这里插入图片描写

兄弟们可以扫描下面的太阳码停止体验哈



在这里插入图片描写

5、总结

源码地址在这哈，会连结一向开源，希望兄弟们多多支持，==下了源码的老铁麻烦点个star哈==

1. // 下了源码的老铁麻烦点个star哈
2. https://gitee.com/yinfeng-code/love-chat-wx.git

复制代码

肝文不易，希望对其他单身大概恋爱中的兄弟们有所帮助，也希望兄弟们==关注加三连==支持一波哈