前端开发_全栈开发_华子的博客

农场项目

Mon, 13 Mar 2023 22:24:16 +0800

项目简介

农场项目是一个h5端虚拟养殖家禽的小游戏

所用技术栈

前端：uniapp、uview、axios、canvas

后端：thinkphp5.1

开发周期

18天

项目截图

uniapp-防抖之发送验证码

Mon, 13 Mar 2023 21:43:45 +0800

什么是防抖？

防抖：简单地说，就是当一个动作连续触发，只执行最后一次。

常用场景：前端发送短信验证码（用户快速连续点击发送验证码按钮，只执行一次发送验证码事件）

uniapp代码

<template>
	<view class="">
		<view class="line">
			<input type="text" v-model="phone" placeholder="请输入您的手机号 " class="input">
		</view>
		<view class="line">
			<input type="text" v-model="sms_code" placeholder="请输入短信验证码 " class="input">
			<text class="get-sms" @click="getSms()" v-if="time >= 60">获取验证码</text>
			<text class="get-sms" v-else>{{time}}S</text>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				request: false,
				phone: "",
				sms_code: '',
				timer: null,
				time: 60,
			};
		},
		methods: {
			//发送验证码
			getSms() {
				if (!this.phone) return this.fail("请输入手机号码")
				let params = {
					phone: this.phone,
				}

				// 防抖-开始
				if (this.request) return false;
				this.request = true;
				setTimeout(() => {
					this.request = false;
				}, 2000)
				// 防抖结束

				this.api.post("/login/sendCode", { params: params }).then(res => {
					this.success("验证码发送成功")
					clearInterval(this.timer)
					this.timer = setInterval(() => {
						if (this.time > 0) {
							this.time--
						} else {
							clearInterval(this.timer)
							this.time = 60
						}
					}, 1000)
				}).catch(err => {
					this.apiErr(err)
				})
			},
		}
	}
</script>

外包项目-外卖跑腿

Mon, 06 Mar 2023 17:46:46 +0800

项目简介

春香外卖小程序是我在某外包公司时做得，主要负责前端搭建及接口对接工作

所用技术栈

小程序前端：uniapp、uview、腾讯im即时通信、腾讯地图等

后端：thinkphp5.1

开发周期

前端+对接口20天

项目截图

uniapp-uni.reques请求拦截封装

Fri, 03 Mar 2023 17:53:01 +0800

1、config.js 在项目根目录创建config/config.js

const config  ={
	baseURL: 'https://xxx.xxx.com', //接口域名
}

if (process.env.NODE_ENV === 'development') { //开发模式
	config.baseURL =  "https://chunxiang.yunzanet.com" //接口域名

}
export default config

2、在项目根目录创建api目录（根据个人习惯命名），并创建index.js

index.js代码如下

import store from '@/store/index'
import Vue from 'vue';

const globalRequest = (api, method, options) => {
	let loadingTimer = null;
	const option = {
		loading: true, //是否显示loading
		delayed: true, //是否延时显示loading
		loading_text: 'loading', //是否延时显示loading
		params: {}
	}
	if (options) {
		if (options.loading !== undefined) option.loading = options.loading
		if (options.delayed !== undefined) option.delayed = options.delayed
		if (options.loading_text !== undefined) option.loading_text = options.loading_text
		if (options.params !== undefined) option.params = options.params
	}

	// 判断是不是全域名
	let regex = /^http/;
	let request_url = Vue.prototype.$config.baseURL + api;
	if (regex.test(api)) request_url = api
	const headers = {
		// "Content-Type": 'application/x-www-form-urlencoded',
		"token": uni.getStorageSync('token') || '', //token
	}

	if (option.loading && !option.delayed) {
		// 立即显示loading
		store.commit("loadingShow", option.loading_text)
	} else if (option.loading && option.delayed) {
		// 延时显示loading
		loadingTimer = setTimeout(() => {
			console.log("显示弹窗");
			store.commit("loadingShow", option.loading_text)
		}, 1000)
	}

	return new Promise(function(resolve, reject) {
		uni.request({
			url: request_url,
			method: method,
			data: option.params,
			dataType: 'json',
			withCredenttials: true,
			header: headers,
			success: function(res) {
				clearTimeout(loadingTimer)
				store.commit("loadingHide") //隐藏loading
				if (res.statusCode == 200) { //浏览器200
					switch (res.data.code) {
						case 1:
							resolve(res.data)
							break;
						case 200:
							resolve(res.data)
							break;
						case 10001:
							store.commit("loginout")
							uni.reLaunch({
								url: "/pages/login/index"
							})
							reject(res.data)
							break;
						case 1003:
							store.commit("loginout")
							uni.reLaunch({
								url: "/pages/login/index"
							})
							reject(res.data)
							break;
						case 2005:
							store.commit("loginout")
							uni.reLaunch({
								url: "/pages/login/index"
							})
							reject(res.data)
							break;
						default:
							reject(res.data) // 返回失败
							break;
					}
				} else if (res.statusCode == 401) {
					store.commit("loginout")
					uni.reLaunch({
						url: "/pages/login/index"
					})
					reject(res.data)
				} else {
					reject({ message: '网络错误' }) // 浏览器处理不是200
				}
			},
			fail: (err) => {
				clearInterval(loadingTimer)
				store.commit("loadingHide") //隐藏loading
				if (store.state.network) {
					uni.showModal({
						content: '请检查网络',
						showCancel: false,
					});
					store.commit('setNetwork', false)

					setTimeout(() => {
						store.commit('setNetwork', true)
					}, 5000)
				}
				reject({ msg: '网络错误' })
			}
		})
	})
}


const api = {
	post: (api_path, options) => globalRequest(api_path, 'POST', options),
	get: (api_path, options) => globalRequest(api_path, 'GET', options)
}

export default api

3、项目根目录store/index.js 文件

import Vue from 'vue'
import Vuex from 'vuex'
import api from "@/api/index.js"
Vue.use(Vuex)
const store = new Vuex.Store({
	state: {
		network: true,
		token: uni.getStorageSync('token') || null,
		loading: false, //加载框是否正在显示
		...
	},
	mutations: {
		setNetwork(state, provider) {
			state.network = provider;
		},
		loadingShow(state, provider) {
			if (state.loading === false) {
				uni.showLoading({
					title: provider
				})
				state.loading = true
			}
		},
		loadingHide(state) {
			setTimeout(function() {
				uni.hideLoading();
				state.loading = false
			}, 500);
		},
		// 登录
		login(state, provider) {
			uni.setStorageSync('token', provider);
			state.token = provider;
		},
		//登出
		loginout(state) {
			uni.$emit('TIMLoginOut') //TIM退出登录
			state.user_info = null;
			state.token = null;
			uni.clearStorageSync()
		},
		
		
	},
})
export default store

4、main.js

import App from './App'
import Vue from 'vue'




import store from './store' //引入vuex


import config from './config/config.js'
Vue.prototype.$config = config

import api from './api/index.js'
Vue.prototype.api = api



Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
	store,
	...App
})
app.$mount()
export default app;

5、项目中引用 test.vue

<template>
	<view class="page-height">
		...

	</view>
</template>
<script>
export
default {
        methods:
        {
            onLogin() {
                const params = {
                    username: 'xxxxxx',
                    password: 'xxxxxx'
                }
                this.api.post("/api/wanlshop/user/login", {
                    params: params
                }).then(res = >{...自己写逻辑
                }).
                catch(err = >{

                    this.apiErr(err) //你自己封装全局方法处理报错信息
                })
            }
        }
    }
</script>

uniapp-更新升级-wgt包热更新-整包更新-遮盖原生导航及tabbar

Thu, 02 Mar 2023 11:02:56 +0800

原更新组件是在当前页面以弹窗方式弹出，若页面有原生 tabbar 及原生导航栏时，无法遮盖原生 tabbar 及原生导航栏，要求完美主义者无法接受

现在的更新方式，也是我项目里一直使用的，以跳转新页面的方式更新，更新的页面是一个独立的页面，背景为透明色，跳转动画为 fade-in，所以看起来与弹出框相似

这次更新后严格来说不算个插件，应该是更新思路吧；完美遮盖原生的导航栏及tabbar！

详细代码在码云里，文件跟《插件zip》相同

码云仓库地址

uniapp插件市场链接

使用方法

1、点击右侧绿色按钮《使用 HBuilderX 导入插件》或《下载插件 ZIP》查看完整代码

导入后会在你的项目组件目录多出一个 components/yzhua006-update 目录

2、在 view 文件夹下新建 app-update.vue 文件，可以下载插件 zip 查看，或复制下面内容

<template>
    <view class="page-height">
        <view class="page-content">
            <view class="wrap" v-if="popup_show">
                <view class="popup-bg">
                    <view class="popup-content" :class="{'popup-content-show' : popup_show}">
                        <view class="update-wrap">
                            <image src="../components/yzhua006-update/images/img.png" class="top-img"></image>
                            <view class="content">
                                <text class="title">发现新版本V{{update_info.version}}</text>
                                <!-- 升级描述 -->
                                <view class="title-sub" v-html="update_info.note"></view>
                                <!-- 升级按钮 -->
                                <button class="btn" v-if="downstatus < 1" @click="onUpdate()">立即升级
                                </button>
                                <!-- 下载进度 -->
                                <view class="sche-wrap" v-else>
                                    <!-- 更新包下载中 -->
                                    <view class="sche-bg">
                                        <view class="sche-bg-jindu" :style="lengthWidth"></view>
                                    </view>
                                    <text class="down-text">下载进度:{{(downSize/1024/1024 ).toFixed(2)}}M/{{(fileSize/1024/1024).toFixed(2)}}M</text>
                                </view>
                            </view>
                        </view>
                        <image src="../components/yzhua006-update/images/close.png" class="close-ioc" @click="closeUpdate()" v-if="downstatus < 1 && update_info.force == 0">
                        </image>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
< script >
     export default {
         data() {
                 return {
                     popup_show: true,
                     update_info: null, //上一页面传过来的升级参数
                     note: [], //升级说明数组格式
                     fileSize: 0, //文件大小
                     downSize: 0, //已下载大小
                     downing: false, //是否下载中
                     downstatus: 0, //0未下载  1已开始 2已连接到资源  3已接收到数据  4下载完成
                 }
             },
             onLoad(option) {
                 if (option.updata_info) {
                     this.update_info = JSON.parse(option.updata_info)
                     this.note = this.update_info.note.split("\n"); //版本说明
                 } else {
                     plus.nativeUI.toast("参数出错");
                     setTimeout(() => {
                         uni.navigateBack()
                     }, 500)
                 }
             },
             onBackPress(e) {
                 if (e.from == "backbutton") return true; //APP安卓物理返回键逻辑
             },
             computed: {
                 // 下载进度计算
                 lengthWidth: function() {
                     let w = this.downSize / this.fileSize * 100;
                     if (!w) {
                         w = 0
                     } else {
                         w = w.toFixed(2)
                     }
                     return {
                         width: w + "%" //return 宽度半分比
                     }
                 },
                 getHeight: function() {
                     let bottom = 0;
                     if (this.tabbar) {
                         bottom = 50;
                     }
                     return {
                         "bottom": bottom + 'px',
                         "height": "auto"
                     }
                 }
             }, methods: { // 当点击更新时
                 onUpdate() { //判断是否为WIFI网络 并且是非强制更新
                         if (this.update_info.net_check == 1 && this.update_info.force == 0) { //判断是否为wifi模式
                             uni.getNetworkType({
                                 success: (res) => {
                                     if (res.networkType == "wifi") {
                                         this.startUpdate(); //开始更新
                                     } else {
                                         uni.showModal({
                                             title: '提示',
                                             content: '当前网络非WIFI,继续更新可能会产生流量,确认要更新吗？',
                                             success: (modal_res) => {
                                                 if (modal_res.confirm) {
                                                     this.startUpdate(); //开始更新
                                                 }
                                             }
                                         });
                                     }
                                 }
                             });
                         } else {
                             this.startUpdate(); //开始更新
                         }
                     }, //开始更新
                     startUpdate() {
                         if (this.downing) return false; //如果正在下载就停止操作
                         this.downing = true; //状态改变 正在下载中
                         if (/\.apk$/.test(this.update_info.now_url)) { // 如果是apk地址
                             this.download_wgt() // 安装包/升级包更新
                         } else if (/\.wgt$/.test(this.update_info.now_url)) { // 如果是更新包
                             this.download_wgt() // 安装包/升级包更新
                         } else {
                             plus.runtime.openURL(this.update_info.now_url, function() { //调用外部浏览器打开更新地址
                                 plus.nativeUI.toast("打开错误");
                             });
                         }
                     }, // 下载升级资源包
                     download_wgt() {
                         plus.nativeUI.showWaiting("下载更新文件..."); //下载更新文件...
                         let options = {
                             method: "get"
                         };
                         let dtask = plus.downloader.createDownload(this.update_info.now_url, options);
                         dtask.addEventListener("statechanged", (task, status) => {
                             if (status === null) {} else if (status == 200) { //在这里打印会不停的执行，请注意，正式上线切记不要在这里打印东西!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
                                 this.downstatus = task.state;
                                 switch (task.state) {
                                     case 3: // 已接收到数据
                                         plus.nativeUI.closeWaiting();
                                         this.downSize = task.downloadedSize;
                                         if (task.totalSize) {
                                             this.fileSize = task.totalSize; //服务器须返回正确的content-length才会有长度
                                         }
                                         break;
                                     case 4:
                                         this.installWgt(task.filename); // 安装
                                         break;
                                 }
                             } else {
                                 plus.nativeUI.closeWaiting();
                                 plus.nativeUI.toast("下载出错");
                                 this.downing = false;
                                 this.downstatus = 0;
                             }
                         });
                         dtask.start();
                     }, // 安装文件
                     installWgt(path) {
                         plus.nativeUI.showWaiting("安装更新文件..."); //安装更新文件...
                         plus.runtime.install(path, {}, function() {
                             plus.nativeUI.closeWaiting(); // 应用资源下载完成！
                             plus.nativeUI.alert("更新完成,请重启APP！", function() {
                                 plus.runtime.restart(); //重启APP
                             });
                         }, function(e) {
                             plus.nativeUI.closeWaiting(); // 安装更新文件失败
                             plus.nativeUI.alert("安装更新文件失败[" + e.code + "]：" + e.message);
                         });
                     }, // 取消更新
                     closeUpdate() {
                         uni.setStorageSync("update_ignore", this.update_info.version);
                         uni.navigateBack()
                     },
             }
     }
< /script>
<style lang="scss" scoped>
    .page-height {
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: rgba($color: #000000, $alpha: .7);
    }

    .popup-bg {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 750rpx;
    }

    .popup-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .popup-content-show {
        animation: mymove 300ms;
        transform: scale(1);
    }

    @keyframes mymove {
        0% {
            transform: scale(0);
            /*开始为原始大小*/
        }

        100% {
            transform: scale(1);
        }

    }

    .update-wrap {
        width: 580rpx;
        border-radius: 18rpx;
        position: relative;
        display: flex;
        flex-direction: column;
        background-color: #ffffff;
        padding: 170rpx 30rpx 0;

        .top-img {
            position: absolute;
            left: 0;
            width: 100%;
            height: 256rpx;
            top: -128rpx;
        }

        .content {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-bottom: 40rpx;

            .title {
                font-size: 32rpx;
                font-weight: bold;
                color: #6526f3;
            }

            .title-sub {
                text-align: center;
                font-size: 24rpx;
                color: #666666;
                padding: 30rpx 0;
            }

            .btn {
                width: 460rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #ffffff;
                font-size: 30rpx;
                height: 80rpx;
                line-height: 80rpx;
                border-radius: 100px;
                background-color: #6526f3;
                margin-top: 20rpx;
            }
        }
    }

    .close-ioc {
        width: 70rpx;
        height: 70rpx;
        margin-top: 30rpx;
    }

    .sche-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        padding: 10rpx 50rpx 0;

        .sche-wrap-text {
            font-size: 24rpx;
            color: #666;
            margin-bottom: 20rpx;
        }

        .sche-bg {
            position: relative;
            background-color: #cccccc;
            height: 30rpx;
            border-radius: 100px;
            width: 480rpx;
            display: flex;
            align-items: center;

            .sche-bg-jindu {
                position: absolute;
                left: 0;
                top: 0;
                height: 30rpx;
                min-width: 40rpx;
                border-radius: 100px;
                background: url(../components/yzhua006-update/images/round.png) #5775e7 center right 4rpx no-repeat;
                background-size: 26rpx 26rpx;
            }
        }

        .down-text {
            font-size: 24rpx;
            color: #5674e5;
            margin-top: 16rpx;
        }
    }</style>

3、在项目 pages.json 文件新增更新弹出页面，如下

[
    ... {
        "path": "pages/app-update", //第2步新建的app-uodate.vue文件
        "style": {
            "navigationBarTitleText": "APP更新",
            "navigationStyle": "custom",
            "app-plus": {
                "background": "transparent",
                "webviewBGTransparent": true, //webview的背景是否透明//配合background属性防止跳转闪白
                "popGesture": "none" //禁止侧滑关闭（ios）
            }
        }
    }
    ...
]

4、app.vue 文件，加入样式（这里修改样式需要重启项目生效，这个 page 的样式）

<style>
    page { background: transparent; }
</style>

5、在需要检测更新的页面

<template>...</template>
< script >
    import { checkUpdate }from "@/components/yzhua006-update/js/app-update-check.js";
    export default {
        onLoad() { //这里可以适当延时执行
            this.getAppInfo(0); //获取线上APP版本信息  参数type 0自动检查  1手动检查（手动检查时，之前取消更新的版本也会提示出来）
        }, methods: { //获取线上APP版本信息
            getAppInfo(type) {
                const system_info = uni.getSystemInfoSync();
                let params = {
                    os: system_info.platform //本机设备操作系统  （android || ios）
                }
                if (params.os != 'ios' && params.os != 'android') false; //如果不是安卓或ios 返回false
    
                //这里自行请求API获取版本信息 建议传入操作系统标识，返回本机对应的操作系统最新版本信息，也就是安卓的返回就是安卓的版本信息  ios返回就是ios的版本信息
    
                //请求获取最新版本
                setTimeout(() => {
                    let update_info = {
                        version: '1.0.2', //线上版本
                        now_url: "https://dldir1.qq.com/weixin/android/weixin802android1860_arm64.apk", //更新链接
                        silent: 0, //是否是静默更新
                        force: 1, //是否是强制更新
                        net_check: 1, //非WIfi是否提示
                        note: "产品汪汪要改这个字的颜色", //更新内容
                    }
                    checkUpdate(update_info, type).then(res => {
                        if (res.msg) {
                            plus.nativeUI.toast(res.msg);
                        }
                    }); ///检查更新
                    //checkUpdate 这个方法会做什么？：线上版本号 与 本地版本号做对比 ，如果需要更新  根据静默，强制、wifi等信息执行静默更新或跳转到升级页面
                    //跳转升级页面的前提是，需要新建并在pages.json中配置升级页面，配置方法请查看插件详情
                }, 200)
            },
        }
    }
< /script>

同城信息-微信小程序

Mon, 27 Feb 2023 18:21:48 +0800

项目简介

同城信息小程序以同城信息发布为主，为用户提供发布入口，付费置顶等功能

用户可获取同城信息与发布者进行联系，内置地图展示及导航功能

所用技术栈

小程序前端：uniapp、uview

管理后台：vue3+element

后端：thinkphp5.1

开发周期

UI设计及前后端开发总计20天

项目截图

开发备忘录

Mon, 27 Feb 2023 18:05:50 +0800

input 字体颜色

input::-webkit-input-placeholder {
    color: #fff;
}

ios 底部安全距离

padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
box-sizing: content-box;

阴影

-moz-box-shadow: 0px 2px 5px #E0E0E0; /* 老的 Firefox */
box-shadow: 0px 2px 5px #E0E0E0;

渐变

background: -webkit-linear-gradient(right, #d000b5, #434ae3);
background: -o-linear-gradient(right, #d000b5, #434ae3);
background: linear-gradient(to left, #d000b5, #434ae3);

background: -webkit-linear-gradient(180deg, #5575e3, #b7c7ff);
background: -o-linear-gradient(180deg, #5575e3, #b7c7ff);
background: linear-gradient(180deg, #5575e3, #b7c7ff);

外发光

box-shadow: 0 0 10px #1af0df;

文字截断

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;	/*两行*/
overflow: hidden;

文字满了才换行，不会因为是不是单词换行

word-break: break-all;

段落首航缩进

text-indent:50px;

css函数

height: calc(100upx + env(safe-area-inset-bottom) / 2);

前端开发_全栈开发_华子的博客

农场项目

项目简介

所用技术栈

开发周期

项目截图

uniapp-防抖之发送验证码

外包项目-外卖跑腿

项目简介

所用技术栈

开发周期

项目截图

uniapp-uni.reques请求拦截封装

1、config.js 在项目根目录创建config/config.js

2、在项目根目录创建api目录（根据个人习惯命名），并创建index.js

3、项目根目录store/index.js 文件

4、main.js

5、项目中引用 test.vue

uniapp-更新升级-wgt包热更新-整包更新-遮盖原生导航及tabbar

这次更新后严格来说不算个插件，应该是更新思路吧；完美遮盖原生的导航栏及tabbar！

使用方法

1、点击右侧绿色按钮 《使用 HBuilderX 导入插件》 或 《下载插件 ZIP》查看完整代码

2、在 view 文件夹下新建 app-update.vue 文件，可以下载插件 zip 查看，或复制下面内容

3、在项目 pages.json 文件新增更新弹出页面，如下

4、app.vue 文件，加入样式（这里修改样式需要重启项目生效，这个 page 的样式）

5、在需要检测更新的页面

同城信息-微信小程序

项目简介

所用技术栈

开发周期

项目截图

开发备忘录

input 字体颜色

ios 底部安全距离

阴影

渐变

外发光

文字截断

文字满了才换行，不会因为是不是单词换行

段落首航缩进

css函数

1、点击右侧绿色按钮《使用 HBuilderX 导入插件》或《下载插件 ZIP》查看完整代码