pgzero的博客

一、pages.json配置页面大小根据开发的横屏项目的横屏设计图分辨率以及硬件分辨率，比如分辨率是1280*800二、manifest.json文件修改在源码视图的"app-plus"里添加子项三、App.vue文件配置在onLaunch生命周期函数中添加四、配置单位提示在编译器中，点击工具，配置px转rpx/upx比例，需要用当前的设计稿大小，单位是px，出除以750，得到的就是转化的比例。在设置保留几位小数就好了

一、 需要去微信公众号后台配置js接口安全域名二、安装jweixin-modulenpm i jweixin-module三，在需要分享的页面引入<script> // #ifdef H5 let jweixin = require('jweixin-module') // #endif .....</script>四、请求后台接口获取配置项并处理分享distributrShare() { this.$http({ apiN

一、element使用cron1、引入vue-cronnpm install vue-cron2、main.js引入//全局引入import VueCron from 'vue-cron'Vue.use(VueCron);3、页面使用<template> <div class="cronDemo"> <el-popover v-model="isShow"> <el-input slot="reference" @clic

一、安装npm install --save-dev vue2-ace-editor二、子组件<template> <div class="echart-pie-wrap"> <div class="myEditorTop">{{ title }} [读/写]</div> <editor ref="myEditor" @init="editorInit" :value="value"

一、使用axios请求后台接口this.$http({ url:'请求地址', method: 'post', responseType:'blob', data: data,}).then(res => { this.downloadFile(res.data) })二、下载downloadFile(data) { // 文件导出 if (!data) { return } let url = window.URL.createObjectURL(new Blob

一、安装依赖npm install vue-quill-editor --savenpm install quill-image-extend-module --save-dev二、使用编辑器<template> <div class="quill-wrap"> <quill-editor ref="myQuillEditor" v-model="content" :options="editorOption" /> </div>&

var utterThis = new window.SpeechSynthesisUtterance('支付宝到账，323324234');window.speechSynthesis.speak(utterThis);

一、创建验证码组件identify.vue<template> <div class="s-canvas" style="display: inline"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div></template><script>export default{ na

一、安装sortablejs 依赖npm install sortablejs --save二、vue页面代码<template> <div > <el-table :data="tableData" row-key="id"> <el-table-column v-for="(item, index) in col" :key="`col_${index}`" :prop="dropCol[index].prop" :label="

一、对单个表单域进行校验如下，对于单个表单域，可以直接对表单域的rules参数进行配置，来实现格式验证，这种方法一般比较适用于格式验证比较简单的情况。如果需要进行验证的字段比较多，或者验证规则比较复杂，那么最好使用下方对整个表单校验的方式<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic"> <el-form-item

ref 有三种用法：1、ref 加在普通的元素上，用this.ref.name 获取到的是dom元素2、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。3、如何利用 v-for 和 ref 获取一组数组或者dom 节点注意：1、ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。2、如果ref 是循环出来的

一、安装axios$ npm install axios二、引入axiosimport axios from 'axios'Vue.prototype.$axios = axios;三、发送请求//get请求axios.get('/user', { params: { ID: 12345 }}).then(function (response) { console.log(response);}).catch(function (error) { conso

一、如何使用vue-router进行路由跳转1、标签形式//<router-link> 默认会被渲染成一个 `<a>` 标签<router-link to="/home">前往home页面</router-link>2、编程式形式// 字符串router.push('home')// 对象router.push({ path: 'home' })// 命名的路由router.push({ name: 'homeName'})二、如何进

一、点击在线链接并复制在线链接二、在App.vue或组件中引用此在线链接@import url('//at.alicdn.com/t/font_1807822_atwi7s0ni6g.css'); 三、组件中使用即可（注：此方法不兼容uniapp编译成小程序，如需兼容小程序请看跳转此文章https://blog.youkuaiyun.com/pgzero/article/details/106022225）...

一、从图标库下载图标至本地二、把下载下来的iconfont.css文件放入项目三、复制在线链接代码到iconfont.css并替换@font-face（注：只需留src只需要留ttf格式地址）四、在文件的style中引入文件@import url('/static/icon/iconfont.css'); 五、在组件中使用即可...

再当前页面加入此代码即可scroll-view ::-webkit-scrollbar { width: 0; height: 0; background-color: transparent;}

一、首先git开发vue-element-template版本码云地址：https://gitee.com/panjiachen/vue-admin-template.git二、安装依赖包# 安装依赖npm install# 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题npm install --registry=https://registry.npm.taobao.org# 本地开发 启动项目npm run dev运行项目即可开

使用vue-qrnpmnpm install vue-qr --saveimportimport vueQr from 'vue-qr'使用<vue-qr :logoSrc="imageUrl" text="xxx" :size="200"></vue-qr> <script> export default { name: "qecode", data() { return {

Vue动画库插件animategit地址：https://github.com/daneden/animate.css演示地址：https://www.dowebok.com/demo/2014/98/如何在vue项目中使用呢一、安装npm install animate.css --save二、使用<!--Vue中，要做动画或者过渡都需要加一个transition标签--><!--enter-active-class="animated tada"，进入生效动画直接使用

1、首先使用npm下载依赖；npm install --save less less-loader2、如果第一步安装失败，即代表less版本太高npm install --save less-loader@5.0.0 -snpm install --save less@3.9.0 -s安装完毕即可使用less

一、安装babel-polyfillnpm install babel-polyfill -D二、然后在main.js里引入mport 'babel-polyfill'三、修改webpack配置文件webpack.base.conf中{ test: /\.js$/, loader: 'babel-loader', include: [resolve('src'), resolve('test'),resolve('static'), resolve('node_modules/we

//#ifdef APP-PLUS plus.os.name=="Android"?plus.runtime.quit():plus.ios.import("UIApplication").sharedApplication().performSelector("exit");//#endif

在mainfest.json的plus中以下位置添加："statusbar":{ "immersed": true/*沉浸式状态栏*/ },

公共测试证书信息：MD5: F9:F6:C8:1F:DB:AB:50:14:7D:6F:2C:4F:CE:E6:0A:A5SHA1: BB:AC:E2:2F:97:3B:18:02:E7:D6:69:A3:7A:28:EF:D2:3F:A3:68:E7SHA256: 24:11:7D:E7:36:12:BC:FE:AF:2A:6A:24:BD:04:4F:2E:33:E5:2D:41:96:5F:50:4D:74:17:7F:4F:E2:55:EB:26应用签名: f9f6c81fdbab50147

自定义导航栏时，导航内容会和手机自带的状态栏相重叠，为了解决这个问题可以加如下代码： plus.navigator.setFullscreen(true);

手机进入时直接是横屏，可以这样设置：onShow() { plus.screen.lockOrientation('landscape-primary');},onUnload() { plus.screen.lockOrientation('portrait-primary');},

dome地址：https://alvarotrigo.com/fullPage/examples/autoHeight.html一、引入fullpage.css、fullpage.js<link rel="stylesheet" href="css/fullPage.css"><script src="js/jquery.min.js"></script><script src="js/fullPage.js"></script>二、H

一、新建rem.js文件(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { ...

注： 依赖第三方插件 clipboard一、安装插件npm install vue-clipboard2 --save二、全局注入（main.js）import VueClipboard from 'vue-clipboard2'Vue.use(VueClipboard)三、使用<ul class="file-list"> <li v-for="(f, i...

一、修改请求静态资源的路径打开config下的index.js文件，修改assetsPublicPath的值，从‘/’改为‘./’。即从根路径改为相对路径。build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths asse...

一、下载nodejs二、安装Vue-cli脚手架工具如果已经装过就不需要再操作以上两步npm install -g vue-cli三、创建应用vue init webpack app四、运行项目npm run dev...