<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[伟大光荣正确的博客]]></title><description><![CDATA[只写能跑的起来的笔记]]></description><link>https://blog.youkuaiyun.com/jtyxj</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; jtyxj]]></copyright><item><title><![CDATA[vue H5 App对接加油接口Api到自己App]]></title><link>https://blog.youkuaiyun.com/jtyxj/article/details/123219216</link><guid>https://blog.youkuaiyun.com/jtyxj/article/details/123219216</guid><author>jtyxj</author><pubDate>Mon, 19 Sep 2022 16:54:32 +0800</pubDate><description><![CDATA[自己H5 app接入第三方加油渠道接口方法]]></description><category></category></item><item><title><![CDATA[vue H5对接团油接口(后台服务是php)]]></title><link>https://blog.youkuaiyun.com/jtyxj/article/details/120104790</link><guid>https://blog.youkuaiyun.com/jtyxj/article/details/120104790</guid><author>jtyxj</author><pubDate>Mon, 19 Sep 2022 16:54:06 +0800</pubDate><description><![CDATA[目录



业务场景：

简单介绍：

声明

业务逻辑

接入代码

总结：



业务场景：

用vue写的H5 app中现在需要接入能链集团的团油服务

简单介绍：

声明

看团油的官方文档能顺利接通的是神仙，那种垃圾文档三流水平都算不上，缺胳膊少腿的

业务逻辑

其实很简单，下面详细梳理一下业务逻辑

企业在团油申请成为合作方，申请通过后会给你一个渠道编码、key、Secret(这三个值注意，文档里不同接口可能叫不同的名字，就这种垃圾文档连个名字都统一不了呵呵)
	根据文档的授权码接口,获取到团]]></description><category></category></item><item><title><![CDATA[vue同一浏览器登录不同账号token覆盖导致的数据互相污染]]></title><link>https://blog.youkuaiyun.com/jtyxj/article/details/124088126</link><guid>https://blog.youkuaiyun.com/jtyxj/article/details/124088126</guid><author>jtyxj</author><pubDate>Sun, 10 Apr 2022 23:19:52 +0800</pubDate><description><![CDATA[业务场景
后台管理系统有不同的角色权限，不同账号的角色权限不同登录之后看到的页面也是不一样的，当我们用同一个浏览器登录一个账号A之后，再打开一个新的tab标签页重新登录一个不同于账号A角色权限的账号B之后，浏览器中A的token被B覆盖，导致A账号提交数据时候可能会出现后台误以为是B账号进行的一些操作，从而导致后台数据保存出现匹配错误的bug
解决方案
一、vue中新建一个全局变量用来保存当前用户token
新建一个constants.js文件
/**
 * 全局变量定义
 */
export let gl]]></description><category></category></item><item><title><![CDATA[el-pagination分页自定义前往第几页样式(下拉框形式)]]></title><link>https://blog.youkuaiyun.com/jtyxj/article/details/123556436</link><guid>https://blog.youkuaiyun.com/jtyxj/article/details/123556436</guid><author>jtyxj</author><pubDate>Thu, 17 Mar 2022 18:05:19 +0800</pubDate><description><![CDATA[el_pagination分页修改默认样式]]></description><category></category></item><item><title><![CDATA[小程序之实现表格展示数据]]></title><link>https://blog.youkuaiyun.com/jtyxj/article/details/123340459</link><guid>https://blog.youkuaiyun.com/jtyxj/article/details/123340459</guid><author>jtyxj</author><pubDate>Mon, 07 Mar 2022 21:39:39 +0800</pubDate><description><![CDATA[前言
由于小程序组件一般是没有表格插件的，所以只能利用页面配合wxss强行自己写一个了
实现步骤
wxml中代码
1、先写表头
&lt;view class="tr bg-w"&gt;
 &lt;view class="th"&gt;姓名&lt;/view&gt;
 &lt;view class="th"&gt;电话&lt;/view&gt;
 &lt;view class="th "&gt;所属部门&lt;/view&gt;
 &lt;view class="th "&gt;注册时间&lt;/view&g]]></description><category></category></item><item><title><![CDATA[Cordova插件cordova-plugin-media-capture实现短视频的录制上传和播放]]></title><link>https://blog.youkuaiyun.com/jtyxj/article/details/123247722</link><guid>https://blog.youkuaiyun.com/jtyxj/article/details/123247722</guid><author>jtyxj</author><pubDate>Thu, 03 Mar 2022 20:49:30 +0800</pubDate><description><![CDATA[效果图

写在前面(吐槽)
1、网上的教程大部分都是虎头蛇尾的不全的。互相抄来抄去真的感觉就没有一个是真正自己去写一写的，不然这里面这么多的坑就没有一个人出来说说的？下面就写写我实现功能过程中的一些问题吧，代码绝对完整并且按照步骤来一定可以成功！
2、本文主要讲在Android中的实现，IOS端目前还在适配，不少问题到时候再另外单独发一篇
实现逻辑
1、客户端利用cordova-plugin-media-capture插件调用摄像机权限进行视频拍摄
2、拍摄的视频上传至服务器
3、服务端接收视频文件并转码保]]></description><category></category></item><item><title><![CDATA[微信小程序----地理围栏实现员工防作弊地图打卡功能]]></title><link>https://blog.youkuaiyun.com/jtyxj/article/details/123244471</link><guid>https://blog.youkuaiyun.com/jtyxj/article/details/123244471</guid><author>jtyxj</author><pubDate>Thu, 03 Mar 2022 05:48:44 +0800</pubDate><description><![CDATA[效果图

业务场景
小程序用户(公司员工)需要在小程序选择位置打卡并上传位置，为了保证员工是真实的去指定的地点开展了公司的业务而不是虚假打卡上传的位置，需要进行地理围栏限制，要求打卡上传的位置地点必须和员工的真实位置在一个可接受的距离范围内，防止员工作弊打卡
实现步骤
地图选点插件的引入实现小程序地图选点功能
这个很简单，腾讯官方有详细的接入步骤，通过此步骤我们可以获取到员工的选点经纬度
latitude
longitude
获取用户的当前定位
wx.getLocation({
	type: 'gcj02']]></description><category></category></item><item><title><![CDATA[小程序Map组件点聚合功能详细接入步骤和ios、Android真机环境以及开发者工具各种样式差异的适配过程]]></title><link>https://blog.youkuaiyun.com/jtyxj/article/details/123219614</link><guid>https://blog.youkuaiyun.com/jtyxj/article/details/123219614</guid><author>jtyxj</author><pubDate>Wed, 02 Mar 2022 01:19:31 +0800</pubDate><description><![CDATA[效果图
ios效果图

Android效果图

开发者工具效果图

业务场景
需要将很多的小区根据经纬度在地图上进行标注，随着业务的推进，小区标注点越来越多，如何将所有的小区合理的分布在有限的地图空间上便于管理者全局的观察成了一个亟待解决的问题！
首先当然是小程序刚更新没多久的组件map的点聚合功能了，有了点聚合还不够，如何合理的定义地图中心点也非常重要！
接下来就是小程序Api MapContext.includePoints缩放视野展示所有经纬度！
最后一个就是标记点markers的callout气泡窗]]></description><category></category></item><item><title><![CDATA[IM即时通信多房间聊天室仿微信聊天(四)]]></title><link>https://blog.youkuaiyun.com/jtyxj/article/details/123198676</link><guid>https://blog.youkuaiyun.com/jtyxj/article/details/123198676</guid><author>jtyxj</author><pubDate>Tue, 01 Mar 2022 10:00:32 +0800</pubDate><description><![CDATA[聊天记录的保存和展示


IM即时通信多房间聊天室仿微信聊天(一)
IM即时通信多房间聊天室仿微信聊天(二)
IM即时通信多房间聊天室仿微信聊天(三)

聊天消息的保存我们直接在服务端接收到客户端发送的消息的时候进行操作，这样我们还可以剔除一些无用的消息，选择性的进行聊天记录的保存
如用户连接进入聊天室和离开聊天室的消息我们就可以不用保存
服务端在接收到GateWay转发过来的客户端消息后，进行聊天记录的保存
代码如下:
// /* 聊天记录保存(只保存发送的消息  不保存进入房间和离开房间数据) */
	]]></description><category></category></item><item><title><![CDATA[IM即时通信多房间聊天室仿微信聊天(三)]]></title><link>https://blog.youkuaiyun.com/jtyxj/article/details/123142594</link><guid>https://blog.youkuaiyun.com/jtyxj/article/details/123142594</guid><author>jtyxj</author><pubDate>Tue, 01 Mar 2022 09:49:26 +0800</pubDate><description><![CDATA[IM即时通信多房间聊天室仿微信聊天(页面消息展示)
在IM即时通信多房间聊天室仿微信聊天(一)中我们已经搭建了基本的通信架构，接下来重点就是发送的消息在页面的展示效果了
1、消息发送box(文字、语音、图片、表情等)

很明显这里需要使用v-show控制不同按钮的显示/隐藏
&lt;div class="sendbox"&gt;
	&lt;div class="left-icon" @click="changeAudioButton"&gt;
		&lt;img src="../assets/img/jia]]></description><category></category></item><item><title><![CDATA[IM即时通信多房间聊天室仿微信聊天(二)]]></title><link>https://blog.youkuaiyun.com/jtyxj/article/details/123142990</link><guid>https://blog.youkuaiyun.com/jtyxj/article/details/123142990</guid><author>jtyxj</author><pubDate>Fri, 25 Feb 2022 23:48:06 +0800</pubDate><description><![CDATA[不依赖任何收费第三方组件，直接详细的业务逻辑和全量的代码都直接贴出来，复制即可跑起来]]></description><category></category></item><item><title><![CDATA[IM即时通信多房间聊天室仿微信聊天(一)]]></title><link>https://blog.youkuaiyun.com/jtyxj/article/details/123086116</link><guid>https://blog.youkuaiyun.com/jtyxj/article/details/123086116</guid><author>jtyxj</author><pubDate>Thu, 24 Feb 2022 23:56:26 +0800</pubDate><description><![CDATA[IM即时通信多房间聊天室仿微信聊天(概述)

]]></description><category></category></item><item><title><![CDATA[封装的H5 app无法使用van-uploader组件上传图片]]></title><link>https://blog.youkuaiyun.com/jtyxj/article/details/122507234</link><guid>https://blog.youkuaiyun.com/jtyxj/article/details/122507234</guid><author>jtyxj</author><pubDate>Sat, 15 Jan 2022 11:17:35 +0800</pubDate><description><![CDATA[vant的组件van-uploader上传图片在vue做H5时候是没有问题的，就是说直接在浏览器上是可以的
但是一旦封装成客户端android和ios的时候直接就失效了
今天我把自己写的一个组件分享给大家
我这里用的封装框架是cordova，用cordova讲vue H5的项目封装成客户端app
1、组件内容
&lt;template&gt;
	&lt;div class="uploader"&gt;
		&lt;div class="info-imgs" v-for="(item, index) in u]]></description><category></category></item><item><title><![CDATA[手机端在线商城开发(前端vue+后台php)]]></title><link>https://blog.youkuaiyun.com/jtyxj/article/details/122506862</link><guid>https://blog.youkuaiyun.com/jtyxj/article/details/122506862</guid><author>jtyxj</author><pubDate>Sat, 15 Jan 2022 10:43:16 +0800</pubDate><description><![CDATA[前言
最近接项目做了一个在线商城项目，因为工作中开发的业务不涉及到前端的一些商城服务，今天写出来记录一下，希望能对大家有一些借鉴意义
业务说明
整个商城中主要就是商品这个属性稍微有些复杂，至于后台数据库关于订单、购物车、地址管理、订单信息这些做起来比较快，因为平时主要做的就是后端服务。前后端都是自己开发的，所以效率也会高很多，毕竟前端需要的数据我可以尽可能的从后台整理好格式直接发送给前端
商品
商品主要有两个属性SKU和SPU，这里根据我自己的理解简单的解释一下
SKU：就是商品规格属性
SPU：怎么说呢，]]></description><category></category></item><item><title><![CDATA[支付宝H5支付(手机网站支付)]]></title><link>https://blog.youkuaiyun.com/jtyxj/article/details/120747614</link><guid>https://blog.youkuaiyun.com/jtyxj/article/details/120747614</guid><author>jtyxj</author><pubDate>Wed, 13 Oct 2021 18:09:15 +0800</pubDate><description><![CDATA[前言
接了支付宝这个支付之后我不得不说几句
首先这个文档是真的垃圾！花里胡哨乱七八糟，找起来那叫一个费劲！
当然可能因为人家业务复杂，逻辑严谨把
他们的demo还是算了吧，那个demo就像什么呢，就像复制粘贴过来然后还不把别人东西去掉的意思！里面一堆用不着的代码！不建议下载学习，那样反而容易误导支付的逻辑
这么一对比，微信还是牛批不少，自上而下的企业精神—严谨、简约！看支付宝app和微信app就知道了！
垃圾归垃圾没办法还得接，都是穷惹的祸啊
总而言之，垃圾demo不看也罢！
进入正题。。。全程按照我的步骤]]></description><category></category></item><item><title><![CDATA[cordova Android中webview加载第三方https链接中的http图片不显示解决方法]]></title><link>https://blog.youkuaiyun.com/jtyxj/article/details/120541024</link><guid>https://blog.youkuaiyun.com/jtyxj/article/details/120541024</guid><author>jtyxj</author><pubDate>Wed, 29 Sep 2021 07:31:58 +0800</pubDate><description><![CDATA[问题场景：
cordova生成的android app在引入第三方的https网址时候，里面有图片是http链接形式加载的，这样会导致此图片不能正常显示，如图：

解决方法：
找到cordova webview插件inappbrowser逻辑代码

找到代码中设置webview  websetting的地方加入如下代码：
 //解决https第三方网址加载http图片
 settings.setBlockNetworkImage(false);
 if(Build.VERSION.SDK_INT &gt;=]]></description><category></category></item><item><title><![CDATA[cordova打包ios到上架AppStore全过程记录(无敌详细)]]></title><link>https://blog.youkuaiyun.com/jtyxj/article/details/120242861</link><guid>https://blog.youkuaiyun.com/jtyxj/article/details/120242861</guid><author>jtyxj</author><pubDate>Sat, 11 Sep 2021 23:36:27 +0800</pubDate><description><![CDATA[前言
上一篇已经讲了cordova打包android app的全过程,在这里关于打包ios的过程就尽量简单说一下了。
ios重点就是配置开发者证书的一些东西稍微复杂一点，下面图文详细的一步步操作。
ios的配置证书我总结一下大致如下：
首先需要证书和appid，pp文件(配置文件)其实是将appid和证书绑定的作用，主要就是这三个的配置
一.配置ios证书
1.打开钥匙串访问

2.钥匙串访问—证书助理—从证书颁发机构请求证书：

3.填写申请证书的一些信息：

4.本地生成了.cer文件(这个文件是后续在]]></description><category></category></item><item><title><![CDATA[Cordova封装打包vue H5项目到Android平台详解]]></title><link>https://blog.youkuaiyun.com/jtyxj/article/details/120109501</link><guid>https://blog.youkuaiyun.com/jtyxj/article/details/120109501</guid><author>jtyxj</author><pubDate>Sun, 05 Sep 2021 08:52:07 +0800</pubDate><description><![CDATA[安装Cordova
npm install -g cordova

安装完成之后终端输入cordova显示下图即表示安装成功

创建Cordova项目
进入你要创建项目的目录执行：
cordova create helloWorld

helloWorld即为你的项目名
成功创建之后文件夹如下：

创建平台(这里是Android)
进入刚才创建的Cordova项目helloWorld中

cordova platform add android

如果需要添加指定版本的android则在后面加上版本号
co]]></description><category></category></item><item><title><![CDATA[vue引入echart柱状图详细流程步骤]]></title><link>https://blog.youkuaiyun.com/jtyxj/article/details/120102936</link><guid>https://blog.youkuaiyun.com/jtyxj/article/details/120102936</guid><author>jtyxj</author><pubDate>Sat, 04 Sep 2021 17:56:19 +0800</pubDate><description><![CDATA[安装echarts插件：


npm install echarts --save

这里只讲按需引入，因为全局引入写死的比较简单:

在需要引入的.vue中：


import * as echarts from 'echarts'






接下来创建放置柱状图的容器：


&lt;div id='chart' style="width:100%;height:300px"&gt;&lt;/div&gt;





JS mounted方法中执行初始化echart的方法(这里我加了一个延时方法确保..]]></description><category></category></item><item><title><![CDATA[小程序构建npm---miniprogarm_npm包]]></title><link>https://blog.youkuaiyun.com/jtyxj/article/details/120094048</link><guid>https://blog.youkuaiyun.com/jtyxj/article/details/120094048</guid><author>jtyxj</author><pubDate>Sat, 04 Sep 2021 06:15:10 +0800</pubDate><description><![CDATA[小程序引入第三方npm包并没有生成miniprogram_npm 包的解决方案

查看自己项目是否有package.json文件，如果没有，打开终端


输入npm init



就可以看到新生成的package.json文件了

右上角--详情--本地设置--勾选使用npm模块
	
然后开始引入自己的第三方库(这里我以引入vant Weapp为例)

控制台输入


npm i @vant/weapp -S --production

成功之后就可以在项目中看到node_modules文件夹了

...]]></description><category></category></item></channel></rss>