- 博客(45)
- 收藏
- 关注
RSS订阅原创 微信小程序（触控事件）
事件简介①本质：事件是视图层到逻辑层的通讯方式②作用：事件可以将用户的行为反馈到逻辑层进行处理③应用：事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数④参数：事件对象可以携带额外信息，如 id， dataset， touches在编写代码中，使用频率高的事件方式是事件绑定事件绑定的写法同组件的属性，以 key、value 的形式①key 以bind或ca...
2019-11-29 09:56:04
408
1
原创 微信小程序（组件跳转、规范、层级准备）&&微信小程序（路由及组件跳页传参）
首先简单回顾下路由API跳转:wx.navigateTowx.navigateBackwx.redirectTowx.switchTabwx.reLaunch除了使用路由API进行页面跳转外，小程序宿主环境也提供了导航组件navigator进行页面跳转。hover样式对比其他小程序列表项会发现，目前为止，点击跳页时，点击栏没有背景样式，类似于css的hover事件，小程序如果想给元...
2019-11-29 09:41:08
426
原创 微信小程序（页面栈和API跳转）
数据操作限制针对上节所讲的程序注册器与页面注册器，简单做下补充，即页面数据data的操作限制（1）直接修改Page实例的this.data而不调用this.setData是无法改变页面的状态的，还会造成数据不一致。（2）由于setData是需要两个线程的一些通信消耗，为了提高性能，每次设置的数据不应超过1024KB；（3）不要把data中任意一项的value设为undefined，否则可能...
2019-11-29 09:29:42
220
原创 微信小程序（页面用户行为）
注册页面：对于小程序中的每个页面，在页面对应的 page.js 文件中调用 Page 方法注册页面示例作用：指定页面的初始数据、生命周期回调、事件处理函数等。页面的用户行为：小程序宿主环境提供了四个和页面相关的用户行为回调页面构造/注册器Page()宿主环境提供了 Page() 构造器用来注册小程序页面Page()在页面脚本page.js中调用，Page() 的调用方式如下所示P...
2019-11-27 18:46:12
320
原创 微信小程序（页面生命周期）
前言注册页面：对于小程序中的每个页面，在页面对应的 page.js 文件中调用 Page 方法注册页面示例作用：指定页面的初始数据、生命周期回调、事件处理函数等。页面的生命周期：页面生命周期函数就是每进入/切换到一个新的页面的时候，就会调用的生命周期函数。页面构造/注册器Page()宿主环境提供了 Page() 构造器用来注册小程序页面Page()在页面脚本page.js中调用，P...
2019-11-27 18:09:29
605
原创 微信小程序（小程序生命周期、运行机制、场景值）
体验版特定页面设置体验人员扫描二维码进入时有时进入的不是首页？？？方案：登录小程序后台，重新设置体验版打开时的特定页面路径，更换为当前首页即可程序构造/注册器App()注册器/构造器分类：小程序级别：App-----程序构造器/注册器页面级别：Page------页面构造器/注册器小程序的生命周期：App() 参数App构造器接受一个Object参数基础App构造器案...
2019-11-27 17:28:08
371
原创 微信小程序（逻辑层与程序注册构造器）
前言逻辑层 App Service（APP服务）小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发者 JavaScript 代码的运行环境以及微信小程序的特有功能。逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。开发者写的所有代码最终将会打包成一份 JavaScript 文件，并在小程序启动的时候运行，直到小程序销毁。这一行为类似 ServiceWorke...
2019-11-27 17:14:08
235
原创 微信小程序（跳页之tabBar导航跳转）
tabBar小程序导航小程序是一个多tab标签应用（客户端窗口的底部或顶部有tab栏可以切换页面），可以通过Tabbar配置项指定tab栏的表现，以及tab切换时显示的对应页面。小程序根目录下的 app.json 文件用来对微信小程序进行全局配置在小程序配置文件里面可以设置tabBar属性：先来个简单案例看下效果接下来挨个看下tabBar配置项下的属性：tabBar配置项属性—...
2019-11-25 11:25:38
577
原创 微信小程序（小程序模型与宿主环境）
小程序可以调用宿主环境/微信提供的微信客户端的能力，这就使得小程序比普通网页拥有更多的能力(扫一扫、摇一摇)。小程序的运行环境分成渲染层和逻辑层， WXML 模板文件和 WXSS 样式文件工作在渲染层，JS 逻辑文件工作在逻辑层。渲染案例WXML模板使用 view 标签，其子节点用 {{ }} 的语法绑定一个 msg 的变量JS 脚本使用 this.setData 方法把 msg 字段设...
2019-11-25 11:12:36
133
原创 Flex布局-容器属性
在了解Flex布局前我们先了解一下盒模型的分类盒模型分类盒模型分类：IE盒模型，标准盒模型，本质区别：宽高计算方式场景Flex布局的应用场景场景：在小程序开发中，需要考虑各种尺寸终端设备上的适配。在传统网页开发，用的是盒模型，通过display:inline | block | inline-block、 position、float来实现布局，缺乏灵活性且有些适配效果难以实现...
2019-11-22 15:04:32
493
原创 10.微信小程序（适配小结、移动端1px与选择器权重）
WXSS选择器权重与优先级WXSS优先级与CSS类似，权重如下图所示权重越高越优先。在优先级相同的情况下，后设置的样式优先级高于先设置的样式权重案例：针对上节介绍的物理像素与逻辑像素相关概念，本节再来做个小结，简单做下回顾关键词：物理像素dp（1）物理像素(physical pixel)物理像素又被称为设备像素（device pixel简称dp）他是显示设备中一个最微小的物理...
2019-11-21 16:47:32
142
原创 微信小程序（布局适配与物理逻辑像素）
前言移动端开发经常遇到一些概念：物理像素、逻辑像素、像素密度、像素比等，本节来详细介绍下关键词：屏幕尺寸、物理像素/屏幕分辨率/物理分辨率、逻辑像素DIP、像素密度PPI、像素比DPR、视网膜显示屏Retina、rpx、vw、vh等。屏幕尺寸华为荣耀7屏幕尺寸指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米比如常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5...
2019-11-21 16:37:30
376
原创 微信小程序（WXSS样式文件）
简介：WXSS（WeiXin Style Sheets）是一套用于小程序的样式语言，用于描述WXML的组件样式，也就是视觉上的效果。对比：WXSS与Web开发中的CSS类似。为了更适合小程序开发，WXSS对CSS做了一些补充以及修改。WXSS分类小程序中的样式文件一共分为两个级别/两类：提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，可以写一个 ...
2019-11-21 16:13:22
1029
原创 微信小程序（WXML模板文件二）
循环指令key属性补充Vue和React框架用遍历指令时的key值不建议用index（1）key值在没有删除插入操作时只要是唯一值也无所谓，即此时为index索引也可以（2）如果有删除或者插入的操作，后一位会继承删掉的index，这时的key写不如不写，本来key是为了让遍历性能优化的操作，这种可能重复或者改变的key值，不仅不会优化还会影响性能（3）index作为:key值，有可能导致第...
2019-11-21 15:55:09
274
原创 AJAX封装+跨域（jsonp）
AJAX的调用还十分麻烦，步骤比较繁琐，在日常开发一般会将其进行封装，所以接下来封装下AJAX功能相关步骤函数，以后使用直接调用即可，同时大大提高了开发效率。为了使用方便，接下来封装AJAX的get和post封装：基本模板与传参此时调用模板时，如下所示封装1：建立异步对象封装2：判断请求类型get请求类型传值方式是将数据拼接到路由后进行传值，所以接下来需要判断是否传值(对比po...
2019-11-20 19:28:13
314
原创 AJAX请求5步法 & .AJAX之状态值+状态码+HTTP请求
简称：AJAX为异步处理，也叫异步请求作用：访问远程API(Application Programming Interface)应用程序编程接口.本质：动态获取远程数据，局部渲染更新页面，所以也叫局部刷新技术.AJAX请求步骤/AJAX请求5部曲：（1）创建XMLHttpRequest异步对象（2）设置回调函数，针对不同的响应状态进行处理—监听Ajax的状态readyState的改变事...
2019-11-15 18:42:04
758
原创 AJAX+ML+DTD概念 &AJAX简介与原理
（1）什么是ajax？ajax 的全称是Asynchronous JavaScript and XML，其中，Asynchronous 是异步的意思，它有别于传统web开发中采用的同步的方式。AJAX代表异步JavaScript和XML，它是一组web开发技术，允许web应用程序异步工作，在后台处理对服务器的任何请求等等，那么什么是AJAX ？JavaScript是一种流行的编码语言，在其功...
2019-11-14 18:35:56
129
原创 微信小程序（模板文件一）
页面根元素根元素page每一个页面都具备一个根元素：<page></page>页面根元素可以在控制台的WXML选项卡中看到允许在wxss文件中对page根元素进行样式设置简介全称：WXML 全称是 WeiXin Markup Language，是小程序框架设计的标签语言对比：网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是...
2019-11-13 19:12:28
1669
原创 微信小程序（JSON配置文件）
微信小程序新建页面新建页面page（1）手动创建①右键单击 [pages] 文件夹，在弹出的菜单中选择“新建目录”②右键单击新建的目录，在弹出的菜单中选择“新建Page”（2）自动创建直接在app.json文件的pages选项中将新页面的路径写好，系统会自动创建所对应的四个文件page.wxml模板文件、page.wxss样式文件、page.json配置文件、page.js逻辑文件删...
2019-11-13 18:41:07
513
原创 微信小程序开发（开发工具、项目创建、发布审核，人员及目录结构分析）
开发前准备小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。小程序开发前准备：①申请账号②安装开发工具申请账号开发小程序之前需要先注册一个小程序账号，通过这个帐号你就可以管理你的小程序。账号申请：进入小程序注册页 根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号。网址：https://mp.weixin.qq.com...
2019-11-12 18:33:35
421
原创 VUE之全局API 自定义指令directive & extend 扩展实例构造器
全局API（1）什么是全局API？全局API并不在构造器里，而是先声明全局变量或者直接在Vue上定义一些新功能，Vue内置了一些全局API，比如本节要介绍的指令Vue.directive通俗理解：就是在构造器外部用Vue提供的API函数来定义新的功能。（2）常用vue 的全局 API列表1、Vue.directive 自定义指令2、Vue.extend 扩展实例构造器3、全局操作V...
2019-11-04 19:16:14
426
原创 vue 多元素过渡+动画封装
首先介绍下如何实现多元素过渡（1）利用条件编译指令v-if与v-else实现多元素内容切换.（2）接下来在内容切换基础上，添加过渡动画，例如渐隐渐现效果1、transition添加name属性命名2、设置过渡状态（3）状态管理测试后发现并没有过渡效果，分析原因Vue在多个元素切换过程中会尽量复用DOM，如果不加key，那么vue会选择复用节点(Vue的就地更新策略)，导致之前节点的...
2019-11-04 18:55:22
134
原创 VUE之过渡transition+动画+动画钩子
ue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：在 CSS 过渡和动画中自动应用 class–基础动画可以配合使用第三方 CSS 动画库，如 Animate.css–CSS动画在过渡动画钩子函数中使用 JavaScript 直接操作 DOM—JS动画可以配合使用第三方 JavaScript 动画库，如 Velocity.js—JS动画库Vue 提供了...
2019-10-31 18:36:13
3233
原创 vue (插槽slot &编写可复用组件)
前言及场景：插槽概念在Vue中十分重要在很多第三方的Vue模块或插件中都会大量使用插槽作用：通过插槽slot可以更加方便的向子组件传递DOM元素，同时子组件使用插槽内容也十分简单，大大简化了代码，增加了代码可读性。插槽slot首先创建个基础组件，然后在页面调用显示，如下所示父组件传递写法父组件通过属性形式向子组件传值，即父传子借助props属性向下传值如果不想被转义，接下来需要...
2019-10-30 18:51:48
451
原创 vue (兄弟|非父子组件通信)
有人可能会问：为什么要学习组件通信原因：在实际开发中我们经常会遇到在一个自定义组件中要使用其他自定义组件，这就需要一个父子组件关系，进而引出互相通信的问题。父子组件传值通信假设第二层组件想和第一层组件进行通信，分析其传值过程1、(第一层向第二层传值)：父组件通过props传值到子组件，如此便实现父子组件向下通信2、(第二层向第一层传值)：子组件通过触发自定义事件$emit向父组件传值，...
2019-10-30 18:31:53
308
原创 23.VUE之组件（绑定原生事件、$listeners、$ref）
目录（1）组件绑定原生事件（2）监听器属性listeners（3）listeners（3）listeners（3）ref与$refs注册引用信息属性和对象组件绑定原生事件有时，我们想要在一个组件的根元素上直接监听一个原生事件，一般操作步骤如下1、首先定义一个 child 组件，什么事件都不绑定，代码如下：步骤：2、接下来，给 child 组件增加一个 @click 事件，如下所示...
2019-10-28 21:17:53
254
原创 22.VUE之组件（组件细节、模块系统、v-model语法糖）
目录（1）H5编码规范与template模板的3种写法（2）组件data（3）组件名（4）组件注册（5）模块系统(需结合后续工程化使用，这里简单了解即可)（6）自定义事件(父子组件通信)（7）.sync修饰符（8）自定义组件之v-model语法糖H5编码规范分析如下代码中的组件解析结果H5规范中要求，table里为tbody，tbody里需要放置tr和td，否则会将代码解析...
2019-10-28 20:31:56
112
原创 VUE之组件（Props特性深析）
创建一个博文组件，如果你不能向这个组件传递某一篇博文的标题或内容之类的我们想展示的数据的话，它是没有办法使用的，这也正是 prop 的由来。Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。为了给博文组件传递一个标题，我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中注意：一个组件默认可以拥有任意...
2019-10-28 19:51:20
321
原创 前端小白初识CMD（dos窗口命令）
cmd是command的缩写，即命令提示符（CMD）。**（1）**本质：命令提示符是在操作系统中，提示进行命令输入的一种工作提示符。**（2）**分类：在不同的操作系统环境下，命令提示符各不相同。①在windows环境下，命令行程序为cmd.exe，是一个32位的命令行程序，微软Windows系统基于Windows上的命令解释程序，类似于微软的DOS操作系统（磁盘操作系统）②一般说的“命...
2019-10-25 18:58:47
1688
原创 VUE之组件（组件通信、单向数据流）&&VUE之组件（动态组件及keep-alive）
VUE之组件（复用性、props、单向数据流）组件组织通常一个应用会以一棵嵌套的组件树的形式来组织。–VUE：组件化、数据驱动例如，可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、标题之类的组件。为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。组件的注册类型分两种：全局注册和局部注册。组件复用性可以将组件进行任意次数的复用，例如，利用组件定义一个...
2019-10-23 19:26:31
195
原创 VUE之组件（复用性、props、单向数据流）
通常一个应用会以一棵嵌套的组件树的形式来组织。–VUE：组件化、数据驱动例如，可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、标题之类的组件。为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。组件的注册类型分两种：全局注册和局部注册。组件复用性可以将组件进行任意次数的复用，例如，利用组件定义一个超级链接，在项目中多次使用场景：写一个广告组件（包含广...
2019-10-22 19:19:14
95
原创 ES6之模板引擎&&字符串模板x-template
在js里面，经常需要使用js往页面中插入html内容写过一点前端的都会碰到需要使用JS字符串拼接HTML元素然后append到页面DOM树上的情况。一般的写法都是使用+号以字符串的形式拼接，如果html很短还好说，但是遇到描述里面的这么大段，直接用字符串存储会很困难，因为不光要处理单引号，还需要很多「+」号把字符串一个个连接起来，十分的不方便。比如有的时候需要使用弹出框的时候手动使用字符串拼接...
2019-10-22 18:56:16
222
原创 VUE之组件（基础、分类、命名）
组件（ Component ）是 Vue.js 最核心的功能，也是整个框架设计最精彩的地方，当然也是最难掌握的。有人会问：为什么学习组件，作用是什么？接下来看个场景?上面的需求虽然有点变态，但却是业务中很常见的，那就是一些控件、 JavaScript 功能的复用。没错， Vue.js的组件就是提高重用性的，让代码可复用，当学习完组件后，上面的问题就可以轻松搞定了，再也不用害怕产品经理的奇...
2019-10-22 15:21:24
328
原创 静态补充css类型转换&JS的浅拷贝深拷贝
常用的块级block标签：<hn>...</hn> 标题标签<hr> 水平分割线<p>...</p> 段落<ul>...</ul> 无序列表<ol>...</ol> 有序列表<dl>...</dl> 定义列表<table>...&l...
2019-10-21 19:09:03
127
原创 Array 变异更新替换
原生JS数组操作变异方法 (mutation method)，顾名思义，会改变原始数组。非变异 (non-mutating method) 方法，则不会改变原始数组。下面我们先来看一下变异方法push（末尾添加），会改变原始数组，返回值为数组更新后的新数组长度。pop|（末尾删除），会改变原始数组，返回值为被删除的数组元素unshift（开头添加），会改变原始数组，返回更新后新数组...
2019-10-15 20:09:32
213
原创 VUE之内置指令（基本、条件、列表渲染）
在学习我们的vue内置指令时先来一个简单的扩展 （js的迭代器（遍历））迭代器模式是一种相对简单的模式，迭代器的使用可以极大地简化数据操作，目前的绝大部分语言都内置了迭代器（1）forEach迭代器forEach方法接收一个函数作为参数，对数组中每个元素使用这个函数，只调用这个函数，数组本身没有任何变化，即不改变原始数组（2）map迭代器map迭代器和forEach有些类似，区别：可...
2019-10-14 18:44:49
747
1
原创 vue（ v-bind的类名与样式绑定）
DOM元素经常动态绑定一些类名或者style样式，我们现在介绍下使用v-bind指令绑定class与style的多种方法。v-bind我们简单介绍下Vue中的 v-bind动态属性：常用于动态绑定HTML元素的属性，例如id、class、href、src等属性。改变任一方数据后都会实时更新。v-bind 有三种语法格式语法格式1：单个语法格式v-bind:attributeName=v...
2019-10-14 17:27:12
872
原创 Vue计算属性and 观察者（watch）
什么是计算属性？通过之前章节，已经可以搭建一个简单的Vue应用，在模板里双向绑定一些数据或者表达式。模板内的表达式是非常便利的，但是它们实际上只用于简单的运算，如果在模板里放入太多的逻辑会让模板过于臃肿且难以维护。所以 vue制定了一个computed 的选项我们称他为计算属性。用来放置过长的表达式和逻辑运算。首先我们来看一下 运用计算属性的步骤注意在使用计算函数的时候：1、this—在...
2019-10-12 15:28:54
314
原创 vue的生命周期钩子
什么是生命周期？简单举个例子：我们以人做例子 一个人从出生到死亡的过程，这个过程就是一个人生命周期。一串代码从创建到销毁的过程就是这段代码的生命周期。那么什么是vue的生命周期呢 ？同样的 一个Vue实例从创建到销毁的过程，就是vue的生命周期。Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称为Vue的生命周期。在...
2019-10-11 20:06:38
147
原创 控制台
console简介控制台（Console）是JS开发里最重要的面板，主要作用是显示网页加载过程中产生各类信息。之前的开发经常用Firebug进行JS代码调试，Firebug是firefox下的一个扩展,能够调试所有网站语言，如Html,Css等，最吸引人的就是javascript调试功能，使用起来非常方便，而且在各种浏览器下正常使用，但是目前为止Firebug 官网宣布已停止开发更新。但目前...
2019-10-10 20:22:27
814
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人