- 博客(29)
- 收藏
- 关注
RSS订阅原创 微信小程序（组件--视图组件案例）
视图容器组件（1）滑块视图容器swiper和滑块swiper-item组件微信小程序swiper实现滑动放大缩小效果①先将基础轮播图写出来，开启无缝衔接模式circular②开启指示点属性：值：③自定义指示点样式④添加前后边距属性：值：⑤设置中间激活块的类名active⑥分开设置激活态与普通状态样式，并添加过渡效果⑦添加间隙⑧开启自动轮播编写...
2019-12-04 11:03:56
180
原创 微信小程序（组件--视图组件）
什么是组件？组件就是我们写HTML的一些基本标签，比如div、span、p、ul、li等。在大多数HTML里面的标签，很多都是要自己写上一些效果的，但是在小程序里面，很多标签都带有自己的效果，可以实现一些简单的JS逻辑。微信小程序里有很多很有意思的组件，这些组件给我们开发小程序提供了很大的便利。一个小程序页面可以分解成多个部分组成，组件就是小程序页面的基本组成单元。为了让开发者可以快速进行开...
2019-12-04 10:51:32
224
原创 微信小程序（小程序生命周期、运行机制、场景值）&&微信小程序（页面生命周期）&&微信小程序（页面用户行为）
页面构造/注册器Page()宿主环境提供了 Page() 构造器用来注册小程序页面Page()在页面脚本page.js中调用，Page() 的调用方式如下所示Page构造器接受一个Object参数data属性是当前页面的初始数据onLoad、onReady、onShow、onHide、onUnload ，这5个回调是Page页面实例的生命周期函数，即页面生命周期onPullDownR...
2019-11-27 14:54:50
730
原创 微信小程序（小程序模型与宿主环境）&& （跳页之tabBar导航跳转）
小程序模型模型的基本工作方式1.数据驱动：渲染层和数据相关2.脚本逻辑：逻辑层负责产生、处理数据3.通信模型：逻辑层通过 Page 实例的 setData 方法传递数据到渲染层模型—数据驱动场景：在开发UI界面过程中，程序需要维护很多变量状态，同时要操作对应的UI元素。随着界面越来越复杂，需要维护很多变量状态，同时要处理很多界面上的交互事件，整个程序变得越来越复杂。通常界面视图和...
2019-11-25 10:33:16
232
1
原创 微信小程序（JS逻辑文件）
ECMAScript在大部分开发者看来，ECMAScript和JavaScript表达的是同一种含义，但是严格的说，两者的意义是不同的。ECMAScript是一种由Ecma国际通过ECMA-262标准化的脚本程序设计语言， JavaScript 是 ECMAScript 的一种实现。简介：ECMAScript(简称ES)是一个语言标准，javascript则是基于这个标准实现的脚本语言。...
2019-11-22 15:34:38
116
原创 静态补充CSS-BFC、IFC、FFC、GFC
BFC简介Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（译为：格式化上下文）（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。接下来看看有哪些盒子①block-level box:dis...
2019-11-22 15:29:16
123
原创 微信小程序（Flex布局-容器属性）&&（Flex布局-项目属性）
盒模型分类盒模型分类：IE盒模型，标准盒模型，本质区别：宽高计算方式容器与项目元素日常开发中，采用flex布局的元素，一般简称为“容器”容器内的元素简称为“项目”或者“元素”布局属性：容器属性：flex-flow、flex-direction、flex-wrap、justify-content、align-items、align-content元素/项目属性：order、flex...
2019-11-22 15:23:25
407
原创 微信小程序（布局适配与物理逻辑像素）
屏幕尺寸屏幕尺寸指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米比如常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等如何计算手机尺寸？知道手机屏幕的长和宽，然后利用勾股定理，就可以算出斜边的长了。还有个更简单的方法，只要用尺子量一下它的对角线是多少厘米，然后再换算成英寸就搞定了。设备尺寸是指设备对角线的长度，单位为英寸（inch），简称“寸”。物...
2019-11-21 14:57:52
194
原创 微信小程序（WXSS样式文件）
WXSS简介简介：WXSS（WeiXin Style Sheets）是一套用于小程序的样式语言，用于描述WXML的组件样式，也就是视觉上的效果。对比：WXSS与Web开发中的CSS类似。为了更适合小程序开发，WXSS对CSS做了一些补充以及修改。WXSS分类小程序中的样式文件一共分为两个级别/两类：提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同...
2019-11-21 14:48:22
657
原创 微信小程序（WXML模板文件二）
循环指令key属性补充Vue和React框架用遍历指令时的key值不建议用index（1）key值在没有删除插入操作时只要是唯一值也无所谓，即此时为index索引也可以（2）如果有删除或者插入的操作，后一位会继承删掉的index，这时的key写不如不写，本来key是为了让遍历性能优化的操作，这种可能重复或者改变的key值，不仅不会优化还会影响性能（3）index作为:key值，有可能导致...
2019-11-21 14:43:03
237
原创 ajax
AJAX5步法1、创建异步对象XMLHttpRequest2、设置回调函数3、open()方法连接服务器4、send()方法发送数据至服务器5、回调函数中针对不同响应状态进行处理，局部更新界面AJAX封装基本模板与传参此时调用模板时，如下所示封装1：建立异步对象封装2：判断请求类型封装2：判断请求类型get请求类型传值方式是将数据拼接到路由后进行传值，所以...
2019-11-20 19:04:39
276
原创 微信小程序（wxml模板）
简介WXML 全称是 WeiXin Markup Language，是小程序框架设计的标签语言 对比：网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。同样道理，在小程序中也有同样的角色，其中 WXML 充当的就是类似 HTML 的角色。wxss–→css页面...
2019-11-13 16:09:48
808
原创 微信小程序（json文件配置）
新建页面新建页面page（1）手动创建①右键单击 [pages] 文件夹，在弹出的菜单中选择“新建目录”②右键单击新建的目录，在弹出的菜单中选择“新建Page”（2）自动创建直接在app.json文件的pages选项中将新页面的路径写好，系统会自动创建所对应的四个文件page.wxml模板文件、page.wxss样式文件、page.json配置文件、page.js逻辑文件删除页面删...
2019-11-13 11:42:57
3342
原创 微信小程序（开发工具、项目创建）
开发前准备申请账号1.小程序开发前准备：①申请账号②安装开发工具2.账号申请：进入小程序注册页 根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号。网址：https://mp.weixin.qq.com小程序APPIDAppID：在菜单 “开发”-“开发设置” 可以看到个人的小程序 AppID，这个在开发会用到，相当于微信小程序给开发人员的通行证。小程序基本信息接...
2019-11-12 18:50:38
109
原创 微信小程序（发布审核、创建目录）
上传代码同预览和真机调试不同，上传代码是用于提交体验或者审核使用的。1.点击开发者工具顶部操作栏的上传按钮，填写版本号以及项目备注，需要注意的是，这里版本号以及项目备注是为了方便管理员检查版本使用的，开发者可以根据自己的实际要求来填写这两个字段。2.上传成功之后，登录小程序管理后台 - 开发管理 - 开发版本 就可以找到刚提交上传的版本了。3.可以将这个版本设置 体验版 或者是 提交审核...
2019-11-12 18:43:25
500
原创 vue学习之全局api
Vue.nextTick线程操作Vue.nextTick线程操作语法：Vue.nextTick([callback,context])作用：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，即可获取更新后的 DOM。案例：点击按钮，修改姓名并获取更新后的DOM元素内容分析：测试后可以看到视图更新以后拿到的并不是更新后的innerHTML原因：因为DOM结...
2019-11-06 10:50:34
116
原创 vue 动画
如果想在页面初始化时渲染动画效果，此时需要用到appear呈现属性和appear-active-class呈现过渡属性，语法如下过渡+动画如果想在元素过渡的同时添加动画效果，此时又需要用到enter-active-class和leave-active-class属性步骤1、添加过渡类名+动画名，这里为了方便查看效果，我将动画改为swing抖动2、设置transition过渡属性值...
2019-11-04 19:13:55
769
原创 vue 自定义指令案例
自定义指令 聚焦+变色<body> <div id="root"> <input type="text" v-auto-focus v-color-red="color" v-model="name"> <button @click="destroyVue">销毁</button> </div> <scr...
2019-11-04 18:46:44
267
原创 VUE之组件（父子与非父子通信）
组件组织日常开发里，我们可以按照功能将一个网页拆分成很多个部分，每个部分就是一个组件。父子组件通信假设第二层组件想和第一层组件进行通信，分析其传值过程1、(第一层向第二层传值)：父组件通过props传值到子组件，如此便实现父子组件向下通信2、(第二层向第一层传值)：子组件通过触发自定义事件$emit向父组件传值，如此便实现了父子组件向上通信跨级组件通信假设第三层组件想和第一层...
2019-10-30 19:07:57
120
原创 vue工程化
CMD (command）本质：命令提示符是在操作系统中，提示进行命令输入的一种工作提示符。分类：在不同的操作系统环境下，命令提示符各不相同。①在windows环境下，命令行程序为cmd.exe，是一个32位的命令行程序，微软Windows系统基于Windows上的命令解释程序，类似于微软的DOS操作系统（磁盘操作系统）②一般说的“命令行”是指linux命令，linux命令是对Linux...
2019-10-25 18:57:34
160
原创 vue学习积累
css类型转换块级元素特性1.一个元素占据一行2.高度宽度可控制3.宽度没有设置时，默认为100%，4.块级元素可以包含块级和行级注意：块级字元素不能包含块级元素例如p标签、h1~h6等等行内元素特性1.和其他元素在一行2.高度宽度以及内边距都是不可控的3.宽高就是内容的宽高，不可以改变4.行内元素只能包含行内元素注意：a标签里可以放块级元素，但是连接里不能再放连接行...
2019-10-21 18:50:46
147
原创 vue学习积累
v-model基本用法表单控件在实际业务较为常见，比如单选、多选、下拉选择、输入框等，用它们可以完成数据的录入、校验、提交等。 Vue 提供了 v-model 指令，用于在表单类元素上双向绑定数据。例如在输入框上使用时，输入的内容会实时映射到绑定的数据上对于文本域 textarea 也是同样的用法注意事项使用 v-model 后，表单控件显示的值只依赖所绑定的数据，不再关心初始化时...
2019-10-15 17:24:53
111
原创 vue学习积累
js的数组操作push末尾添加-push，会改变原始数组，返回值为数组更新后的新数组长度。pop末尾删除-pop，会改变原始数组，返回值为被删除的数组元素。unshift开头添加-unshift，会改变原始数组，返回更新后新数组长度shift开头删除-shift，会改变原始数组，返回被删除的数组元素splice添加、删除、替换-splice，会改变原始数组 指...
2019-10-15 11:55:07
81
原创 vue日常积累
class语法 单类名切换给v-bind:class设置一个对象，可以动态切换class。isActive为true时，结果为isActive为false时，结果为类名切换除了单个类名切换，在对象中也可以传入多个属性来动态切换多个 class。例如类名共存v-bind:class 指令也可以与普通的 class 属性共存，例如对象包裹绑定的数据对象不必都定义在模板里...
2019-10-14 19:54:02
171
原创 vue学习第三天
vue的生命周期钩子Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称为Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。以下为vue生命周期图vue生命周期可以分为四个大阶段分别为创建阶段创建的标志点是New vue()，beforeCreate和created都发生在创建动作之后，但区...
2019-10-12 11:36:45
89
原创 VUE学习第二天
基本指令v-bind指令常用于动态绑定HTML元素的属性，例如id、class、href、src等属性。改变任一方数据后都会实时更新其中可以分为单个语法式和对象语法式还有数组语法格式”绑定类名”v-if条件指令指令主要职责就是当表达式值改动时，相应的将某些行为应用到DOM上，以v-if为例v-if指条件性渲染，为true时渲染DOM，否则不进行渲染：v-show渲染指令v-...
2019-10-10 19:14:29
141
原创 vue第一天的学习心得
VUE的学习日记3大主流框架vueAngularreactvue的架构模式MVCMVPMVVMvue数据绑定以及小案例数据绑定文本插值模板-基本指令3大主流框架vuevue为当今国内主流的框架 是一套用于构建用户界面的渐进式框架。使用Vue可以让web开发变得更加简单，同时颠覆传统前端开发模式，提供了现代web开发里常见的高级功能。Vue.js 是目前最火的一个前端框架，是前端的主流框架...
2019-10-09 19:34:40
349
原创 关于rem
对于兴起的html，其中的rem解决了移动端和pc端的问题，让我们很方便的写出了移动端的页面。接下来主要讲讲rem的用法。rem是指相对于根元素的字体大小的单位。它是一个相对单位根据不同的分辨率会有不同的变化。这也是rem的巧妙之处。具体用法代码如下` (function (doc, win) { var docEl = doc.documentElement, ...
2019-09-03 16:47:24
67
原创 关于利用h5+c3结合javascript，完成文字流效果案例
主要用到 1、获取浏览器的屏幕的宽高2、利用定时器来控制函数3、Math.floor的取整问题4、以及清除定时器5、利用context.fillText( text , x , y , [maxWidth] ) 填充方式绘制文字以下是代码` <input onclick="operateAnimation(this)" type="button" ...
2019-08-29 14:45:34
254
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人