- 博客(64)
- 收藏
- 关注
RSS订阅原创 微信小程序（触控事件）
事件类型在编写代码中，使用频率高的事件方式是事件类型常见的事件类型事件绑定事件绑定的写法同组件的属性，以 key、value 的形式①key 以bind或catch开头，然后跟上事件的类型，如bindtap、catchtap等。自基础库版本 1.5.0 起，在非原生组件中，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、catch:touchstart②v...
2019-11-29 17:21:34
950
原创 微信小程序（路由及组件跳页传参）
API路由跳页传参商品列表展示页商品展示页编写<view class="list-area"> <view class="listBox" bindtap="backPage" data-item="{{item}}" wx:for="{{goods}}" wx:key="name"> <view > <imag...
2019-11-29 17:08:26
320
原创 微信小程序（组件跳转、规范、层级准备）
hover样式对比其他小程序列表项会发现，目前为止，点击跳页时，点击栏没有背景样式，类似于css的hover事件，小程序如果想给元素添加触屏点击样式，可以给元素添加hover-class属性。<view class="list-area"> <block wx:for="{{myselfList}}" wx:key="tap"> <view class=...
2019-11-29 16:58:32
597
原创 微信小程序（页面栈和API跳转）
数据操作限制针对上节所讲的程序注册器与页面注册器，简单做下补充，即页面数据data的操作限制（1）直接修改Page实例的this.data而不调用this.setData是无法改变页面的状态的，还会造成数据不一致。（2）由于setData是需要两个线程的一些通信消耗，为了提高性能，每次设置的数据不应超过1024KB；（3）不要把data中任意一项的value设为undefined，否则可能...
2019-11-29 16:40:00
368
原创 微信小程序（页面用户行为）
页面构造/注册器Page()宿主环境提供了 Page() 构造器用来注册小程序页面Page()在页面脚本page.js中调用，Page() 的调用方式如下所示Page构造器接受一个Object参数data属性是当前页面的初始数据onLoad、onReady、onShow、onHide、onUnload ，这5个回调是Page页面实例的生命周期函数，即页面生命周期onPullDownR...
2019-11-29 16:07:06
259
原创 微信小程序（页面生命周期）
页面构造/注册器Page()宿主环境提供了 Page() 构造器用来注册小程序页面Page()在页面脚本page.js中调用，Page() 的调用方式如下所示Page构造器接受一个Object参数data属性是当前页面的初始数据onLoad、onReady、onShow、onHide、onUnload ，这5个回调是Page页面实例的生命周期函数，即页面生命周期onPullDownR...
2019-11-29 15:39:40
498
原创 微信小程序（小程序生命周期、运行机制、场景值）
体验版特定页面设置体验人员扫描二维码进入时有时进入的不是首页？？？方案：登录小程序后台，重新设置体验版打开时的特定页面路径，更换为当前首页即可程序构造/注册器App()注册器/构造器分类：小程序级别：App-----程序构造器/注册器页面级别：Page------页面构造器/注册器小程序的生命周期：App() 参数App构造器接受一个Object参数App() 参...
2019-11-29 15:20:46
442
原创 微信小程序（逻辑层与程序注册构造器）
ServiceWorker背景：在互联网早期时代，几乎没人会考虑用户处于离线状态时该如何呈现一个 web 页面，只会考虑在线状态。但是，随着移动互联网的到来以及网络在世界其他地区的普及，参差不齐的网络质量在用户使用的现代网络中已经越来越普遍。因此，网站在离线状态时候的表现，以便用户不受网络可用性的限制，已变得非常有价值。ServiceWorker本质：Service Worker 是...
2019-11-29 09:31:44
205
原创 微信小程序（跳页之tabBar导航跳转）
tabBar小程序导航小程序是一个多tab标签应用（客户端窗口的底部或顶部有tab栏可以切换页面），可以通过Tabbar配置项指定tab栏的表现，以及tab切换时显示的对应页面。小程序根目录下的 app.json 文件用来对微信小程序进行全局配置在小程序配置文件里面可以设置tabBar属性：先来个简单案例看下效果"tabBar":{ "list":[ { ...
2019-11-25 16:43:25
2610
原创 微信小程序（小程序模型与宿主环境）
渲染案例渲染“Hello World”案例WXML模板使用 view 标签，其子节点用 {{ }} 的语法绑定一个 msg 的变量<view>{{msg}}</view>JS 脚本使用 this.setData 方法把 msg 字段设置成 “Hello World” thi.setData({'Hellow wrold'})小程序模型面试：小程序模型...
2019-11-25 16:19:48
302
原创 微信小程序（JS逻辑文件）
①业务逻辑案例交互案例：<view>{{mes}}</view><button bindtap="clickMe">点击我</button>点击 button 按钮的时候，希望界面显示 “Hello World”，于是在 button 上声明一个属性: bindtap ，在 JS 里声明 clickMe 方法来响应点击操作： clickM...
2019-11-25 16:01:26
444
原创 微信小程序（适配小结、移动端1px与选择器权重）
WXSS选择器权重与优先级权重案例：适配小结，关键词:媒体查询1） 媒体查询利用设备像素比缩放，设置小数像素；css与js写法任选其一css写法js写法优点：简单，好理解缺点：兼容性差，目前之余IOS8+才支持，在IOS7及其以下、安卓系统都是显示0px2）设置 border-image 方案iOS7已经发布有一段时间，扁平化设计风格有很多值得称赞的地方，其中有很多设...
2019-11-22 16:38:22
345
原创 微信小程序（WXSS样式文件）
WXSS简介简介：WXSS（WeiXin Style Sheets）是一套用于小程序的样式语言，用于描述WXML的组件样式，也就是视觉上的效果WXSS分类小程序中的样式文件一共分为两个级别/两类：提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss...
2019-11-22 16:26:18
1142
原创 微信小程序（WXML模板文件二）
循环指令key属性补充Vue和React框架用遍历指令时的key值不建议用index（1）key值在没有删除插入操作时只要是唯一值也无所谓，即此时为index索引也可以（2）如果有删除或者插入的操作，后一位会继承删掉的index，这时的key写不如不写，本来key是为了让遍历性能优化的操作，这种可能重复或者改变的key值，不仅不会优化还会影响性能（3）index作为:key值，有可能导致第...
2019-11-22 16:16:18
216
原创 AJAX之JSON与JSONP
JSON&&JSONPJSON和JSONP虽然只有一个字母的差别，但本质差距较大：1、JSON是一种数据交换格式2、而JSONP是开发人员创造出的一种非官方跨域数据交互协议通俗理解：拿谍战片来打个比方，JSON是地下党们用来书写和交换情报的“暗号”，而JSONP则是接头方式。通俗理解，一个是传递信息格式，一个是信息给对方的传递交互协议JSON（1）什么是JSON？J...
2019-11-21 20:13:11
135
原创 AJAX之jQuery操作&&全局处理程序
jQuery之AJAX日常开发里为了提高开发效率，一般会使用框架中的AJAX语法，例如经常使用的jQuery，也给我们封装好了AJAX的一些语法操作，而且jQuery也封装了JSONP跨域几种常用的方式 $.ajax，$.post， $.get， $.getJSONjQuery之$.ajax1、$.ajax$.ajax是JQuery对ajax封装的最基础，通过使用这个函数可以完成异步通讯...
2019-11-21 19:38:41
157
原创 AJAX之状态值+状态码+HTTP请求
HTTP请求HTTP简介http是计算机通过网络进行通信的规则，使浏览器去服务器请求信息和服务。HTTP是一种无状态协议（他可以自己保存东西cookie）：无状态指的是不建立持久的连接，即服务端不保留连接的相关信息，即断开请求和响应后是没有记忆的。HTTP请求是一步完成的吗？—NOHTTP请求步骤一个完整的HTTP请求过程，通常包含以下7个步骤（1）建立TCP连接（2）WEB浏览...
2019-11-15 20:19:06
172
原创 AJAX请求5步法
AJAX请求步骤AJAX请求5部曲：（1）创建XMLHttpRequest异步对象（2）设置回调函数，针对不同的响应状态进行处理—监听Ajax的状态readyState的改变事件onreadystatechange（3）使用open方法与服务器建立连接（4）send注册事件，设置和服务器的交互信息，向服务器发送数据（5）在回调函数中针对不同的响应状态进行处理，更新界面AJAX请求步...
2019-11-15 20:12:47
294
原创 AJAX简介与原理
ajax简介（1）什么是AJAX？正如之前所说，Ajax 即Asynchronous Javascript And XML（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术（←本质）。Ajax = 异步 JavaScript 和 XML或HTML （标准通用标记语言的子集）工作实现原理：JavaScript和XML在AJAX中都是异步工作的，因此，任何使用...
2019-11-14 19:00:05
279
原创 AJAX+ML+DTD概念
ajax简介（1）什么是ajax？ajax 的全称是Asynchronous JavaScript and XML，其中，Asynchronous 是异步的意思，它有别于传统web开发中采用的同步的方式。AJAX代表异步JavaScript和XML，它是一组web开发技术，允许web应用程序异步工作，在后台处理对服务器的任何请求等等，那么什么是AJAX ？ajax简介（1）什么是ajax...
2019-11-14 18:53:42
143
原创 微信小程序（WXML模板文件一）
页面根元素根元素page每一个页面都具备一个根元素：<page></page>页面根元素可以在控制台的WXML选项卡中看到允许在wxss文件中对page根元素进行样式设置简介全称：WXML 全称是 WeiXin Markup Language，是小程序框架设计的标签语言对比：网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是...
2019-11-13 19:38:05
917
原创 微信小程序（JSON配置文件）
新建页面新建页面page（1）手动创建①右键单击 [pages] 文件夹，在弹出的菜单中选择“新建目录”②右键单击新建的目录，在弹出的菜单中选择“新建Page”（2）自动创建直接在app.json文件的pages选项中将新页面的路径写好，系统会自动创建所对应的四个文件page.wxml模板文件、page.wxss样式文件、page.json配置文件、page.js逻辑文件删除页面pa...
2019-11-13 15:12:06
1985
原创 微信小程序（发布审核、人员及目录结构分析）
上传代码同预览和真机调试不同，上传代码是用于提交体验或者审核使用的。点击开发者工具顶部操作栏的上传按钮，填写版本号以及项目备注，需要注意的是，这里版本号以及项目备注是为了方便管理员检查版本使用的，开发者可以根据自己的实际要求来填写这两个字段。上传成功之后，登录小程序管理后台 - 开发管理 - 开发版本 就可以找到刚提交上传的版本了。可以将这个版本设置 体验版 或者是 提交审核项目上传编...
2019-11-12 19:03:02
704
原创 微信小程序（开发工具、项目创建）
开发前准备小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。小程序开发前准备：①申请账号②安装开发工具申请账号开发小程序之前需要先注册一个小程序账号，通过这个帐号你就可以管理你的小程序。账号申请：进入小程序注册页 根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号。小程序APPID注册完毕后即可登录小程序后台AppID...
2019-11-12 18:52:39
454
原创 VUE之全局API（扩展实例构造器extend）
extend 扩展实例构造器（3）分类1：直接挂载扩展实例构造器案例：一个歌曲列表，在很多页面都会用到，可以用扩展实例构造器进行封装，如下所示步骤1：创建实例构造器<script type="text/javascript"> /*1、创建实力构造器*/ var songList=Vue.extend({ template:`<ul> <li ...
2019-11-04 18:48:33
173
原创 VUE之过渡动画钩子函数+Velocity.js动画库
动画钩子分类钩子函数分为入场钩子和出场钩子，具体分类及含义如下所示入场钩子首先新建个普通组件，可以实现简单显隐切换接下来结合案例来介绍下动画钩子函数（1）入场钩子before-enter进入过渡前状态验证如下所示此外，before-enter函数还包含一个el参数，表示绑定过渡动画的元素。验证如下（1）入场钩子before-enter进入过渡前状态before-ent...
2019-10-31 19:44:36
358
原创 VUE之过渡+动画
页面初始化渲染动画目前为止，已经结合animated.css动画库实现了@keyframes类型动画切换效果。【前言】如果想在页面初始化时渲染动画效果，此时需要用到appear呈现属性和appear-active-class呈现过渡属性，语法如下如果想在元素过渡的同时添加动画效果，此时又需要用到enter-active-class和leave-active-class属性步骤：1、...
2019-10-31 19:26:08
214
原创 VUE之动画与animate.css动画库
过渡动画原理在进入/离开的过渡中，会有 6 个 class 切换：v-enter（插入）类原理—动画流程概念图v-enter第一帧加入，第二帧移除；v-enter-active第一帧加入、贯穿整个过程结尾移除；v-enter-to第二帧加入、贯穿整个过程结尾移除v-leave（移除）类原理—动画流程概念图：同理：第一帧(增加v-leave和v-leave-active)、第二帧(移除...
2019-10-31 19:15:56
288
原创 VUE之过渡transition
过渡的类名在进入/离开的过渡中，会有 6 个 class 切换：v-enter（插入）类：①v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除②v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。③v-enter-...
2019-10-31 16:13:54
458
原创 VUE之组件（插槽slot与可复用组件）
插槽slot首先创建个基础组件，然后在页面调用显示，如下所示<div id="app"> <blog></blog> </div> <script type="text/javascript"> Vue.component('blog',{ template:`<div><p>文章主...
2019-10-30 20:17:45
796
原创 VUE之组件（父子与非父子通信）
组件组织通常一个应用会以一棵嵌套的组件树的形式来组织。日常开发里，我们可以按照功能将一个网页拆分成很多个部分，每个部分就是一个组件。例如，可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的子组件。父子组件通信父子组件传值通信假设第二层组件想和第一层组件进行通信，分析其传值过程1、(第一层向第二层传值)：父组件通过props传值到子组件，如此便实现父子组件向下通信2、(第...
2019-10-30 17:16:35
288
原创 VUE工程化
步骤1、卸载旧版node—uninstall nodejs2、安装新版，测试node版本和npm版本3、安装cnpm淘宝镜像4、安装vue-cli脚手架工具5、创建vue项目—一系类的配置6、项目下载完毕后，进入cd项目文件，启动项目npm run dev淘宝镜像遗留问题上节安装了淘宝镜像cnpm，安装成功后检测cnpm版本此时cmd输出cnpm版本，表示安装成功。node_m...
2019-10-29 19:55:02
1028
原创 VUE之组件（绑定原生事件、$listeners、$ref）
组件绑定原生事件有时，我们想要在一个组件的根元素上直接监听一个原生事件，一般操作步骤如下1、首先定义一个 child 组件，什么事件都不绑定，代码如下：步骤：2、接下来，给 child 组件增加一个 @click 事件，如下所示3、这个 handleClick 方法是谁的呢？当然是父作用域下的方法，所以接下来在根组件中增加一个方法，代码如下分析验证：当点击按钮的时候发现，没有...
2019-10-28 20:26:55
863
原创 VUE之组件（组件细节、模块系统、v-model语法糖）
H5编码规范分析如下代码中的组件解析结果 <div id="demo"> <!-- 父组件 --> <table> <tbody> <row></row> <row></row> <row></row> ...
2019-10-28 20:08:28
352
原创 VUE之组件（Props特性深析）
Prop命名风格【前言】创建一个博文组件，如果你不能向这个组件传递某一篇博文的标题或内容之类的我们想展示的数据的话，它是没有办法使用的，这也正是 prop 的由来。Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。为了给博文组件传递一个标题，我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中注...
2019-10-28 19:18:00
669
原创 图书管理系统
图书管理系统 Vue demo <div id="app"> <table class="table table-hover...
2019-10-24 20:07:21
2805
原创 VUE之组件（组件通信、单向数据流）
组件通信我们已经知道，从父组件向子组件通信，通过 props 传递数据就可以了，但 Vue 组件通信的场景不止有这一种，归纳起来，组件之间通信可以用下图表示。组件关系可分为父子组件通信、兄弟组件通信、跨级组件通信。本节主要介绍下常见父子通信的方法。单向数据流单向数据流是父子组件的核心概念，props是单向绑定的。当父组件的属性发生变化的时候，会传导到子组件。但是反之，为了防止子组件无...
2019-10-23 19:37:46
223
原创 VUE之组件（动态组件及keep-alive）
动态组件Vue可以在不同组件之间进行动态切换，这种方法称为动态组件。 <div class="tab_area"> <ul> <li v-for="(tab,index) of tabs" :key="tab.index"> <button>{{tab}}</but...
2019-10-23 19:11:45
412
原创 VUE之组件（复用性、props、单向数据流）
组件组织通常一个应用会以一棵嵌套的组件树的形式来组织。–VUE：组件化、数据驱动例如，可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、标题之类的组件。为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。组件的注册类型分两种：全局注册和局部注册。组件复用性可以将组件进行任意次数的复用，例如，利用组件定义一个超级链接，在项目中多次使用单个根元素限制...
2019-10-22 19:50:53
221
原创 ES6之模板引擎&&字符串模板x-template
字符串模板实现方案: <input type="button" id="btn" value="点击显示" /> <div id='showArea'></div> <script type="text/template" id="showContent"> <div class="prompt">...
2019-10-22 17:02:23
525
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人