情人節福利，戀愛話術微信小程序它來了（開源，看了就懂~，2萬字真香警告）

1、前言

在大家眼中，有沒有覺得女神就像冰山美人一樣？在聊天中對你是很高冷，或者是忽冷忽熱，愛理不理。很多男生面對這個問題都束手無策，或者女神不理你時，又急着發短消息過去了，結果女神根本不理睬你。那怎么辦呢？

其實女神也一樣，是情緒動物，她的情感由情緒控制着，不會像男人那樣理性、講邏輯。你說服不了她喜歡你，但通過調動她的情緒，你可以讓她喜歡你。所以會一些調情幽默的戀愛話術尤為重要，如果你能做到，讓女人快樂，開懷大笑，有時候又會悲傷，讓她的情緒為你所動，那么她對於你投入的情感會是有很多的。

2、技術棧

1. uniApp
2. vue3
3. 微信開發者工具
4. Hbuilder X
5. axios
6. uView ui框架

3、uniApp簡介

uni-app 是一個使用 Vue.js 開發所有前端應用的框架，開發者編寫一套代碼，可發布到iOS、Android、Web（響應式）、以及各種小程序（微信/支付寶/百度/頭條/飛書/QQ/快手/釘釘/淘寶）、快應用等多個平台。
uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序開發框架（詳見）、更好的App跨平台框架、更方便的H5開發框架。不管領導安排什么樣的項目，你都可以快速交付，不需要轉換開發思維、不需要更改開發習慣。

我們這里主要將一套代碼分別部署到h5和微信小程序上。

4、vue3簡介

Vue (讀音 /vjuː/，類似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue.js 的核心是一個允許采用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統，只關注視圖層，易於上手。所有東西都是響應式的。

4.1 vue3的優勢

1. 響應式系統提升
2. 虛擬DOM重寫
3. 更快，性能比Vue2快1.2~2倍(diff方法優化、靜態提升、時間偵聽器緩存、ssr渲染)
4. 更小，按需編譯，體積比Vue2更小
5. 組合API，加強API設計一致性，實現邏輯模塊化和重用
6. 加強TypeScript支持
7. 暴露了自定義渲染API
8. 提高自身可維護性

5、微信開發者工具簡介

以下來自微信官方文檔：

為了幫助開發者簡單和高效地開發和調試微信小程序，我們在原有的公眾號網頁調試工具的基礎上，推出了全新的 微信開發者工具，集成了公眾號網頁調試和小程序調試兩種開發模式。
使用公眾號網頁調試，開發者可以調試微信網頁授權和微信JS-SDK 詳情
使用小程序調試，開發者可以完成小程序的 API 和頁面的開發調試、代碼查看和編輯、小程序預覽和發布等功能。
為了更好的開發體驗，我們從視覺、交互、性能等方面對開發者工具進行升級，推出了 1.0 版本 下載。使用過程中若有問題或建議，可前往 #微信開發者工具社區 發帖反饋交流。

6、Hbuilder X

HBuilderX，H是HTML的首字母，Builder是構造者，X是HBuilder的下一代版本。我們也簡稱HX。 HX是輕如編輯器、強如IDE的合體版本。

讓我們簡單了解下HX的特點

1. 輕巧 僅10余M的綠色發行包(不含插件)
2. 極速 不管是啟動速度、大文檔打開速度、編碼提示，都極速響應 C++的架構性能遠超Java或Electron架構
3. vue開發強化 HX對vue做了大量優化投入，開發體驗遠超其他開發工具 詳見
4. 小程序支持 國外開發工具沒有對中國的小程序開發優化，HX可新建uni-app 小程序等項目，為國人提供更高效工具
5. markdown利器 HX是唯一一個新建文件默認類型是markdown的編輯器，也是對md支持最強的編輯器 HX為md強化了眾多功能，請務必點擊【菜單-幫助-markdown語法示例】，快速掌握md及HX的強化技巧！
6. 清爽護眼 HX的界面比其他工具更清爽簡潔，綠柔主題經過科學的腦疲勞測試，是最適合人眼長期觀看的主題界面
7. 強大的語法提示 HX是中國唯一一家擁有自主IDE語法分析引擎的公司，對前端語言提供准確的代碼提示和轉到定義(Alt+鼠標左鍵)
8. 高效極客工具 更強大的多光標、智能雙擊…讓字處理的效率大幅提升 詳見，
9. 更強的json支持 現代js開發中大量json結構的寫法，HX提供了比其他工具更高效的操作

7、axios

Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。

特性

1. 從瀏覽器中創建 XMLHttpRequests
2. 從 node.js 創建 http 請求
3. 支持 Promise API
4. 攔截請求和響應
5. 轉換請求數據和響應數據
6. 取消請求
7. 自動轉換 JSON 數據
8. 客戶端支持防御 XSRF

8、uView ui框架

uView是uni-app生態專用的UI框架，uni-app 是一個使用 Vue.js 開發所有前端應用的框架，開發者編寫一套代碼， 可發布到iOS、Android、H5、以及各種小程序(微信/支付寶/百度/頭條/QQ/釘釘)等多個平台(引言自uni-app網)。

9、創建微信小程序項目

9.1 注冊賬號

在微信公眾平台注冊小程序，官網微信公眾平台

按之前填的郵箱進去激活，然后完善相關信息


到此為止，我們的小程序算是注冊完成

9.2 查看小程序AppID(小程序ID)，后面項目提交代碼需要用到

10、創建uniapp項目

10.1 在Hbuilder X新建一個uniapp項目

10.2 配置vue3語法

10.3 配置微信小程序appId

appId獲取參考9.2步驟

10.4 安裝axios依賴

npm i axios

在控制台執行以上代碼

11、引入uView ui框架

11.1 導入uView插件

插件官網uView

11.2 main.js 引入 vk-uview-ui

import App from './App'

// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
	...App
})
app.$mount()
// #endif

// #ifdef VUE3
import {
	createSSRApp
} from 'vue'
// 引入 uView UI
import uView from './uni_modules/vk-uview-ui';
export function createApp() {
	const app = createSSRApp(App)
	// 使用 uView UI
	app.use(uView)
	return {
		app
	}
}
// #endif

11.3 App.vue 引入基礎樣式（注意style標簽需聲明scss屬性支持）

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style lang="scss">

	/* 引入uview */
	@import "./uni_modules/vk-uview-ui/index.scss";

	/*每個頁面公共css */
	html,
	body {
		width: 100%;
		height: 100%;
	}
</style>

11.4 uni.scss 引入全局 scss 變量文件

/** * 這里是uni-app內置的常用樣式變量 * * uni-app 官方擴展插件及插件市場（https://ext.dcloud.net.cn）上很多三方插件均使用了這些樣式變量 * 如果你是插件開發者，建議你使用scss預處理，並在插件代碼中直接使用這些變量（無需 import 這個文件），方便用戶通過搭積木的方式開發整體風格一致的App * */

/** * 如果你是App開發者（插件使用者），你可以通過修改這些變量來定制自己的插件主題，實現自定義主題功能 * * 如果你的項目同樣使用了scss預處理，你也可以直接在你的 scss 代碼中使用如下變量，同時無需 import 這個文件 */

/* 引入uview */
@import "@/uni_modules/vk-uview-ui/theme.scss";
/* 顏色變量 */

/* 行為相關顏色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;

/* 文字基本顏色 */
$uni-text-color:#333;//基本色
$uni-text-color-inverse:#fff;//反色
$uni-text-color-grey:#999;//輔助灰色，如加載更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable:#c0c0c0;

/* 背景顏色 */
$uni-bg-color:#ffffff;
$uni-bg-color-grey:#f8f8f8;
$uni-bg-color-hover:#f1f1f1;//點擊狀態顏色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩顏色

/* 邊框顏色 */
$uni-border-color:#c8c7cc;

/* 尺寸變量 */

/* 文字尺寸 */
$uni-font-size-sm:12px;
$uni-font-size-base:14px;
$uni-font-size-lg:16;

/* 圖片尺寸 */
$uni-img-size-sm:20px;
$uni-img-size-base:26px;
$uni-img-size-lg:40px;

/* Border Radius */
$uni-border-radius-sm: 2px;
$uni-border-radius-base: 3px;
$uni-border-radius-lg: 6px;
$uni-border-radius-circle: 50%;

/* 水平間距 */
$uni-spacing-row-sm: 5px;
$uni-spacing-row-base: 10px;
$uni-spacing-row-lg: 15px;

/* 垂直間距 */
$uni-spacing-col-sm: 4px;
$uni-spacing-col-base: 8px;
$uni-spacing-col-lg: 12px;

/* 透明度 */
$uni-opacity-disabled: 0.3; // 組件禁用態的透明度

/* 文章場景相關 */
$uni-color-title: #2C405A; // 文章標題顏色
$uni-font-size-title:20px;
$uni-color-subtitle: #555555; // 二級標題顏色
$uni-font-size-subtitle:26px;
$uni-color-paragraph: #3F536E; // 文章段落顏色
$uni-font-size-paragraph:15px;

12、配置axios

12.1 創建axios適配器，適用於uniapp

import axios from 'axios';
import settle from 'axios/lib/core/settle';
import buildURL from 'axios/lib/helpers/buildURL';

// axios適配器
axios.defaults.adapter = function(config) { 
    return new Promise((resolve, reject) => {
        uni.request({
            method: config.method.toUpperCase(),
            url: config.baseURL + buildURL(config.url, config.params, config.paramsSerializer),
            header: config.headers,
            data: config.data,
            dataType: config.dataType,
            responseType: config.responseType,
            sslVerify: config.sslVerify,
            complete: function complete(response) {
                response = {
                    data: response.data,
                    status: response.statusCode,
                    errMsg: response.errMsg,
                    header: response.header,
                    config: config
                };

                settle(resolve, reject, response);
            }
        })
    })
}

export default axios

12.2 創建axios攔截器

//封裝axios攔截器
import axios from './axios-adaptor.js'

const service = axios.create({
	baseURL: 'https://yin-feng.top',
	timeout: 5000, // request timeout
	crossDomain: true,
	headers: {
		'Content-Type': 'application/json; charset=utf-8'
	}
})
// 添加請求攔截器 
service.interceptors.request.use(
	config => {
		config.headers['source'] = 'wx'
		return config
	},
	error => {
		return Promise.reject(error)
	}
)
// 添加響應攔截器 
service.interceptors.response.use(
	response =>
	response.data,
	error => {
		return Promise.resolve(error)
	}
)
export default service

12.3 封裝后端api接口

import service from './http.interceptor.js'

// 封裝后端api接口
const api = {
	// 話術獲取
	getLoveChat: params => service.post('/open/getLoveChat', params),
	// 獲取輪播圖
	getBanner: () => service.post('/open/getBanner')
}

export default api

12.4 后端接口文檔

參考這篇博客撩妹神器戀愛話術庫，主要用到戀愛話術獲取接口。

13、編寫核心頁面

13.1 template html代碼編寫

<template>
	<view class="content">
		<u-swiper :list="bannerList" :effect3d="true" @click="clickBanner" height="245" bg-color="#e7f6ff" img-mode="aspectFit">
		</u-swiper>
		<view class="search">
			<u-search bg-color="#fff" v-model="searchValue" shape="round" placeholder="請輸入女生說的話" :clearabled="true" :show-action="true" @search="getLoveChat" @custom="getLoveChat" @clear="clear" :action-style="searchStyle" />
		</view>
		<view class="tag" v-if="!list.length">
			<u-tag text="戀愛話術" shape="circle" @click="tagClick('戀愛話術')" />
			<u-tag text="土味情話" shape="circle" color="#ff0000" @click="tagClick('土味情話')" />
			<u-tag text="情侶助手" shape="circle" @click="tagClick('情侶助手')" />
		</view>
		<view class="list">
			<view v-for="item in list" :key="item.female" class="item">
				<view class="title">
					<u-icon :style="iconStyle" size="1.5rem" name="/static/imgs/question.png" />:
					<text class="female">{{item.female}}</text>
				</view>
				<view class="answer" v-for="answer in item.answers" :key="answer.answer">
					<u-icon :style="iconStyle" v-if="answer.gender==1" size="1.5rem" name="/static/imgs/man.png" />
					<u-icon :style="iconStyle" v-if="answer.gender==2" size="1.5rem" name="/static/imgs/woman.png" />
					<text class="answerItem">: {{answer.answer}}</text>
					<u-button class="answerBtn" type="primary" plain size="mini" @click="copy(answer)">復制</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

13.2 核心方法編寫，主要使用vue3語法

<script>
	import {
		toRefs,
		reactive,
		onMounted
	} from 'vue'
	import api from '../../axios/http.api.js'
	export default {
		name: 'index',
		setup() {
			const state = reactive({
				// 輸入框的值
				searchValue: '',
				// 輸入框樣式
				searchStyle: {
					color: '#ff0000',
					border: '1px solid #DD6161',
					fontWeight: '500',
					padding: '1px',
					borderRadius: '15%',
				},
				// 圖標樣式
				iconStyle: {
					position: 'relative',
					top: '6px'
				},
				// 話術列表
				list: [],
				loading: false,
				// banner圖片數組
				bannerList: [],
			})
			const methods = reactive({
				// 獲取話術列表
				getLoveChat: async () => {
					state.loading = true
					let res = await api.getLoveChat({
						"count": 16,
						"key": state.searchValue,
						"page": 1
					})
					state.loading = false
					if (!res.code) {

					}
					state.list = res.data
					console.log(res)
				},
				// 復制話術到剪切板
				copy(item) {
					uni.setClipboardData({
						data: item.answer
					})
				},
				// 標簽點擊
				tagClick(value) {
					state.searchValue = value
					methods.getLoveChat()
				},
				// 輪播圖點擊
				clickBanner(index) {
					// 跳轉到內部窗口並且傳遞鏈接
					uni.navigateTo({
						url: `/component/WebView/WebView?url=${state.bannerList[index].hrefUrl}`
					})
				},
				// 清空輸入框
				clear() {
					state.searchValue = ''
					state.list = []
				}

			})
			onMounted(async () => {
				// 獲取剪切板內容
				uni.getClipboardData({
					success: function(res) {
						state.searchValue = res.data;
					}
				});
				// 獲取banner
				let res = await api.getBanner()
				if (!res.code) {
					return
				}
				state.bannerList = res.data.map(item => {
					return {
						image: item.imgUrl,
						...item,
					}
				})
				
				// 只在微信小程序才顯示分享菜單
				// #ifdef MP-WEIXIN
				wx.showShareMenu({
					withShareTicket: true,
					menus: ['shareAppMessage', 'shareTimeline']
				})
				// #endif

			})
			return {
				...toRefs(state),
				...toRefs(methods)
			}
		}
	}
</script>

13.3 css樣式代碼編寫

<style lang="less" scoped> .content {
		background-color: #f5ffff;
		padding: 10px 18px 0;
		font-size: 15px;
		font-family: cursive;
		height: 100%; .search {
			padding-top: 18px;
		}

		.tag {
			padding: 10px;
			display: flex;
			justify-content: space-between;
		}

		.list {
			height: calc(100vh - 230px);
			overflow-y: auto;
			margin-top: 10px;
			padding-top: 5px; .item {
				box-shadow: 0 2px 6px 2px rgba(255, 0, 0, 0.3);
				padding: 8px 0 10px;
				line-height: 27px;
				background-color: #ffebeb;
				margin-bottom: 15px;
				border-radius: 8px;
				letter-spacing: 2px; .title {
					padding-left: 10px; .female {
						font-weight: 500;
						color: #DD6161;
						font-size: 19px;
					}
				}

				.answer {
					position: relative;
					padding: 0 50px 0 10px; .answerBtn {
						position: absolute;
						bottom: 0;
						right: 5px;
					}
				}
			}
		}
	}
</style>

14、封裝webView，用於輪播圖頁面跳轉

<template>
	<view>
		<web-view :src="url"></web-view>
	</view>
</template>

<script>
	import {
		toRefs,
		reactive,
		onMounted
	} from 'vue'
	export default {
		name: 'web',
		data() {
			return {
				url: ''
			}
		},
		onLoad(e) {
			// 獲取傳遞過來的鏈接
			this.url = e.url
		}
	}
</script>

<style>

</style>

15、pages.json配置頁面路由

15.1 配置核心頁面路由

{
	"path": "pages/index/index",
	"style": {
		"navigationBarTitleText": "戀愛話術",
		"backgroundColor": "#eeeeee",
		"enablePullDownRefresh": false
	}
}

15.2 配置webView路由

{
    "path" : "component/WebView/WebView",
    "style" :                                                                                    
    {
        "navigationBarTitleText": "",
        "enablePullDownRefresh": false
    }
    
}

15.3 完整路由配置如下

16、微信小程序測試

16.1 編譯並啟動

16.2 在微信開發者工具測試下功能

17、h5頁面測試

17.1 編譯並啟動h5頁面

17.2 在瀏覽器點擊測試下功能，F12打開調試模式

18、發布微信小程序

18.1 編譯代碼

18.2 微信開發者工具上傳代碼

18.3 小程序后台提交審核

18.4 審核過后即可在這里點擊發布

18.4 配置小程序合法域名

18.6 兄弟們可以用微信掃碼體驗一下

19、發布h5頁面進行托管

兄弟們可以打開以下鏈接體驗一下

https://static-d3218181-4117-4af2-8b08-5fa0b2dc6760.bspapp.com

20、源碼地址

// 下了源碼的老鐵麻煩點個star哈
https://gitee.com/yinfeng-code/love-chat-wx.git

肝文不易，老鐵們三連一波支持下吧，謝謝大家了~
下了源碼的老鐵麻煩點個star哈