RosaChampagne-CSDN博客

使用pdfjs-distpackage.json..."pdfjs-dist": "2.6.347"...PdfModal.vue<template> <div> <a-modal v-if="visible" class="pdf-modal" title="导入 PDF 页面" :visible="visible" :centered="true" :mask-closable

2022-03-16 14:49:14 1063

原创 Vue 全家桶（vue3、vue-router、vuex、axios、vue-i18n）项目搭建

生成一个vue项目环境配置，安装 Vue-cli 3.0 脚手架工具npm install -g @vue/cli初始化项目vue create <projectName>添加依赖yarn add vue-router -Syarn add vuex -Syarn add axios -S配置vue-router在src下创建route文件夹和下面的index.jsimport { createRouter,createWebHashHistory}

2022-03-03 10:25:42 1659

原创在项目中使用 vuepress 搭建组件文档报错 Uncaught ReferenceError: global is not defined

问题描述解决方案在config.js文件里面加上如下配置:configureWebpack: { node: { global: true, process: true },...}写在最后的话: 终究是webpack没有学过, 遇到这种错误就手足无措, 看了一天也没看出来, 还好请教公司大佬帮忙解决的...

2022-01-05 18:37:05 2132

原创 H5 Vue 视频 video 支持预览图 poster

最近项目上要求文章中插入视频，并且视频需要支持预览图，给用户更好的视觉效果。本来以为加上poster就够了，但是没想到 ios 微信内置浏览器会有如下这种效果，很影响视觉体验。优化步骤：1、上传视频的时候，获取视频的宽高。<div v-for="(item, idx) in materials" :key="idx"> <video :ref="`videoView${idx}`" class="cover" :src="item.url" /></div&g.

2021-12-02 15:20:23 3041 1

原创微信小程序公众号订阅消息模板正则参数校验

自己配置订阅消息模板，如果参数格式不正确，会导致订阅消息发不出去，所以在创建模板的时候需要校验参数格式代码：<script>const validateRules = { letter: /^[a-zA-Z]+$/, symbol: /^[ '.,:;*?~`!@#$%^&_+=)(<>{}\-\][/\\\\"|]+$/, character: /^[a-zA-Z0-9 '.,:;*?~`!@#$%^&_+=)(<>{}\-\][/\

2021-08-10 16:22:16 1623

原创微信网页 H5 跳转到微信小程序 Vue wx-open-launch-weapp 图片样式问题

前段时间，有需求：H5跳转到微信小程序页面，于是查了微信官方文档 <wx-open-launch-weapp>只需要微信小程序的originalId和某个页面的路径即可最难受的是：样式问题需求：点击上面的卡片，进入微信小程序<template> <wx-open-launch-weapp :username="originalId" :path="pages/home/index.html" > <script type="

2021-08-10 16:07:27 1337 3

原创 js 处理数组层级化

实例：实现Ant Design Vue的级联选择层级数据：有父子关系的数组，且子节点都会放到该节点的children下。<a-cascader :options="options" />data() { return { options: [], };},created() { this.getData();},methods: { getData() { const data = [ { "id":"6040

2021-03-04 14:11:44 868 1

原创 H5 微信小程序价格保留两位小数分为整数部分和小数部分

在项目中经常遇到将价格分为整数和小数部分，字体大小不一样显示。const actualNumber = item.actualAmount.toFixed(2);const priceArray = actualNumber.split('.');item.actualAmountText = priceArray[0];item.amountDecimalText = `.${priceArray[1]}`;...

2021-01-05 08:55:28 498 1

原创微信小程序 API 封装工具类

项目结构：http.jsimport { config } from '../config/config'import { message } from '../common/message'import { storageKeys } from '../common/constant'import { promisify } from '../utils/util'const request = async (url, data = {}, method) => { if (u

2020-12-09 10:47:28 341

原创微信小程序 Canvas画图

代码：generateCertification () { wx.showLoading({ title: '正在生成证书', mask: true }) this.createCertification(); setTimeout(() => { // 将生成的canvas图片，转为真实图片 const query = wx.createSelectorQuery(); query.select('#myCanvas') .fi.

2020-12-07 17:28:44 517

原创微信小程序路由跳转 MiniProgramError {“errMsg“:“navigateTo:fail webview count limit exceed“} Object

微信小程序跳转页面页面栈层数限制，如果继续使用navigateTo会报错，所以统一处理，报错了就用redirectTo/** * 跳转到下一页面 * 1.支持只跳页面,不带参数 * eg: jump('/pages/index/select-address/select-address') * 2.支持跳页面, 页面url 后面以"?"的方式带参数: * eg: jump('/pages/index/select-address/select-address?isEnd=true&a

2020-12-01 09:50:23 2405

原创微信小程序搜索关键字高亮显示

效果图：将搜索结果挨个格式化为数组，然后在渲染的时候判断type是否等于1，如果等于1，那就高亮显示。主要代码：<view class="address-title"> <text wx:for="{{item.titleArr}}" wx:key="*this" class="{{item.type === 1 ? 'highlight' : '' }}">{{item.text}}</text></view>/** * * @pa

2020-11-19 10:31:48 1340 3

原创微信小程序腾讯地图格式化路线

效果图： qqmapsdk = new QQMapWX({ key: 'xxxxx' }); qqmapsdk.direction({ mode: 'driving', from: { latitude: '30.951471', longitude: '121.481774' }, to: { latitude: '30.952991', longitu

2020-11-16 17:53:08 286 1

原创微信小程序自定义导航栏

效果图：导航栏高度计算：导航栏高度 = （胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度状态栏到胶囊的间距：胶囊距上距离-状态栏高度计算导航栏高度//app.jsApp({ onLaunch () { // 获取系统信息 const { statusBarHeight, platform } = wx.getSystemInfoSync(); // 胶囊按钮位置信息 const { top, height } = wx.getMenuButt

2020-11-12 15:32:18 219

原创 uniapp 微信小程序空格不显示问题

在css样式中添加这个代码即可white-space: pre-wrap;pre-wrap表示保留空白符序列，但是正常地进行换行。

2020-08-27 09:33:03 1570

原创 uniapp 微信小程序 Vue H5 跳转页面定位滑动到指定位置

微信小程序需要看到滑动效果：scroll-into-view：值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素<scroll-view v-if="showPage" scroll-y :scroll-into-view="scrollViewId" class="member-container">...... <div id="freight-coupon-box"> </div> <div id="me

2020-08-20 13:41:12 1488

原创 Vue 跳转页面定位到某个位置 scrollIntoView 锚点滚动

效果图：html代码：<div id="member-goods-list-box"> <div class="member-goods-container"> <div class="member-goods-label"> <div class="member-goods-text-one">Prime</div> <div class="me

2020-07-30 14:23:39 5533 2

原创微信小程序 uniapp 轮播图 swiper 自定义指示点 dot样式

效果图：html代码：<swiper class="img-swipe" :autoplay="true" :circular="true" :indicator-dots="false" :interval="3000" :current="swiperCurrent" @change="swiperChange"> <swiper-item v-for="(ad, index) in couponAds" :key="index"> <img

2020-07-29 16:45:53 3747

原创 H5开发跨域 postMessage 传数据 token

最近遇到一个需求，需要将两个不同域名的h5网站进行数据共享，于是在跳转页面的时候，需要传递token完成登录。A页面（http://127.0.0.1:8080/search）：let activityWindow = window.open('http://127.0.0.1:8081/h5-home/activity')setTimeout(() => { activityWindow.postMessage('postMessageData', 'http://127.0.0.1

2020-07-03 15:02:45 1107 2

原创 JS 关于数组常用的方法 some every map filter forEach find findIndex concat includes reverse

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。注意：filter() 不会对空数组进行检测。注意：filter() 不会改变原始数组。...

2020-06-08 13:47:23 235

原创 CSS H5 移动端开发 overflow: scroll 不显示滚动条问题（ios 暗黑模式不生效）

在做H5的开发时，需求要求显示滚动条，但是加上overflow: scroll;不起作用，在电脑上调试是没有问题的，但是在真机上不显示滚动条。于是采用手动添加的方式解决，但是这种方式在IOS的暗黑模式下是不生效的，因为我的这个页面背景是白色，而在IOS的暗黑模式下，滚动条也是白色，只有深色背景可以看见滚动条。.article-content { max-height: 6.4rem /* 480/75 */; overflow: scroll; -webkit-overfl.

2020-05-26 14:52:25 6324

原创 Vscode 基础必备常用插件

1、Auto Close Tag自动添加HTML/XML关闭标记2、Auto Rename Tag自动修改匹配的 HTML 标签3、Code Spell Checker代码的拼写检查4、Color Highlight突出显示颜色5、CSS Peek允许查看css ID和类字符串作为从html文件到相应css的定义。允许查看和转到定义。6、cssrem将px转为rem7、Git History查看git日志、文件历史记录、比较分支或提交8、GitL...

2020-05-15 14:46:40 2156

原创 vue 跳转页面并传递参数

方式一：在router文件里面配置路径的时候，将id放在路径后面 { path: '/test/detail/:id', name: 'test-detail', component: () => import('./views/test/detail.vue'), meta: { title: '测试' } }跳转页面使...

2020-04-27 13:52:56 310

原创 CSS 最后一个元素不要border-bottom

.goods-spec-item:not(:last-child) { border-bottom: 1rpx solid #EEEEEE;}

2020-04-12 16:16:27 4760

文件上传和jsp标签的jar包

空空如也