关于java:从0到1完成恋爱话术微信小程序的开发到发布开源看了就懂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 哈