sayyy的专栏

略

略

略

略

略

略

略

略

前言uni-app 项目中，uni-app提供的video控件对H5的兼容性不好（该控件的主要使用目标是小程序）。H5中使用videojs播放器替换video控件videojs播放器在uni-app使用只指针对h5使用案例https://ext.dcloud.net.cn/plugin?id=2392操作步骤将该插件导入到HbuilderX中，得到一个示例项目。参考示例项目改造自己的项目即可。...

前言图片容器宽度已确定图片加载后，将图片容器按照图片的宽高比设置高度思路图片容器宽度已确定。uni-app的image组件，将mode设置为scaleToFill（不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素）。uni-app的image组件提供了@load事件。在@load事件中可以获得图片的宽、高。获得图片的宽、高后，计算图片容器的高度。使用内联样式，为图片容器设置图片高度。图片容器的宽高比与图片的宽高比一致。操作步骤image组件设置：mode设置为

前言略描述内容换行使用\r\n进行换行//获取“分享给朋友”按钮点击状态及自定义分享内容接口wx.onMenuShareAppMessage({ title: '我是分享标题', // 分享标题 desc: '我要换行\r\n第二行\r\n第三行', // 分享描述 link: 'https://xx', // 分享链接 imgUrl: 'https://xxx', // 分享图标URL type: 'link', // 分享类型,music、video或li

前言略数组和对象更改后视图不刷新当遇期望DOM一刷新，但其却未刷新怎么办？比如：在uniapp刷新DOM过程中，你修改了data中的属性。此时uniapp无法感知到属性已经发生变化了，因此，期待的DOM刷新未发生。我的数据是：return { list: [ {id: 1, ..., height:1}， {id: 2, ..., height:1}， ],}当我更新height时，期望的DOM刷新未发生。想知道为什么的，参考这里：Vue中数组和对象更改后视图不刷新的问题或

前言uniapp 关于分享的说明在这里分享场景分享的场景有很多，目前没有一个统一的分享方案。需要根据实际情况，在不同的场景下采用不用的方向方式。对分享场景分类：在微信浏览器中进行分享在手机浏览器中进行分享在App中进行分享在小程序中进行分享在微信浏览器中进行分享微信自带了一个浏览器。当点在微信中打开链接时，用的就是微信自带的浏览器。在微信自带的浏览器中，可以进行分享操作。如果选择“在浏览器打开”将脱离微信浏览器。此种情况下，需要引用微信 js-sdk，按照微信JS-SDK说明

前言要求图片加载后，保持宽高比（16：9）且充满图片区使用uni-app的image组件，将mode设置为scaleToFill（不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素）思路页面渲染完成后，获取图片的宽度根据图片的宽度，要保持16：9时的高度使用内联样式，为图片设置图片高度操作步骤获取图片的宽度，并计算图片的高度<script> export default{ data() { return { image

this.$nextTick函数nextTick函数是vue提供的，其作用为：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。重点1： 修改数据之后立即使用。重点2： 下次DOM 更新后回调。参考uniapp 页面渲染完成...

变量绑定/拼URL<navigator :url="'../company/company?id='+id">company</navigator>:url="..." 根据VUE中的说明，数据绑定时可以使用 JavaScript 表达式。... 处可以使用 JavaScript 表达式。'../company/company?id='+id 为JavaScript 表达式。VUE中关于JavaScript 表达式的描述...

前言在 uni-app 应用中，<a href="xxx" target="_blank">打开新页面</>不能实现预期的效果（在新窗口中打开页面）。uni-app 应用运行到chrome浏览器中在新窗口中打开外部链接<template> <view class="content"> <navigator url="#" @click="openBaidu">在新窗口中打开百度</navigator> </vi

前言swiper 实现纵向轮播，且支持鼠标滚轮滚动翻页操作方法（亲测可用）https://www.w3h5.com/post/607.html

前言使用 uParse 的优化版本 feng-parseuParse 暂不支持百度小程序，经测feng-parse可支持百度小程序。插件地址https://ext.dcloud.net.cn/plugin?id=1279使用方法按照插件中介绍的方法操作即可。bug修复feng-parse 对 video 标签处理的不好，自己完善一下即可...

前言uniapp3d轮播图uniapp实现3D轮播图从uniapp插件市场下载插件：https://ext.dcloud.net.cn/plugin?id=243#detail操作步骤导入插件<script> import currySwiper from "@/components/curry-swiper/curry-swiper.vue" import currySlide from "@/components/curry-swiper/curry-slide.

前言本文是【uni-app】rich-text 无法处理 video 的解决办法续集。用 uParse 富文本解析插件后，一切正常。今天同事突然发了个长图（800px*15150px）。发现版式异常了，如下：分析细心人可以看到，图片的两边有留白。通过上面的截图可以看到，在保持宽高比的前提下，将图片宽度调整为351.2px时，高度应该为6650.85px。通过上面的截图可以看到，image标签的实际高度为7101.56px。那么，空白就出来了。通过分析 uParse 组件，当发现图片宽度超

前言Hbuilder X 2.7.14.20200618假设需求在 【uni-app】自定义导航栏/标题栏 中提到，可以全局取消原生导航栏。全局取消原生导航栏后，就需要为每个页面均添加一个自定义导航栏。此时，可以将自定义导航栏封装成uniapp插件，并在每个页面中使用该插件。下面将该自定义导航栏封装成插件。插件封装插件名为：imgNavBar。在项目目录/components 目录下添加imgNavBar插件。imgNavBar.vue 代码为。<template>

前言Hbuilder X 2.7.14.20200618返回上一页并刷新let pages = getCurrentPages(); // 当前页面let beforePage = pages[pages.length - 2]; // 上一页uni.navigateBack({ success: function() { beforePage.onLoad(); // 执行上一页的onLoad方法 }});说明：在uniapp 中 getCurren

前言Hbuilder X 2.7.14.20200618什么是自定义导航栏默认导航栏或原生导航栏是啥样的，你懂的。但，我想给导航栏加个背景图，比如这样：我想给导航栏背景设置成渐变，比如这样：这时候就需要自定义导航栏。怎么自定义导航栏自定义导航栏的中心思想是：取消默认导航栏或原生导航栏。自定义导航栏，并放置到正确位置。取消默认导航栏或原生导航栏取消默认导航栏或原生导航栏有两个方式：全局取消原生导航栏单页面取消原生导航栏全局取消原生导航栏在 pages.json

前言Hbuilder X 2.7.14.20200618rich-text 无法处理 videouni-app 文档中关于 rich-text 介绍中明确说明 rich-text 支持什么（参考这里），其中并不包含 video 。解决办法在uni-app插件市场搜索parse插件使用。parse插件有很多，包含的功能也不尽相同。我播放 video 时使用的是uParse 富文本解析。uParse 富文本解析插件的使用在项目中导入插件。这步不详述了。不会的需要补补关于uniapp的使用

前言uniapp 开发者工具 HBuilderX 2.9.8是 IOS/苹果 系统?uni.getSystemInfoSync().platform == 'ios'是 Android/安卓系统？uni.getSystemInfoSync().platform == 'android'

前言调试基础库 2.12.0微信开发者工具 1.03.2008270uniapp 开发者工具 HBuilderX 2.9.8uni-swipper-dotuniapp官方推荐的swiper组件，该组件能够更换轮播图指示点，比如这样：插件地址： https://ext.dcloud.net.cn/plugin?id=284这里想说的是，在微信小程序发现该组件有时在切换图片时会有抖动现象（一直在高速反复切换图片）。要想获得美美的轮播图指示点，可以参考如下方案swiper组件支持对指示点换

前言调试基础库 2.12.0微信开发者工具 1.03.2008270uniapp 开发者工具 HBuilderX 2.9.8ios 上元素高度出现异常通过微信开发者工具预览无问题。安卓真机上表现正常：ios真机上表现不正常：分析过程使用微信开发者工具提供的真机调试功能，在 ios 真机上进行调试。查看元素样式是否存在异常。因使用rpx作为长度单位，首先检查了元素样式的单位是否为rpx，发现转换为了px。经过测试，微信小程序将rpx转换为px的过程并无问题。精简页面上的元素，确

前言使用uniapp创建WebSocket时发生错误：Error during WebSocket handshake: Unexpected response code: 302分析报302的原因是链接被重定向。因此，需要找到链接为什么被重定向。经过分析，是我将url写错导致302错误。将url修改对，错误消失。总结一下ws:// 和 wss:// 混了wss://是启用SSL的情况。ws://是未启用SSL的情况。ws://和wss://用混时，也会出现302错误。链接被权限拦截了

前言Hbuilder X 2.7.14.20200618 （不清楚uniapp的版本，用工具版本代替）关于uniapp多端：用uniapp对多端的支持不一致，适配工作很繁琐swiper的click事件在多端上，添加方法就不一样swiper代码<swiper class="swiper-box" @change="change" :current="current" :autoplay="true" > <swiper-item v-for="(item, index) i

前言Hbuilder X 2.7.14.20200618 （不清楚uniapp的版本，用工具版本代替）微信小程序中预览的图片溢出效果（非期望效果）-期望的效果分析rich-text 为已封装好的组件。向 rich-text传递参数后，由 rich-text进行展现（<rich-text :nodes="content|formatRichText"></rich-text>），目前未向开发者提供控制 rich-text展现的内容样式的方法。代码1：图片溢出的代码（

前言Hbuilder X 2.7.14.20200618 （不清楚uniapp的版本，用工具版本代替）官方提供的语法<view :class="{ active: isActive }">111</view><view class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">222</view><view class="static" :clas

前言Hbuilder X 2.7.14.20200618 （不清楚uniapp的版本，用工具版本代替）如何实现uniapp 内置提供了名为 onPullDownRefresh 的页面生命周期函数。该函数可以实现下拉刷新页面的功能。监听用户下拉动作，一般用于下拉刷新注意事项支付宝小程序startPullDownRefresh在开发者工具里会提示暂未开放，请勿使用。此种情况下，去uniapp的插件市场搜索其它方法。另，调用uni.startPullDownRefresh函数的效果与用

前言Hbuilder X 2.7.14.20200618 （不清楚uniapp的版本，用工具版本代替）对于下拉还是上拉我是分不清的（因为不管说下拉还是上拉，都没说参照物，也就是，说上拉也行，说下拉也行。按照uniapp的说法叫下拉下一页数据，这里为了根官方一致，也叫下拉加载更多）。如何实现uniapp 内置提供了名为 onReachBottom 的页面生命周期函数。该函数可以实现上拉加载更多的功能。页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事

前言css3 中增加了 calc() 函数calc() 函数语法：property: calc(expression)expression 表达式为： “+”、 “-”、"*"、"/" 表达式“+”、 “-“符号前后必须为空格，比如：calc(50% - 8px)。”*”、"/"符合无此要求。expression 表达式中允许嵌套函数（var 函数可以获取css变量），例如：.foo { --widthA: 100px; --widthB: calc(var(--widthA) / 2)

前言Hbuilder X 2.7.14.20200618 （不清楚uniapp的版本，用工具版本代替）需求，如下图：实现数据文件 viewData.jsconst flowList=[ { title: '喜欢李白,张飞和刘备一起来打野,测试一下王者荣耀是否好玩,还要测试只显示两行文字多于三个点', image: '../../static/eg/viewList/1.jpg', date: '07-07', commentNum: 12, clickNum: 33,

前言Hbuilder X 2.7.14.20200618 （不清楚uniapp的版本，用工具版本代替）onReady函数onReady是 uni-app 页面生命周期函数之一，其作用为：监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发重点：页面初次渲染完成。this.$nextTick函数nextTick函数是vue提供的，其作用为：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。重点1： 修改数据之后立即

前言Hbuilder X 2.7.14.20200618 （不清楚uniapp的版本，用工具版本代替）需求，如下图：尝试 Flex 布局的flex-grow属性flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。我以为能够纵向放大。经过实验和网上查找，该属性是横向放大（计算剩余宽度，不能计算剩余高度）。这个不行就换一个。手工计算高度定义高度变量export default { data() { return { newsPanelHe

前言os ：win10HBuilder X ：2.7.14.20200618微信开发者工具 win32 ：1.03.2006090问题每当使用微信开发者工具预览小程序时，均会在控制台（Console）看到警告（Warn）信息：Now you can provide attr wx:key for a wx:for to improve performance.问题原因uniapp的v-for写法导致。修改前的写法如下：<view class="comment-content" v

前言在App.vue中，可以一些定义全局通用样式，例如需要加一个通用的背景色，首屏页面渲染的动画等都可以写在App.vue中。举例<style> @font-face { font-family: yticon; font-weight: normal; font-style: normal; src: url('https://at.alicdn.com/t/font_1078604_3mrhac2o3oi.ttf') format('truetype'); }