<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[yan263364的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/yan263364</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; yan263364]]></copyright><item><title><![CDATA[git 命令行push代码步骤]]></title><link>https://blog.youkuaiyun.com/yan263364/article/details/119462069</link><guid>https://blog.youkuaiyun.com/yan263364/article/details/119462069</guid><author>yan263364</author><pubDate>Fri, 06 Aug 2021 19:40:37 +0800</pubDate><description><![CDATA[一、问题
以前都是用的小乌龟，这次虚机里面没有小乌龟，由于各种原因也无法安装；只能用 git 命令行提交代码

二、解决
1、先查看 git 状态
	git status


2个修改的文件 1个新增的文件
2、add：提交文件至本地 git 缓存区
	git add .


git add . 内容全部添加至本地 git 缓存区
git add src/components/error.vue  仅该文件提交至本地 git 缓存区
目前我需要的是把所有代码都添加到本地 git 缓存区

3、commit：]]></description><category></category></item><item><title><![CDATA[uniapp局部上拉加载数据]]></title><link>https://blog.youkuaiyun.com/yan263364/article/details/111293325</link><guid>https://blog.youkuaiyun.com/yan263364/article/details/111293325</guid><author>yan263364</author><pubDate>Wed, 16 Dec 2020 17:18:44 +0800</pubDate><description><![CDATA[一、页面局部实现上拉加载数据

只有评论区可以上拉加载数据，网上找到了 vue-infinite-scroll

二、使用
官方示例
1、 npm 加载依赖
npm install vue-infinite-scroll --save

2、 单个页面引用

import infiniteScroll from 'vue-infinite-scroll'

export default {
	directives: { infiniteScroll },
	data() {
		return {
			is]]></description><category></category></item><item><title><![CDATA[uniapp下拉刷新上拉加载]]></title><link>https://blog.youkuaiyun.com/yan263364/article/details/111290818</link><guid>https://blog.youkuaiyun.com/yan263364/article/details/111290818</guid><author>yan263364</author><pubDate>Wed, 16 Dec 2020 17:03:41 +0800</pubDate><description><![CDATA[一、需求
留言板主页，显示所有的留言信息，带有分页功能；上拉加载数据，下拉刷新数据

二、代码

1、pages.json

2、messageBoard.vue

用了 uniapp 提供的组件： uni-load-more.vue
&lt;uni-load-more :status="loadingText" :contentText="contentText" &gt;&lt;/uni-load-more&gt;

const loadingTextObj = {
	more: 'more',
	no]]></description><category></category></item><item><title><![CDATA[uniapp单文件and多文件上传功能]]></title><link>https://blog.youkuaiyun.com/yan263364/article/details/111288370</link><guid>https://blog.youkuaiyun.com/yan263364/article/details/111288370</guid><author>yan263364</author><pubDate>Wed, 16 Dec 2020 16:42:49 +0800</pubDate><description><![CDATA[一、上传文件功能
前端上传后界面后，点击 确定 按钮，上传至后台。

uniapp拍照上传功能
二、代码
&lt;view class="top-nav-c"&gt;
	&lt;view class="before" @tap="isShowDoMessage = false"&gt;取消&lt;/view&gt;
	留言板
	&lt;view class="after" :class="{'submit-ck': isSubmit}" @tap="onSubmitMessageClick"&gt;确定&l]]></description><category></category></item><item><title><![CDATA[uniapp拍照上传功能]]></title><link>https://blog.youkuaiyun.com/yan263364/article/details/111285184</link><guid>https://blog.youkuaiyun.com/yan263364/article/details/111285184</guid><author>yan263364</author><pubDate>Wed, 16 Dec 2020 16:25:45 +0800</pubDate><description><![CDATA[一、需求
留言板需求，上传留言时，可拍照或者上传图片

二、调用拍照/上传文件功能

点击拍照按钮，调取相机或者文件
&lt;view class="upload-img"&gt;
	&lt;image src="../../static/image/messageBoard/m_b_upload_btn.png" @tap="onGetImgClick"&gt;&lt;/image&gt;
&lt;/view&gt;

data() {
	return {
		imageList:[],
	}
},
..]]></description><category></category></item><item><title><![CDATA[uniapp预览图片]]></title><link>https://blog.youkuaiyun.com/yan263364/article/details/111283461</link><guid>https://blog.youkuaiyun.com/yan263364/article/details/111283461</guid><author>yan263364</author><pubDate>Wed, 16 Dec 2020 15:57:27 +0800</pubDate><description><![CDATA[一、需求
最近有一个留言板需求，留言之后需要展示留言信息，信息里面除了文字还有图片。
点击图片，可预览图片。就用到了 uniapp 预览图片的功能：uni.previewImage(OBJECT)

二、使用
html
&lt;view class="img-c" v-show="item.pictureUrl"&gt;
	&lt;image class="img" 
		v-for="(itemImg, imgIndex) in item.pictureUrl"
		:key="imgIndex"
		m]]></description><category></category></item><item><title><![CDATA[微信公众号授权H5页面]]></title><link>https://blog.youkuaiyun.com/yan263364/article/details/111270231</link><guid>https://blog.youkuaiyun.com/yan263364/article/details/111270231</guid><author>yan263364</author><pubDate>Wed, 16 Dec 2020 15:39:03 +0800</pubDate><description><![CDATA[一、为何通过微信公众号授权
官方:
如果用户在微信客户端中访问第三方网页，公众号可以通过微信网页授权机制，
来获取用户基本信息，进而实现业务逻辑。

项目：
使用 uniapp 开发的 H5 项目，需要通过公众号授权后，才能获取用户信息。
PS： 如果用 uniapp 开发小程序，可以走小程序的授权，这次用的 H5

二、授权大致步骤
1、网页授权回调域名
	在微信公众号请求用户网页授权之前，开发者需要先到公众平台官网中的
“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配]]></description><category></category></item><item><title><![CDATA[vue项目之前端生成二维码]]></title><link>https://blog.youkuaiyun.com/yan263364/article/details/108009540</link><guid>https://blog.youkuaiyun.com/yan263364/article/details/108009540</guid><author>yan263364</author><pubDate>Mon, 14 Dec 2020 10:33:40 +0800</pubDate><description><![CDATA[一、前提
刚开始是通过后台生成二维码并存放在云上的。
后来公司的云，在获取到url后，图片不能及时的显示，需要等待几秒；
之后，用了腾讯云解决的，在现在这个活动中，竟然出现线上空白的情况
最终，选择前端生成二维码

二、实现
安装依赖包
npm install vue-qr --save

HTML:
&lt;vue-qr class="vue-qr" :margin="0" :text="downloadData.link" colorDark="#000" colorLight="#fff" size=]]></description><category></category></item><item><title><![CDATA[uniapp小程序版发布后，报错（MiniProgramError Cannot read property ‘data‘ of undefined）]]></title><link>https://blog.youkuaiyun.com/yan263364/article/details/110926115</link><guid>https://blog.youkuaiyun.com/yan263364/article/details/110926115</guid><author>yan263364</author><pubDate>Wed, 09 Dec 2020 14:53:55 +0800</pubDate><description><![CDATA[一、问题
小程序上传后，打开页面，不能正常调用接口。
通过真机模拟发现报错了，如下：


二、解决
调用接口时： 直接把 baseUrl 写全了，不能通过配置项进行配置。

原来的配置：


现在： 直接改 http 的 baseUrl


...]]></description><category></category></item><item><title><![CDATA[uniapp 分包--上传功能]]></title><link>https://blog.youkuaiyun.com/yan263364/article/details/110878481</link><guid>https://blog.youkuaiyun.com/yan263364/article/details/110878481</guid><author>yan263364</author><pubDate>Tue, 08 Dec 2020 18:13:32 +0800</pubDate><description><![CDATA[一、问题
通过HBuilder X--&gt;发行--&gt;小程序--微信(...)后，微信小程序提示上传失败。

二、原因
小程序上传项目大小限制为： 单包2M  总包8M 

三、解决
uniapp 分包
	分包时遇到的问题：
	1、安装 copy-webpack-plugin 时，提示 webpack 不存在，需要安装。
	调查后才知道，现在的项目是同事通过 HBuilderX 可视化界面创建的
	即没有package.json，也没有 webpack 配置。
	解决：项目工程互换，把原来的工程换位]]></description><category></category></item><item><title><![CDATA[vue项目之H5 app 生成海报功能]]></title><link>https://blog.youkuaiyun.com/yan263364/article/details/107960818</link><guid>https://blog.youkuaiyun.com/yan263364/article/details/107960818</guid><author>yan263364</author><pubDate>Wed, 28 Oct 2020 15:36:04 +0800</pubDate><description><![CDATA[一、需求
本次【世纪盛典】活动，分为三期，每期都有海报相关的工作内容。
海报带有动态的个人信息、头像、证书编号及二维码等。
本次活动需要在微信h5、小程序、app里面正常启动。

二、经过
网上查找使用了 html2canvas 这个插件来生成海报。
首先，加载依赖包
npm install html2canvas --save

使用
import html2canvas from 'html2canvas'

html2canvas 是基于已有 DOM 进行截图生成图片的，已有 DOM 如下：

	&l]]></description><category></category></item><item><title><![CDATA[NPM问题之 Unexpected end of JSON input while parsing near ‘...“array-to-sentence“:“‘]]></title><link>https://blog.youkuaiyun.com/yan263364/article/details/108105332</link><guid>https://blog.youkuaiyun.com/yan263364/article/details/108105332</guid><author>yan263364</author><pubDate>Wed, 19 Aug 2020 17:11:52 +0800</pubDate><description><![CDATA[问题
切换分支后，IDEA提示npm install，执行install之后，一直报错：

 Unexpected end of JSON input while parsing near '..."array-to-sentence":"'

解决
npm cache clean --force
// 清楚缓存后，再install
npm install


]]></description><category></category></item><item><title><![CDATA[vue项目之H5 app页面通过swiper实现中间变大，两边缩小的滑动轮播功能]]></title><link>https://blog.youkuaiyun.com/yan263364/article/details/108006488</link><guid>https://blog.youkuaiyun.com/yan263364/article/details/108006488</guid><author>yan263364</author><pubDate>Fri, 14 Aug 2020 16:30:59 +0800</pubDate><description><![CDATA[一、需求
微信H5，小程序，APP三端：手动滑动实现中间放大，两边图片缩小的效果。
可视区可看到三张图，其中左右两边的仅出现一小部分。如图


二、实现
按照依赖包
	npm install vue-awesome-swiper --save

HTML:
	&lt;swiper :options="swiperOption" ref="mySwiper" class="swiper"&gt;
      &lt;swiper-slide v-for="(item, index) in pictures" ]]></description><category></category></item><item><title><![CDATA[小程序uniapp项目之分享好友功能]]></title><link>https://blog.youkuaiyun.com/yan263364/article/details/106615506</link><guid>https://blog.youkuaiyun.com/yan263364/article/details/106615506</guid><author>yan263364</author><pubDate>Wed, 10 Jun 2020 16:19:58 +0800</pubDate><description><![CDATA[一、需求
点击分享好友或者微信好友，都分享给微信好友


二、code
都一样，需要调用微信提供的open-type=“share”
&lt;button class="btn share_friends"  open-type="share"&gt;{{dialogTipInfo.btnTxt}}&lt;/button&gt;


]]></description><category></category></item><item><title><![CDATA[小程序项目之图片不变形]]></title><link>https://blog.youkuaiyun.com/yan263364/article/details/106614931</link><guid>https://blog.youkuaiyun.com/yan263364/article/details/106614931</guid><author>yan263364</author><pubDate>Mon, 08 Jun 2020 11:27:53 +0800</pubDate><description><![CDATA[一、问题
原图应该显示

实际上显示

图片变形了。
二、解决
我们的小程序图片规则已经定义好了宽高比例，需要运营童鞋按照比例给图。
这种情况下，image标签用mode='widthFix'属性非常合适

&lt;image v-if="!liveInfo.promoteVideoUrl" mode='widthFix' :src="liveInfo.frontCoverUrl"&gt;&lt;/image&gt;

三、扩展
圆角设置，不是给image设置圆角的，外面又加了一层view容器，根据ui图的]]></description><category></category></item><item><title><![CDATA[vue项目之自定义组件实现PC端下拉加载]]></title><link>https://blog.youkuaiyun.com/yan263364/article/details/106121695</link><guid>https://blog.youkuaiyun.com/yan263364/article/details/106121695</guid><author>yan263364</author><pubDate>Thu, 14 May 2020 17:05:09 +0800</pubDate><description><![CDATA[一、需求
滑动 el-table 滚动条，实现 thead 不动，下拉 tbody 到底部时，el-table加载数据。
具体UI请看另一篇文章的需求 

PC端下拉加载
二、经过
同事正好有一个写好的下拉加载的组件，就用了

自定义组件 DivScrollPagination.vue
&lt;template&gt;
  &lt;div&gt;
    &lt;div v-if="loading==0" class="load-more"&gt;正在加载...&lt;/div&gt;
   &lt;!--]]></description><category></category></item><item><title><![CDATA[vue项目之PC端下拉加载]]></title><link>https://blog.youkuaiyun.com/yan263364/article/details/106119618</link><guid>https://blog.youkuaiyun.com/yan263364/article/details/106119618</guid><author>yan263364</author><pubDate>Thu, 14 May 2020 15:33:50 +0800</pubDate><description><![CDATA[一、需求
产品要求PC端实现下拉加载更多的数据。



二、经过
经调查，移动端用着比较好，PC端很少有用到。基本都是自己手写一个组件。
在git上有一个 vue-mugen-scroll，用的不多，但是实现起来很方便。



三、用法
先用npm安装了组件
npm install --save vue-mugen-scroll

然后，下拉加载功能需求在哪个页面用，就import

import MugenScroll from "vue-mugen-scroll"

vue – components加入]]></description><category></category></item><item><title><![CDATA[修改hosts文件后，win10提示不能保存文件]]></title><link>https://blog.youkuaiyun.com/yan263364/article/details/104154099</link><guid>https://blog.youkuaiyun.com/yan263364/article/details/104154099</guid><author>yan263364</author><pubDate>Mon, 03 Feb 2020 13:49:57 +0800</pubDate><description><![CDATA[一、问题
win10 -- C:\Windows\System32\drivers\etc -- host文件，
修改后不能保存

二、解决途径
试了很多方式，有效的方法：
1、根据一提供的路径，找到hosts文件


2、选中hosts文件，鼠标右键，点击属性选项

3、弹出框后，点击安全选项


...]]></description><category></category></item><item><title><![CDATA[基于Vue项目的TypeScript之函数基础篇]]></title><link>https://blog.youkuaiyun.com/yan263364/article/details/103033155</link><guid>https://blog.youkuaiyun.com/yan263364/article/details/103033155</guid><author>yan263364</author><pubDate>Wed, 27 Nov 2019 11:54:19 +0800</pubDate><description><![CDATA[一、函数
methods: {
 /**
  * ts-function 之【函数返回值】
  * 1、无参  2、有参
  */
 greet(): string {
   return "Hello World.";
 },
 greetParams(x: number, y: number): number {
   return x + y;
 },
 /**
  * ts-functio...]]></description><category></category></item><item><title><![CDATA[js之 H5 的 video 标签暂停播放视频]]></title><link>https://blog.youkuaiyun.com/yan263364/article/details/102587934</link><guid>https://blog.youkuaiyun.com/yan263364/article/details/102587934</guid><author>yan263364</author><pubDate>Wed, 16 Oct 2019 16:28:04 +0800</pubDate><description><![CDATA[一、问题
基于 video 标签播放的视频，大致功能是，点击预览按钮，弹出弹框，可以在线观看视频；
如果关闭弹框，视频还是在播放。
二、要求
关闭弹框，视频也关闭
二、code
vue



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