- 博客(40)
- 收藏
- 关注
RSS订阅原创 微信小程序（路由及组件跳页传参） 小效果
（1）API路由跳页传参（2）navigator导航组件跳页传参商品列表展示页代码如下：//wxml<view class="goodsList"> <view class="goodBox" bindtap="toDetail" wx:for="{{goods}}" data-item="{{item}}" w...
2019-11-29 15:09:36
222
原创 微信小程序（组件跳转、规范、层级准备）
（1）路由API跳转小结（2）hover样式（3）navigator导航组件跳转（4）路由跳转规范（5）页面层级准备首先简单回顾下路由API跳转:wx.navigateTowx.navigateBackwx.redirectTowx.switchTabwx.reLaunch除了使用路由API进行页面跳转外，小程序宿主环境也提供了导航组件navigator进行页面跳转。hov...
2019-11-29 11:58:16
359
原创 微信小程序（页面栈和API跳转）
（1）数据操作限制补充（2）页面栈（3）API页面跳转—router路由APIwx.navigateTowx.navigateBackwx.redirectTowx.switchTabwx.reLaunch数据操作限制针对上节所讲的程序注册器与页面注册器，简单做下补充，即页面数据data的操作限制（1）直接修改Page实例的this.data而不调用this.setData是无...
2019-11-29 11:45:08
446
原创 微信小程序逻辑层与程序注册构造器及 小程序生命周期、运行机制、场景值
（1）小程序逻辑层 App Service（APP服务）（2）ServiceWorker（3）web worker（4）程序构造/注册器App()逻辑层 App Service（APP服务）小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发者 JavaScript 代码的运行环境以及微信小程序的特有功能。逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。...
2019-11-27 16:36:54
284
原创 微信小程序（跳页之tabBar导航跳转）
tabBar小程序导航简介：小程序根目录下的 app.json 文件用来对微信小程序进行全局配置在小程序配置文件里面可以设置tabBar属性： "tabBar": { "color": "#333333", "list": [ { "pagePath": "pages/index/index", "text": "首页", ...
2019-11-25 16:27:41
818
原创 微信小程序（小程序模型与宿主环境）
（1）小程序模型（2）模型基本工作方式（3）数据驱动（4）通信模式（5）WebView（6）JsCore（7）宿主环境小程序可以调用宿主环境/微信提供的微信客户端的能力，这就使得小程序比普通网页拥有更多的能力(扫一扫、摇一摇)。小程序的运行环境分成渲染层和逻辑层， WXML 模板文件和 WXSS 样式文件工作在渲染层，JS 逻辑文件工作在逻辑层。渲染案例渲染“Hello Wor...
2019-11-25 15:37:50
195
原创 微信小程序（JSON配置文件）
新建页面新建页面page（1）手动创建①右键单击 [pages] 文件夹，在弹出的菜单中选择“新建目录”②右键单击新建的目录，在弹出的菜单中选择“新建Page”（2）自动创建直接在app.json文件的pages选项中将新页面的路径写好，系统会自动创建所对应的四个文件page.wxml模板文件、page.wxss样式文件、page.json配置文件、page.js逻辑文件删除页面pa...
2019-11-25 15:12:13
2012
原创 微信小程序（发布审核、人员及目录结构分析）
上传代码同预览和真机调试不同，上传代码是用于提交体验或者审核使用的。点击开发者工具顶部操作栏的上传按钮，填写版本号以及项目备注，需要注意的是，这里版本号以及项目备注是为了方便管理员检查版本使用的，开发者可以根据自己的实际要求来填写这两个字段。上传成功之后，登录小程序管理后台 - 开发管理 - 开发版本 就可以找到刚提交上传的版本了。可以将这个版本设置 体验版 或者是 提交审核项目上传编...
2019-11-25 09:40:39
308
原创 AJAX之状态值+状态码+HTTP请求
HTTP请求HTTP简介http是计算机通过网络进行通信的规则，使浏览器去服务器请求信息和服务。HTTP是一种无状态协议（他可以自己保存东西cookie）：无状态指的是不建立持久的连接，即服务端不保留连接的相关信息，即断开请求和响应后是没有记忆的。HTTP请求是一步完成的吗？—NOHTTP请求步骤一个完整的HTTP请求过程，通常包含以下7个步骤（1）建立TCP连接（2）WEB浏览器...
2019-11-15 19:10:35
931
原创 AJAX请求5步法
AJAX请求5部曲：（1）创建XMLHttpRequest异步对象（2）设置回调函数，针对不同的响应状态进行处理—监听Ajax的状态readyState的改变事件onreadystatechange（3）使用open方法与服务器建立连接（4）send注册事件，设置和服务器的交互信息，向服务器发送数据（5）在回调函数中针对不同的响应状态进行处理，更新界面简称：AJAX为异步处理，也叫异...
2019-11-15 18:54:20
549
原创 AJAX简介与原理
什么是AJAX？正如之前所说，Ajax 即Asynchronous Javascript And XML（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术（←本质）。Ajax = 异步 JavaScript 和 XML或HTML （标准通用标记语言的子集）工作实现原理：JavaScript和XML在AJAX中都是异步工作的，因此，任何使用AJAX的web应用...
2019-11-14 19:24:30
149
原创 AJAX+ML+DTD概念
什么是AJAX?ajax 的全称是Asynchronous JavaScript and XML，其中，Asynchronous 是异步的意思，它有别于传统web开发中采用的同步的方式。AJAX代表异步JavaScript和XML，它是一组web开发技术，允许web应用程序异步工作，在后台处理对服务器的任何请求等等，那么什么是AJAX ？JavaScript是一种流行的编码语言，在其功能中，...
2019-11-14 19:12:00
93
原创 32.VUE之全局API（扩展实例构造器extend）
什么是全局API？全局API并不在构造器里，而是先声明全局变量或者直接在Vue上定义一些新功能，Vue内置了一些全局API，比如本节要介绍的指令Vue.directive通俗理解：就是在构造器外部用Vue提供的API函数来定义新的功能。什么是Vue.extend？Vue.extend指的是Vue扩展实例构造器也叫构造器的延伸，在vue构造器的外部扩展构造器，经常和组件搭配使用。按照用法分...
2019-11-04 19:49:56
166
原创 VUE之全局API（自定义指令directive）
什么是全局API？全局API并不在构造器里，而是先声明全局变量或者直接在Vue上定义一些新功能，Vue内置了一些全局API，比如本节要介绍的指令Vue.directive通俗理解：就是在构造器外部用Vue提供的API函数来定义新的功能。常用vue 的全局 API列表1、Vue.directive 自定义指令2、Vue.extend 扩展实例构造器3、全局操作Vue.set + Vue....
2019-11-04 19:08:26
610
原创 VUE之过渡transition
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：在 CSS 过渡和动画中自动应用 class–基础动画可以配合使用第三方 CSS 动画库，如 Animate.css–CSS动画在过渡动画钩子函数中使用 JavaScript 直接操作 DOM—JS动画可以配合使用第三方 JavaScript 动画库，如 Velocity.js—JS动画库Vue 提供...
2019-10-31 20:18:18
449
原创 vue组件之（父与子和非父子通信）
父子组件通信父子组件传值通信假设第二层组件想和第一层组件进行通信，分析其传值过程1、(第一层向第二层传值)：父组件通过props传值到子组件，如此便实现父子组件向下通信2、(第二层向第一层传值)：子组件通过触发自定义事件$emit向父组件传值，如此便实现了父子组件向上通信跨级组件通信假设第三层组件想和第一层组件进行通信1、(第一层组件向第三层组件传值)—禁止第一层直接传值到第三层，...
2019-10-31 19:00:49
352
原创 VUE之组件（插槽slot与可复用组件）
插槽slot当子组件部分内容是通过父组件传递DOM进行显示时，可以不用父组件props传值的比较挫的语法，Vue中提供了一种新型语法：插槽slot。废话不多说看代码：<!-- html代码 --> <div id="app"> <my-blog> <h2>格林童话</h2> <cite>格林兄弟...
2019-10-31 14:38:22
599
原创 VUE之组件（绑定原生事件、$listeners、$ref）
组件绑定原生事件一个组件的根元素上直接监听一个原生事件代码如下<!-- html代码 --> <div id="demo"> <btn @click="show"></btn> </div>// vue代码 Vue.component('btn', { template: `<div> &...
2019-10-30 19:42:44
2337
原创 VUE之组件（组件细节、模块系统、v-model语法糖）
H5编码规范<!-- html代码 --> <div id="demo"> <table> <tbody> <row></row> </tbody> </table> </div><!-- vue代码 --> <...
2019-10-29 19:33:29
858
原创 props特性的深入了解
Prop命名风格（1）Prop 的命名风格①PascalCase首字母大写命名即大驼峰法②camelCase 小驼峰命名法③kebab-case 短横线分隔命名法注意：HTML 中的特性是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，驼峰命名法的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名<!-...
2019-10-28 21:18:41
440
原创 图书管理小小案例
今天做了一个图书管理小小案例废话不多说代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>图书馆</title> <style type="text/css"> * { margin: 0; hei...
2019-10-24 19:58:22
355
原创 ES6之模板引擎&&字符串模板x-template
字符串模板的用途及理解在js里面，经常需要使用js往页面中插入html内容写过一点前端的都会碰到需要使用JS字符串拼接HTML元素然后append到页面DOM树上的情况。一般的写法都是使用+号以字符串的形式拼接，如果html很短还好说，但是遇到描述里面的这么大段，直接用字符串存储会很困难，因为不光要处理单引号，还需要很多「+」号把字符串一个个连接起来，十分的不方便。比如有的时候需要使用弹出框...
2019-10-24 11:19:49
692
原创 动态组件之vue选项卡
keep-alivekeep-alive译为活着—组件的失活缓存失活缓存keep-alive：重新创建动态组件的行为通常是非常有用的，但是在这个案例中，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来接下来给大家分享一个选项卡代码<!DOCTYPE html><html> <head> <meta charset="ut...
2019-10-23 20:54:15
258
原创 VUE之组件（组件通信、单向数据流）
组件通信我们已经知道，从父组件向子组件通信，通过 props 传递数据就可以了，但 Vue 组件通信的场景不止有这一种，归纳起来，组件之间通信可以用下图表示。单向数据流单向数据流是父子组件的核心概念，props是单向绑定的。当父组件的属性发生变化的时候，会传导到子组件。但是反之，为了防止子组件无意间修改来父组件的状态，从下往上的数据流是不允许的。当父组件属性改变时，会传进子组件。而子组...
2019-10-23 19:11:55
663
原创 VUE之组件（复用性、props、单向数据流）
组件组织通常一个应用会以一棵嵌套的组件树的形式来组织。–VUE：组件化、数据驱动组件复用性可以将组件进行任意次数的复用，例如，利用组件定义一个超级链接，在项目中多次使用<!-- 引用组件 --> <my-aaa></my-aaa> <my-aaa></my-aaa> <my-aaa></my-...
2019-10-22 20:01:57
184
原创 js深拷贝与浅拷贝
如何区分深拷贝与浅拷贝简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化①如果B也跟着变了，说明这是浅拷贝，功力不够②如果B没变，那就是深拷贝，自食其力，修成正果浅拷贝案例var x=[11,22,33,44]; var y=x; x[2]=6666; console.log(y)//11,22,6666,44 console.log(x)//11,22,66...
2019-10-21 19:39:40
169
原创 css类型转换
块级元素的特征：块级元素有哪些？<hn>...</hn> 标题标签<hr> 水平分割线<p>...</p> 段落<ul>...</ul> 无序列表<ol>...</ol> 有序列表<dl>...</dl> 定义列表<table>....
2019-10-21 18:57:00
396
原创 v-model基本用法/单选框/按钮 /复选框/多选按钮/下拉选择列表/表单输入绑定修饰符
Vue之表单与v-model小编分为五个部分：如下（1）v-model基本用法（2）单选框/按钮（3）复选框/多选按钮（4）下拉选择列表（5）表单输入绑定修饰符v-model基本用法表单控件在实际业务较为常见，比如单选、多选、下拉选择、输入框等，用它们可以完成数据的录入、校0验、提交等。 Vue 提供了 v-model指令，用于在表单类元素上双向绑定数据。例如在输入框上使用时，输入...
2019-10-15 21:20:53
3175
1
原创 vue之JS数组操作
原生JS数组操作变异方法 (mutation method)，顾名思义，会改变原始数组。非变异 (non-mutating method) 方法，则不会改变原始数组。①末尾添加-push，会改变原始数组，返回值为数组更新后的新数组长度。代码如下var arry=[111,,222,333,444,555] var arry_push=arry.push(9,20,30); cons...
2019-10-15 20:02:05
1650
原创 内联样式style-对象语法 ，内联样式style-计算属性语法
v-bind的用法v-bind动态属性：常用于动态绑定HTML元素的属性，例如id、class、href、src等属性。改变任一方数据后都会实时更新。语法格式1：单个语法格式v-bind:attributeName=variable语法格式2：对象语法格式v-bind=“{attributeName1:variable1,attributeName2:variable2,……}”案例：...
2019-10-14 21:03:13
1691
原创 VUE之内置指令（基本、条件、列表渲染）
什么是迭代器？又分为哪几种？下面有小编我来给代价一一介绍下？迭代器模式是一种相对简单的模式，迭代器的使用可以极大地简化数据操作，目前的绝大部分语言都内置了迭代器。1.forEachforEach方法接收一个函数作为参数，对数组中每个元素使用这个函数，只调用这个函数，数组本身没有任何变化，即不改变原始数组案例var list=[111,222,333,444,555] list...
2019-10-14 20:31:22
350
原创 计算属性 侦听者和方法
##字符串截取操作（1）substring作用：用于提取字符串中介于两个指定下标之间的字符语法：substring(start,end)语法解析：start开始和end结束的位置，从零开始的索引，包头不包尾substring补充只有一个参数（自动输出后面所有字符）2.start > end 当读取位置大于结束位置的时候，substring会自动调整位置3、s...
2019-10-13 13:37:07
283
原创 vue之生命周期钩子
什么是生命周期？Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称为Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册js方法，可以用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是vue的实例。...
2019-10-12 16:03:57
340
原创 VUE之属性、条件、渲染、事件指令及修饰符
v-bind属性指令v-bind动态属性：常用于动态绑定HTML元素的属性，例如id、class、href、src等属性。改变任一方数据后都会实时更新。### 基本指令v-bind语法1.单个语法格式v-bind:attributeName=variable2.对象语法格式v-bind=“{attributeName1:variable1,attributeName2:variable...
2019-10-10 20:05:31
417
原创 vue的小小了解
Vue的小小了解咱们先来说下什么是Vue吧？ Vue是一套用于构建用户界面的==**渐进式**==框架。他的优点是什么呢？ 1.小巧：Vue.js压缩后仅有17KB大小 2.渐进式：可以一步一步，阶段性使用Vue.js，不必一开始就需要学会使用所有东西。这也正是开发者热爱Vue.js的主要原因之一。 3.一旦项目改动或者项目工程较大，代码的修改将是复杂繁琐的，而这时候用了vu...
2019-10-09 20:03:59
176
原创 rem的认识及使用方法
什么是rem？根据CSS的媒体查询功能，更改html根字体大小，实现字体大小随屏幕尺寸变化。rem：相对于页面的整体缩放过程1rem = 1/100 × 页面的宽度注意 这里的1/100是将document.documentElement.style.fontSize字体的大小设置为宽度的1/100 就是最外根元素的字体的大小=1rem 和em有所不同利用document.docu...
2019-09-03 20:00:12
279
原创 纯css打造选项卡
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>css实现选项卡</title> <style> * { padding: 0; margin: 0; } form { ...
2019-08-31 11:13:53
129
原创 纯css打造手风琴效果
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .box { width: ...
2019-08-31 11:07:43
154
原创 文字雨
文字雨<head> <meta charset="UTF-8"> <title>文字雨</title> <style type="text/css"> * { margin: 0; padding: 0; } html { overflow: hidden; } </style&...
2019-08-29 17:21:56
306
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人