qq_34227291的博客

原创 微信小程序+ThinkPHP6连接数据库增、删、改、查示例

前言：本篇文章主要讲的是使用TP6框架写接口并且在前端调用接口一个过程;适合想学习全栈或者你目前是做前端/后端想接触前端/后端，这些都是可以的。PS：以下开发环境是在本地使用phpEnv的集成环境，没描述到位的可以评论我及时修改/补充哈~前端工具/环境：微信开发者工具下载：https://developers.weixin.qq.com/miniprogram/dev/devtools/...

原创 vue.js、uniapp两种封装接口请求方法

前言：分别有两种封装方法适用于vue.js和uniapp；第一种：全局注册，通过this调用，不需要import引入js文件。第二种：需要请求接口的页面还要import一下。ps:下面代码示例是uniapp项目目录结构第一种封装1：在项目根目录新建common目录http.js文件http.js文件//服务器地址const service = "域名/ip地址";module.exports = (params) => { let url = params.url; le

原创 Element Pagination 分页请求两次接口BUG解决--测试可用！！！

前言:下面的解决方法是我在网上查找其他的解决方法之后自己想到的其中的一个解决方法，测试没有问题，能够解决两次接口请求的BUG，有什么问题也可以及时评论提出来，或者大家有更好的方法可以评论~bug：当选择最后至一页切换条数就会请求两次接口PS1：选择最后一页（第2页）PS2：切换条数会请求两次接口解决方法：根据【当前页 * 条数 > 总条数】进行判断<el-pagination center background :pager-count="5" layout="prev,

原创 vue三元表达式多个判断

<p>{{scope.row.type==0?'充值' : scope.row.type==1?'退款': scope.row.type==2?'消费':'补款'}}</p>

原创 HTML5获取摄像头和视频控制接口进行扫描二维码

前言：以下是在vue环境实现调用摄像头进行扫描二维码并且返回二维码链接的一个操作，在html文件也是可以调用的，只不过修改进行相应的修改。代码：<template> <div> <div class="demo-wrapper"> <video id="video" width="640" height="480" autoplay="" playsinline muted></video> <can

原创 uniapp自定义组件-组件传参-父组件向子组件传参-子组件向父组件传参详细示例

前言：本篇文章主要讲的是自定义组件的使用与传参。在不同的页面重复使用到相同或者类似的模块，这里就可以使用到组件就省略了不少代码，不用每个页面去写相同的代码，直接去引用该组件就可以了，下面以自定义顶部为示例。引入自定义顶部组件效果：PS：父组件向子组件传参使用的是props，后面可以看到打印出来的传参。子组件向父组件传参效果：PS：子组件向父组件使用的uni.$emit目录结构：...

原创 微信小程序自定义组件-自定义顶部-Component

前言：在不同的页面重复使用自定义组件;自定义组件可以理解一个页面，在不同页面显示出来，一个自定义的组件也是由json、wxml、wxss、js 4个文件组成的，下面点击tabar页面切换显示自定义顶部为示例。官网：https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.htmlgif效果图片-最终效果...

原创 微信小程序分包示例

前言：小程序比较大都会使用分包，那么就出现了主包和分包;主包：默认加载/启动的页面。分包：划分了待加载的页面，也就是进去分包的某个页面才会下载分包（分包可以分多个）。问：如果不分包呢？答：不分包的话全部文件大小加起来不能超过2M，可以分成多个包 每个包不超过2M 总体不超过12M就行。整个小程序所有分包大小不超过 12M单个分包/主包大小不能超过 2MPS：以下是目录结构和分包代码...

原创 github创建仓库 - 代码提交 - 添加访问 - git status - git add - git commit - git pull - git push

前言：下面分为三个部分;第一部分是新建仓库，第二部分是将代码提交到仓库里面，第三部分则是添加可以访问该项目的人。一、新建仓库1.点击新建2.填写仓库信息3.创建完成二、代码上传需要安装的工具：PS：以下项目为示例1.鼠标右击选择Git Bash Here2.按照以下蓝色框的命令顺序输入然后回车PS：红色框的是的上页面的仓库地址如下：在当前目录新建一个G...

原创 vue+axios请求示例

前言：该项目示例是已经封闭好的axios1：目录结构PS：request.js文件是封闭axios文件2：api目录下的test.js文件是请求接口的函数文件3：在组件中调用请求接口的函数文件PS：请求接口4:打印数据...

原创 tp5入门到实战视频教程

前言：我也是最近入门tp5框架的，以下的视频教程是我在网上找的资源。如果觉得看官方文档比较枯燥的话可以看看视频里面的讲解吧~链接: https://pan.baidu.com/s/1rhf13InqHq8Z859DJ5iLJg 提取码: tjkr目录文件：...

原创 微信小程序swiper滑动-仿饿了么

前言：本篇swiper滑动可以根据需要一页显示多少项内容（根据数组渲染的）。除外，还能修改指示点的默认和选中的样式。饿了么-gif效果图片：示例-gif效果图片：wxml:<view> <!-- swiper实例 --> <view> <swiper class="swiper-box" style="height: 280r...

原创 uniapp-本地图片分享-截图分享-解决打包之后图片分享为空

前言：uniapp的分享功能也是常用到的，可以将图文 、纯文字 、纯图片、音乐、视频、小程序。本篇文章主要是图片/图文分享，分享是分享至微信聊天界面、微信朋友圈、微博、QQ。最终效果-gif图片：PS1：分享之前还需要在项目根目录下的manifest.json里面的App模块权限配置里面的Share(分享)勾上PS2:打包之后的分享同样是需要对应的appkey/appid之类的;这些...

原创 uniapp-字体图标使用-解决字体图标无法正常显示（IOS显示正文形/问号）

前言：字体图标常用到的是阿里的iconfont，阿里的iconfont在IOS默认显示的基本是没有问题的，但是有时候图标显示不正常，比如：显示正方形、或者问号。在buttons引用的字体图标如果是固定的，不是动态修改一般是没有问题的，但是有的时候关系到字体图标的动态切换。在安卓上点击字体图标进行切换是正常的，在IOS就出现以上提到的正方形、或者问号。这里就有一个坑了，下面是描述的是解决方~法...

原创 uniapp地图-点击添加标记点

前言：这篇文章讲述的是map标签的@tap点击地图事件;添加的标记点都是保存在markers数组里面,点击地图就会获取点击的位置的经纬度，然后在point里面追加了iconPath标记点的图标，之后使用了concat将点击地图的对象添加到markers数组里面就完成了点击地图显示标记点了。uniapp地图-删除标记点uniapp地图-标记点-多点连线具体的也可以看看官网的介绍：https...

原创 uniapp地图-删除标记点

前言：本篇文章衔接了【uniapp地图-标记点-多点连线】文章;下面是一个示例，用到的是本地数组，以及地图的标记点点击事件@markertap，点击标记时触发的，触发前提是需要指定 marker 对象属性 id才会触发。之后拿到markerId循环@markertap绑定的数组中ID相等的splice掉。当然这个只是对本地数据的一个简单的demo，到了项目当中用到接口，根据实际情况进行传参删除指定...

原创 uniapp-tabBar中间凸起按钮

前言：以下是使用的是原生方法，兼容会比绘制按钮的好，不用写更多代码去让图标固定到tabBar位置。官网有提到“中间按钮 仅在 list 项为偶数时有效”，这需要注意，另外在中间按钮的图标有的凸出的部分的图标有个描边的边框之类的，这点在当前uniapp版本已经自动适应了，在之前的开发版本是不会自适应的。比如在安卓上面能够自适应凸出部分的描边可以刚刚好跟tabBar水平对齐，但是在苹果上面是不会的。...

原创 uniapp子窗体的使用与传参

前言：以下是我分享的是项目开发中的子窗体和子窗体与交窗口之间的通信;为什么使用子窗体？比如项目中有类似地图这样的功能，如果页面有弹窗的话会被地图所遮挡，或者有弹窗的层不高无法遮挡原生顶部这时就需要子窗体来实现该弹窗了，例如：页面中的弹出分享、客服、通知之类的弹窗都可以使用子窗体实现…PS：表达不详细的地方可以评论补充，谢谢~实现效果：（子窗体显示前）（子窗体显示后）现在来看看dem...

原创 uniapp关闭回弹

原创 VScode使用sftp拉取、管理项目

PS：下面是使用VScode的sftp将项目拉取和提交1：首先拿到ftp://xxx.x2.xxx.xxx:21(仅为示例)以及登录账号和登录密码2：新建目录3：进入VScode导入sftp目录和安装SFTP4：选择要配置SFTP的目录选择回车之后~5：输入对应信息6：下载到本地PS：修改好代码后不用全部上传，直接在当前文件右键点击Upload可以单独提交了~...

原创 uniapp地图-标记点-多点连线

前言：正在使用uniapp开发地图这块不明白的小伙伴可以看看我以下的代码分享;下面是我开发中使用vue+uniapp遇到的地图问题，有的APP涉及到地理位置的功能，所以，地图组件可以实现这个功能，如：调起手机的第三方导航（百度地图、高德地图）、在地图上标记出来每个不同的定位，也可以让相同类型的标记点相连并设置不同的图片和颜色更好的辨认。PS：下面我跟大家分享是地图标记点和标记点相连;注释已经写在...

原创 微信小程序picker日期-时间段选择

--------今天休息跟大家分享一下在开发小程序遇到的时间选择这块的代码;--------代码复制即可用，也可以直接下载git上的demo运行就可以了~git地址：https://github.com/hjqit/Wechat-demo-picker--------Emmmm、代码易懂，有需要的小伙伴看看就知道了；图1：设计图图2：demo效果图上代码中….wxml文件&l...

原创 tp5接口示例

前言：我是使用PHPstudy集成环境来测试;在本地建立虚拟的服务器环境，可以通过在浏览器访问接口就可以看到返回的json数据了。另外，我也在微信开发者工具测试编写好的接口。以下方法是我总结的经验，有不对的地方欢迎留言。此外，我省略了连接数据库和表这块的步骤，以下步骤是tp5正常连接上数据库，并新建好该表的编写接口示例。使用到的工具/软件： 1：PHPstudy 下载地址：htt...

原创 tp5连接数据库并查询表

TP5连接数据库并查询表一：数据库环境部分1：使用PHPstudy集成的测试环境1-1:下载数据库,然后点击管理进行登陆数据库PS：账号密码默认是root1-2：登陆数据库PS：连接的数据库是tp5;表是test二：TP5/PHP部分2：连接数据库2-1：查询test表2-2：数据显示...

原创 Github客户端使用教程

Github客户端使用教程前言：GitHub是一个面向开源及私有软件项目的托管平台，因为只支持git 作为唯一的版本库格式进行托管，故名GitHub。步骤稍微有点多，不过都是很简单的操作，只是想讲清楚一点，避免出现说明不清楚的情况。有什么问题可以留言~ ~ ~1：进入官网注册账号并且登录https://github.com/github （已有账号可以忽略）2：下载客户端https://de...

原创 小程序禁止页面左右滑动

小程序禁止页面左右滑动PS：在开发过程中可能会遇到某一个页面可以左右滑动，在开发者工具是查看不出来，只有在手机预览才可以看的出来（尝试左或者右滑动）。我的解决方法是在根DOM添加了以下的CSS样式：overflow-x:hidden; //裁剪 div 元素中内容的左/右边缘 - 如果溢出元素的内容区域的话进行隐藏...

原创 React菜品详情查看

React菜品详情查看菜列表文档地址：https://blog.csdn.net/qq_34227291/article/details/94454115PS：菜详情页与菜列表页的思路比较相似的;首先安装axios，在SRC目录下的package.js文件可以看到安装完成的axios;然后就是调用API接口，在调用成功后的函数中设置数据源，详细页是根据菜列表页的_id来获取对应的数据。示例中...

原创 React获取api数据并渲染

React获取api数据并渲染1：进入当前项目安装axios命令：npm install axios引入：const axios = require('axios');2：安装路由命令：npm install react-router-dom引入：import { Link } from "react-router-dom";API接口地址：列表API接口：http://a...

原创 React双向数据绑定

React双向数据绑定前言：React中的双向绑定是没有提供的，相比vue需要手动写，不过也比较简单，下面看代码示例。什么是双向数据绑定？PS：model改变影响了view,view改变则反过来影响model.**示例代码：import React from "react";class Model extends React.Component { constructor(...

原创 Sublime text3 PackageControl 报错解决

Sublime Text3 PackageControl 报错解决自动安装报错如图：解决方法：以下操作是使用手动安装。安装Package ControlPS：进入github下载PackageControl包，地址：https://github.com/hjqit/package-control步骤：下载PackageControl包-修改文件名为Package Control—...

原创 vue.js学习笔记

vue.js学习笔记目录：Npm run build打包问题：完成打包运行index.html文件;内容为空，即没有任何报错。自动点餐APP笔记—菜加入购物车Eslint代码校验Vue生命周期函数关于berforCreated、created、beforeMount生命周期的函数里面使用document.getElementById()或者document.querySelecto...

原创 Vue.js连接阿里云MYSQL获取数据并渲染

阿里云服务器连接MYSQL获取数据并渲染以下操作如有不详细的可以评论说明。阿里云服务器连接MYSQL参考文档地址：https://blog.csdn.net/qq_34227291/article/details/90047596PS：以下示例是在vue.js环境下实现，打包上传至站点。相关知识点：vue.js/打包、php、ECS服务器、DM自建数据库、Xftp1. 登陆数据库并新建数...

原创 阿里云服务器连接MYSQL

阿里云服务器连接MYSQL阿里云建站参考文档地址：https://blog.csdn.net/qq_34227291/article/details/88241108PS:服务器连接MYSQL数据库步骤如下（以下的服务器是轻量级ECS服务器）1. 进入控制台-防火墙项-添加规则2. 进入控制台-应用详情-远程连接;运行下面命令允许主机连接MYSQL数据库命令1：sudo /usr/l...

原创 阿里云建站详细步骤

阿里云建站详细流程下面是我的一些使用阿里云建站的方法总结，步骤较多，也可能遗漏了一些细节，后面可以留言。相信有的小伙伴想把自己完成的项目在电脑或者手机通过IP/域名来访问再或者测试，具体操作步骤如下：购买云服务器（ECS）PS:如果你是学生可以使用学生身份去购买，价格比较实惠。(根据实际情况而选择ECS类型)说明：什么是ECS?：您无需提前采购硬件设备，而是根据业务需要，随时创建所需...

原创 Xftp6、Xshell6评估期已过

Xftp6、Xshell6评估期已过PS：如果用途不是商业用途的话可以下载永久免费版本的。下载地址：https://www.netsarang.com/zh/all-downloads/解决方法：进入下载页面;点击“免费授权页面”输入姓名、邮件，然后打上勾，点击“下载”软件下载的地址会通过QQ邮箱的方式发送下载PS：红框内的网址为下载链接完成安装...

原创 微信小程序页签切换-swiper滑块

微信页签切换效果知识点：三元表达式、bindtap点击事件、data-current绑定下标、swiper、swipt-item效果：1. wxml<view class='content'> <!-- 标签导航 --> <view class='nav'><!-- default是默认样式、select是选中样式 --> ...

原创 Vue搜索功能

Vue搜索功能知识点：v-model数据双向绑定，绑定对象是input效果图：HTML<template> <div id="search"> <header> <div class="header_input"> <!-- 绑定search并在data定义值为空 --> <input type=...

原创 js轮播

js轮播轮播：指的是图片间隔n秒循环性的播放知识点：for语句、DOM操作、事件绑定、定时器最终效果：HTML<div class="box"><!-- 图片 --><div class="wrap" style="left: 0px;"> <ul> <li class="wrapLi"><img src=...

原创 js获取并在页面显示实时时间

js获取并在页面显示实时时间<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js获取并在页面显示实时时间</title> <script> // 方法一（不刷新） // var d = new Date();...

原创 Vue.js从数据库取图片

Vue.js从数据库取图片要求：将表中的内容（图片、文字）在页面渲染出来表内容：最终效果：VUE数据库1-1:HTMLPS:[item.”表：字段名”]<!-- 主体图片/文字开始 --> <div class="content_imgText"> <h3>皮蛋瘦肉粥</h3> <ul class="c...