1、前言

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

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

2、技術棧

uniApp

vue3

微信開發者工具

Hbuilder X

axios

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的優勢

響應式系統提升

虛擬DOM重寫

更快，性能比Vue2快1.2~2倍(diff方法優化、靜態提升、時間偵聽器緩存、ssr渲染)

更小，按需編譯，體積比Vue2更小

組合API，加強API設計一致性，實現邏輯模塊化和重用

加強TypeScript支持

暴露了自定義渲染API

提高自身可維護性

5、微信開發者工具簡介

以下來自微信官方文檔：

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

6、Hbuilder X

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

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

輕巧 僅10余M的綠色發行包(不含插件)

極速 不管是啟動速度、大文檔打開速度、編碼提示，都極速響應 C++的架構性能遠超Java或Electron架構

vue開發強化 HX對vue做了大量優化投入，開發體驗遠超其他開發工具 詳見

小程序支持 國外開發工具沒有對中國的小程序開發優化，HX可新建uni-app 小程序等項目，為國人提供更高效工具

markdown利器 HX是唯一一個新建文件默認類型是markdown的編輯器，也是對md支持最強的編輯器 HX為md強化了眾多功能，請務必點擊【菜單-幫助-markdown語法示例】，快速掌握md及HX的強化技巧！

清爽護眼 HX的界面比其他工具更清爽簡潔，綠柔主題經過科學的腦疲勞測試，是最適合人眼長期觀看的主題界面

強大的語法提示 HX是中國唯一一家擁有自主IDE語法分析引擎的公司，對前端語言提供準確的代碼提示和轉到定義(Alt+鼠標左鍵)

高效極客工具 更強大的多光標、智能雙擊…讓字處理的效率大幅提升 詳見，

更強的json支持 現代js開發中大量json結構的寫法，HX提供了比其他工具更高效的操作

7、axios

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

特性

從瀏覽器中創建 XMLHttpRequests

從 node.js 創建 http 請求

支持 Promise API

攔截請求和響應

轉換請求數據和響應數據

取消請求

自動轉換 JSON 數據

客戶端支持防御 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 UIapp.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://yinfeng.work',timeout: 5000, // request timeoutcrossDomain: 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 = truelet res = await api.getLoveChat({"count": 16,"key": state.searchValue,"page": 1})state.loading = falseif (!res.code) {}state.list = res.dataconsole.log(res)},// 復制話術到剪切板copy(item) {uni.setClipboardData({data: item.answer})},// 標簽點擊tagClick(value) {state.searchValue = valuemethods.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;}});// 獲取bannerlet res = await api.getBanner()if (!res.code) {return}state.bannerList = res.data.map(item => {return {image: item.imgUrl,...item,}})// 只在微信小程序才顯示分享菜單// #ifdef MP-WEIXINwx.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哈

總結

以上是生活随笔為你收集整理的情人节福利，恋爱话术微信小程序它来了（开源，看了就懂~，2万字真香警告）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。