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);

<switch :checked="isChecked" @change="switch4Change($event,4)" color="#57BE6C"/>switchChange(e,value){ console.log(e.detail.value,value) // true 4},第一个参数为event对象，第二个参数为额外要传入的值

1、遍历对象并赋值Object.keys(this.form).forEach(key=>{this.form[key]=''})

一、创建验证码组件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="

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

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

注： 依赖第三方插件 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...

我们在获取后端数据的时候，有时候会在列表中生成很多的input，而我们又想实时监听这些input时要如何处理呢<tr v-for="(item,index) in bstp" v-if="bstp"> <td><input type="text" name="" @input="newVal(index,item.value)" v-model="item....

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

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

一、npm安装：npm install --save js-md5二、需要使用的文件内部引入import md5 from 'js-md5';md5('holle')或注册成全局使用import md5 from 'js-md5';Vue.prototype.$md5 = md5;

一、数组1、当直接用索引直接设置一个项的时例如：this.arr[index] = newArr解决方法：this.$set(this.arr,index,newArr)；2、当直接修改数组长度时例如：this.arr.length = newLength解决方法：this.items.splice(index,1,newArr) 或者this.items.splice(newLength)二、对象1、由于Javascript的限制，Vue不可以检测对象属性的添加或删除var obj =

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

使用深度作用选择器，就可以在父组件中修改子组件的样式#demo >>> .inner { font-size: 40px;}深度作用选择器语法：父组件根元素选择器 >>> 子组件选择器注：如果是sass或less这种预编译语法则 不支持 >>> 这种形式有另外一种形式支持: /deep//deep/同时也支持css#demo /deep/ .inner { font-size: 40px;}...

使用computed配合watch监听变量变化data() { return { username:'', password:'' }},computed: { changeData() { const { username, password} = this return { username, password } }}, watch: { changeData(e) { //写入你需要监听的事件 } }

出现此问题的原因是因为ios手机会在transform的时候导致border-radius失效解决方法：在使用动画效果带transform的元素的上一级div元素的css加上下面语句：-webkit-transform:rotate(0deg);

<image :src="url" mode="" class="video_li_img" v-show="onoff=='0'"></image><image :src="img" @load="onoff='1'" mode="" class="video_li_img" v-show="onoff=='1'"></image>使用image的@load，使其加载好再进行展示

公共测试证书信息：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

1、在 nuve页面 中，Flexbox 是默认且唯一的布局模型。2、宽度使用100%无效，如需撑满页面可使用 width:750upx;3、nuve设置边框使用border:1px solid #d91d5a是无效的，需如下设置：border-width: 1px;border-color: #d91d5a;border-radius: 30upx;4、不可直接对父级div元素直接设置text的样式，需对文字单独设置样式5、如需在nvue页面设置溢出隐藏，则需在text设置如下属性：li

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

一、正常不进行请求的加密方式：app调用：http://api.test.com/api?参数1=1&参数2=2此方式会存在很严重的安全性问题，没有进行任何的验证，大家都可以通过这个方法获取到信息，导致数据泄露，并有可能会被篡改数据，造成更严重的问题。那么如何验证调用者身份并防止参数被篡改呢？二、使用MD5进行签名加密加入一个对应的secret并在调用接口时进行数据验证1、按照参数名把参数a:1,c:2,b:4进行首字母排序并进行拼接得到字符串a1b4c22、把secret加到字符串头部

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

一、如何实现锚点定位在scroll-view组件中有一个scroll-into-view属性：（值应为某子元素id。设置哪个方向可滚动，则在哪个方向滚动到该元素）。此属性的意思则是此属性的值为子元素设置的id时，则可跳转到子元素位置例如上面图片代码，点击tab切换栏时，改变toView的值，使其为对应下方id则可实现滚动到当前子元素位置二、如何实现滚动到子元素位置时改变tab栏状态此选择器可得到元素距离顶部的位置，在@scroll事件中监听子元素距离顶部距离，则可实现滚动改变tab栏状态功能

//转换成数组snsArr=str.split(/[(\r\n)\r\n]+/);//删除空项snsArr.forEach((item,index)=>{ if(!item){ snsArr.splice(index,1); }})

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

一、点击在线链接并复制在线链接二、在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'); 五、在组件中使用即可...

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、假设法假设当前数组中的第一个值是最大值，然后拿这个最大值和后面的项逐一比较，如果后面的某一个值比假设的值还大，说明假设错了，我们把假设的值进行替换。最后得到的结果就是我们想要的。// 获取最大值：var arr = [22,13,6,55,30];var max = arr[0];for(var i = 1; i < arr.length; i++) { var cur = arr[i]; cur > max ? max = cur : null}consol

一、安装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-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 {

一、字符串方法所有字符串方法都会返回新字符串。它们不会修改原始字符串。正式地说：字符串是不可变的：字符串不能更改，只能替换。split() 把字符串转换为数组var txt = "Hello"; // 字符串txt.split(""); // 分隔为字符length() 字符串长度var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";var sln = txt.length;indexOf()、lastIndexOf()

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