uni-app教程五(页面跳转、本地数据缓存)

首先,想看更多请进入官网:https://uniapp.dcloud.io/api/router?id=navigatetouniapp页面跳转方式1. uni.navigateTo(object)保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack()可以返回到原页面。需要跳转应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 ‘path?key=value&key2=val
分类: 其他 发布时间: 10-17 18:08 阅读次数: 0

uni-app教程六(常用事件、生命周期)

uniapp的生命周期1. 应用级生命周期App.vue内定义的钩子函数就是应用生命周期钩子函数首次加载页面是触发2. 页面级生命周期<template> <view ref="ref" class="test-container"> <text>{{message}}</text> <button @click="addMsg">点击</button> </vie
分类: 其他 发布时间: 10-17 18:08 阅读次数: 0

uni-app教程七(下拉刷新、上拉加载)

下拉刷新定义 onPullDownRefresh 处理函数(和onLoad等生命周期函数同级),监听该页面用户下拉刷新事件。需要在 pages.json 里,找到的当前页面的pages节点,并在 style 选项中开启 enablePullDownRefresh。在组件中使用下拉刷新:上拉加载onReachBottom页面滚动到底部的事件(不是scroll-view滚到底),常用于上拉加载下一页数据。如使用scroll-view导致页面级没有滚动,则触底事件不会被触发源码如下:&
分类: 其他 发布时间: 10-17 18:08 阅读次数: 0

vue项目首页优化问题(前后端都要优化)

本篇主要讲解 Vue项目打包后 dist >>js>>vendor.js文件很大 如何对它进行优化 以及开启Vue的压缩 和 nginx gzip 压缩的使用1. vendor.js 优化(减少体积)由于Vue项目随着功能变多 依赖也会随之变多,减少vendor.js的主要方法就是将其 不打包依赖!!1.1 第一步、cdn引入各种包index.html中cdn的方式引入vue、vuex、axios、vant-ui、element-ui、等包,如下图:1.2 第二步、在
分类: 其他 发布时间: 10-17 18:08 阅读次数: 0

vue-cli4打包优化(webapck优化)

一、去除生产环境sourceMapsourceMap资源映射文件,存的是打包前后的代码位置,方便开发使用,这个占用相当一部分空间module.exports = { // 根据你的实际情况更改这里 publicPath, assetsDir: 'assets', lintOnSave: true, productionSourceMap: false,}二、对资源文件进行压缩需要下载 compression-webpack-plugincnpm i compression
分类: 其他 发布时间: 10-17 18:08 阅读次数: 0

前端优化中的路由懒加载

懒加载:也叫延迟加载,即在需要的时候进行加载,随用随载。 使用懒加载的原因: vue 是单页面应用,使用webpcak打包后的文件很大,会使进入首页时,加载的资源过多,页面会出现白屏的情况,不利于用户体验。运用懒加载后,就可以按需加载页面,提高用户体验非懒加载的路由配置:import Vue from 'vue'import Router from 'vue-router'import DefaultIndex from '@/components/DefaultIndex'import I
分类: 其他 发布时间: 10-17 18:08 阅读次数: 0

vue开发网站seo优化方法

前言:因为用了vue等js的数据绑定机制来展示页面数据,爬虫获取到的html是模型页面而不是最终数据的渲染页面,搜索引擎是不回去执行请求到的js。vue的项目都是ajax请求数据,引擎爬虫进入页面获取不到文字内容,现在大多数解决方案是不采用ajax渲染数据,而是采用server端渲染,也就是所谓的SSR。目前基于vue的方案是Next.js,同类型的也有React版的Nuxt.js所以服务端渲染就是尽量在服务器发送到浏览器前,页面上是有数据可让爬虫进行爬取...
分类: 其他 发布时间: 10-17 18:08 阅读次数: 0

uniapp 小程序打包发布

1、在项目的manifest.json中选择小程序,配置AppID2、在微信小程序后台配置线上合法域名登陆微信公众平台–>开发---->开发设置—>服务器域名添加项目用到的域名3. 打包,HbuilderX 发行—>小程序填写小程序名,和APPId,点击发行。(这里的小程序名字是无意义的,但是要有,具体的小程序名字是在微信公众平台配置的。)接下来会在项目根目录下生产unpackage—>dist—build—mp-weixin目录小程序开发者工具会自动
分类: 其他 发布时间: 10-17 18:08 阅读次数: 0

标题字标记&空格与特殊符号

《个人练习笔记三》标题字标记标题字标记由h1~h6共六种标记组成<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></hea
分类: 其他 发布时间: 10-17 18:08 阅读次数: 0

格式化文本标记

《个人练习笔记四》文本修饰标记文本修饰标记各类浏览器均支持,各类页面开发工具中仍然有这类标记。标记说明< b>你好!< /b>定义加粗< i>你好!< /i>定义斜体< u>你好!< /u>定义下划线< del>你好!</ del>定义删除线< sup>你好!</ sup>定义上标< sub>你好!</ s
分类: 其他 发布时间: 10-17 18:08 阅读次数: 0

字体font标记&段落与排版标记(萌新必看)

《个人学习笔记五》字体font标记在不指定任何样式的情况下,IE浏览器会把字体显示为3号、黑色、宋体。因此设计网页时,根据需要更改不同段落的字体。HTML5中可以试用CSS中的字体属性代替。1.基本语法< font face="" size="" color="" >…< /font>2.属性说明font标记的属性、值及其说明属性值说明size+1~+7 , 1~7 , -1~-7正数字越大字号越大,负数字越大字越小colorrgb(r
分类: 其他 发布时间: 10-17 18:08 阅读次数: 0

超链接语法介绍、路径&部分应用(萌新必看)

《个人学笔记六》超链接的语法超链接,即超级链接,就是指按内容链接。超级链接在本质上属于一个网页的一部分,它是一种允许我们同其他网页或站点之间进行连接的元素。各个网页链接在一起后,才能真正构成一个网站。在超文本文档中,超链接用标记语言的标签指出。超链接是Web页面区别于其他媒体的重要特征之一,网页浏览者只要单击网页中的超链接就可以自动跳转到超链接的目标对象,且超链接的数量是不受限制的。文本超链接是分配目标URL的字或短语,图片超链接是为整个图片分配默认超链接,也可以为图片分配一个或多个热点。(借鉴于百度
分类: 其他 发布时间: 10-17 18:08 阅读次数: 0

flex:1的各种算法看CSS精通精通那里面有

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>131-伸缩布局</title> <style> *{ margin: 0; padding: 0; } ul{ list-style: non
分类: 其他 发布时间: 10-17 18:08 阅读次数: 0

background-size之详解

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>112-背景尺寸属性</title> <style> *{ margin: 0; padding: 0; } ul{ width: 800px;
分类: 其他 发布时间: 10-17 18:08 阅读次数: 0

background-origin默认从padding-box开始的哈

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>113-背景图片定位区域属性</title> <style> *{ margin: 0; padding: 0; } ul li{ list-s
分类: 其他 发布时间: 10-17 18:08 阅读次数: 0

background-clip默认从border开始的哈

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>114-背景绘制区域属性</title> <style> *{ margin: 0; padding: 0; } ul li{ list-sty
分类: 其他 发布时间: 10-17 18:08 阅读次数: 0

sort实现

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script type="text/jav
分类: 其他 发布时间: 10-17 18:08 阅读次数: 0

详解length charAt indexOf lastIndexOf includes concat slice substring substr详解

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script type="text/jav
分类: 其他 发布时间: 10-17 18:08 阅读次数: 0

js的join split startsWith endsWith

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script type="text/jav
分类: 其他 发布时间: 10-17 18:08 阅读次数: 0

css的border-radius注意点

<!DOCTYPE html><html><head> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .one { width: 200px; height: 200px; border
分类: 其他 发布时间: 10-17 18:08 阅读次数: 0