- 博客(72)
- 收藏
- 关注
RSS订阅原创 小程序之点击复制文本
点击按钮复制文本<view class="page"> <view class="content"> <label>{{name}}<text>{{ids}}</text></label> <button bindtap='copyBtn'>复制</button> </view></view>Page({ data: { name:"订单编号："
2020-05-15 17:39:17
867
1
原创 POST和GET的区别以及POST提交方式
POST和GET的区别及POST提交方式post和get的区别1、GET提交的数据放在URL中，POST则不会。这是最显而易见的差别。这意味着GET更不安全。（POST也不安全，因为HTTP是明文传输抓包就能获取数据内容，要想安全还得加密）2、GET提交的数据大小有限制（因为浏览器对URL的长度有限制，GET本身没有），POST没有。3、GET可以被保存为书签，POST不可以。4、GET...
2020-05-06 20:30:18
342
原创 Element UI 框架中表单数据的验证方式
在ElementUI框架中，对表单数据进行验证需要对标记对进行设置，设置规则如下：1、<el-form>标记对的rules属性在数据区绑定为一个对象型数据。2、rules对象的键名必须与表单元素的v-model绑定的变量一致。3、rules对象的键名取值为一个数组，数组元素是表单元素的多个验证规则。4、标记对使用prop属性来为表单设置需要满足的验证规则实例代码：<...
2020-05-03 15:33:51
709
原创 uni-app 获取 DOM 节点的相关信息
uni-app 获取 DOM 节点的相关信息一、如何获取 SelectorQuery 对象实例let query = uni.createSelectorQuery();功能：返回一个selectorQuery对象的实例，该实例用来查询DOM节点的信息。注意事项：（1）该方法需要在生命周期mounted后进行调用。（2）nvue不支持该方法。二、如何获取DOM节点1、获取匹配...
2020-05-02 22:46:21
6411
1
原创 uni-app入门
一、uni-app简单介绍什么是uni-appuni-app是使用Vue.js开发跨平台应用的前端框架，开发者编写的一套代码，可编译到iOS、Android Q、H5、小程序等多个平台uni-app的优点跨平台发行，运行体验更好与小程序的组件、api一致；兼容weex原生渲染，增加了开发效率高，但是由于wexx坑比较多，建议还是使用局部渲染优化；支持Vue语法，微信小程序API...
2020-04-23 19:12:34
196
原创 uni-app使用总结
uni-app使用总结遇到的问题样式问题1、组件和调用此组件的页面样式最好不要重名，不然会有样式覆盖问题。2、数据绑定变量的时候不能识别upx，可以转化computed：{ minWidth（）{ return uni.upx2px（750 / 2）+ ‘px’；//350upx }}3、css获取状态栏的高度var（-status-bar-height）小程序是固定25...
2020-04-23 18:56:32
515
原创 微信小程序（触控事件）
事件简介事件简介①本质：事件是视图层到逻辑层的通讯方式②作用：事件可以将用户的行为反馈到逻辑层进行处理③应用：事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数④参数：事件对象可以携带额外信息，如 id， dataset， touches事件类型在编写代码中，使用频率高的事件方式是常见的事件类型注意：touch触屏系列事件常结合画布canvas组件...
2019-12-09 09:54:11
521
原创 微信小程序（路由及组件跳页传参）
目录（1）API路由跳页传参（2）navigator导航组件跳页传参API路由跳页传参商品列表展示页商品展示页编写回到商城列表展示页，如果跳页时直接传参，会发现黄色警告，无法跳页小程序事件传递参数小程序事件传递参数在小程序中，给元素绑定事件不能直接传递参数，如果写成正解：①给元素绑定自定义属性data-item=”{{item}}”②在js中通过事件...
2019-12-09 09:34:47
148
原创 微信小程序（组件跳转、规范、层级准备）
目录（1）路由API跳转小结（2）hover样式（3）navigator导航组件跳转（4）路由跳转规范（5）页面层级准备前言首先简单回顾下路由API跳转:wx.navigateTowx.navigateBackwx.redirectTowx.switchTabwx.reLaunchDOM的API：document.createElemen除了使用路由API进行页面...
2019-12-09 09:27:13
376
原创 微信小程序（页面栈和API跳转）
目录（1）数据操作限制补充（2）页面栈（3）API页面跳转—router路由APIwx.navigateTowx.navigateBackwx.redirectTowx.switchTabwx.reLaunch数据操作限制针对上节所讲的程序注册器与页面注册器，简单做下补充，即页面数据data的操作限制（1）直接修改Page实例的this.data而不调用this.set...
2019-12-05 19:50:00
1207
原创 微信小程序（页面用户行为）
目录（1）页面构造/注册器Page()（2）页面注册器参数data初始化数据页面生命周期页面用户行为其他（3）页面用户行为前言注册页面：对于小程序中的每个页面，在页面对应的 page.js 文件中调用 Page 方法注册页面示例作用：指定页面的初始数据、生命周期回调、事件处理函数等。页面的用户行为：小程序宿主环境提供了四个和页面相关的用户行为回调页面构造/注册器...
2019-11-27 19:37:35
427
原创 微信小程序（页面生命周期）
目录（1）页面构造/注册器Page()（2）页面注册器参数data初始化数据页面生命周期页面用户行为（3）页面生命周期及顺序前言注册页面：对于小程序中的每个页面，在页面对应的 page.js 文件中调用 Page 方法注册页面示例作用：指定页面的初始数据、生命周期回调、事件处理函数等。页面的生命周期：页面生命周期函数就是每进入/切换到一个新的页面的时候，就会调用...
2019-11-27 19:23:08
185
原创 微信小程序（小程序生命周期、运行机制、场景值）
目录（1）程序构造/注册器App()（2）小程序生命周期（3）小程序运行机制（4）scene场景值体验版特定页面设置体验人员扫描二维码进入时有时进入的不是首页？？？方案：登录小程序后台，重新设置体验版打开时的特定页面路径，更换为当前首页即可程序构造/注册器App()注册器/构造器分类：小程序级别：App-----程序构造器/注册器页面级别：Page------...
2019-11-27 19:11:38
220
原创 微信小程序（逻辑层与程序注册构造器）
目录（1）小程序逻辑层 App Service（APP服务）（2）ServiceWorker（3）web worker（4）程序构造/注册器App()前言逻辑层 App Service（APP服务）小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发者 JavaScript 代码的运行环境以及微信小程序的特有功能。逻辑层将数据进行处理后发送给视图层，同时接受...
2019-11-27 18:56:28
370
原创 GIT基本使用教程
安装GIT下载地址：https://git-scm.com/downloads打开方式windows系统：鼠标右键，点击Git Bash Here安装完成后，还需要最后一步设置，在命令行输入：$ git config --global user.name "Your Name"$ git config --global user.email "email@example...
2019-11-26 16:53:22
114
原创 微信小程序（跳页之tabBar导航跳转）
tabBar小程序导航简介：小程序是一个多tab标签应用（客户端窗口的底部或顶部有tab栏可以切换页面），可以通过Tabbar配置项指定tab栏的表现，以及tab切换时显示的对应页面。小程序根目录下的 app.json 文件用来对微信小程序进行全局配置在小程序配置文件里面可以设置tabBar属性：看个简单的案例效果：接下来挨个看下tabBar配置项下的属性：tabBar配置...
2019-11-25 14:39:50
420
原创 微信小程序（小程序模型与宿主环境）
目录（1）小程序模型（2）模型基本工作方式（3）数据驱动（4）通信模式（5）WebView（6）JsCore（7）宿主环境前言小程序可以调用宿主环境/微信提供的微信客户端的能力，这就使得小程序比普通网页拥有更多的能力(扫一扫、摇一摇)。小程序的运行环境分成渲染层和逻辑层， WXML 模板文件和 WXSS 样式文件工作在渲染层，JS 逻辑文件工作在逻辑层。渲染案例渲...
2019-11-25 14:28:28
1404
原创 AJAX之模板引擎&&字符串模板x-template
JS模板引擎当下前端性能越来越重要，使用ajax模板引擎，提高渲染速度，这也成了前端开发必须备技能。下面介绍几款 JavaScript 模板引擎1、Mustache基于javascript 实现的模板引擎,类似于 Microsoft’s jQuery template plugin,但更简单易用2、doT.jsdoT.js 包含为浏览器和Node.js 准备的 JavaScript ...
2019-11-23 15:15:20
419
原创 微信小程序（JS逻辑文件）
目录（1）业务逻辑案例（2）调用API案例（3）ECMAScript----（4）小程序执行环境（5）模块化（6）作用域与全局变量前言一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，通过编写 脚本文件来处理用户的操作。小程序的主要开发语言是 JavaScriptJS 作用：①开发者使用 JS来开发业务逻辑；②调用...
2019-11-22 18:57:27
1204
原创 微信小程序（适配小结、移动端1px与选择器权重）
WXSS选择器权重与优先级WXSS优先级与CSS类似，权重如下图所示权重越高越优先。在优先级相同的情况下，后设置的样式优先级高于先设置的样式权重案例：适配小结针对上节介绍的物理像素与逻辑像素相关概念，本节再来做个小结，简单做下回顾关键词：物理像素dp（1）物理像素(physical pixel)物理像素又被称为设备像素（device pixel简称dp）他是显示设...
2019-11-21 18:34:26
775
原创 微信小程序（布局适配与物理逻辑像素）
前言移动端开发经常遇到一些概念：物理像素、逻辑像素、像素密度、像素比等，本节来详细介绍下关键词：屏幕尺寸、物理像素/屏幕分辨率/物理分辨率、逻辑像素DIP、像素密度PPI、像素比DPR、视网膜显示屏Retina、rpx、vw、vh等。屏幕尺寸华为荣耀7图上写的是5英寸。那么这个5英寸到底是怎么算出来的呢？先进行一下单位的换算1英寸（inch）=2.54厘米（cm）屏幕尺寸指...
2019-11-21 17:19:33
691
原创 微信小程序（WXSS样式文件）
目录（1）WXSS简介（2）分类（3）尺寸单位rpx（4）样式导入@import（5）style内联样式（6）WXSS选择器（7）开发工具设置WXSS简介简介：WXSS（WeiXin Style Sheets）是一套用于小程序的样式语言，用于描述WXML的组件样式，也就是视觉上的效果。对比：WXSS与Web开发中的CSS类似。为了更适合小程序开发，WXSS对CSS做了...
2019-11-21 16:52:36
384
原创 微信小程序（WXML模板文件二）
目录（1）循环指令key属性补充（2）wx:if条件变异指令（3）<block>标签（4）hidden隐藏元素（5）模板（6）引用（7）共同属性循环指令key属性补充Vue和React框架用遍历指令时的key值不建议用index（1）key值在没有删除插入操作时只要是唯一值也无所谓，即此时为index索引也可以（2）如果有删除或者插入的操作，后一位会继承删掉...
2019-11-21 16:39:58
350
原创 AJAX之JSON与JSONP
前言AJAX目前常问的两个面试题1、AJAX以何种格式来交换数据？2、跨域的需求如何解决？这两个问题目前都有不同的解决方案，比如数据可以用自定义字符串来描述，跨域可以通过服务器端代理来解决。到目前为止最被推崇的方案还是用JSON来传数据，靠JSONP来跨域。而这就是本节将要讲述的内容。JSON&&JSONPJSON和JSONP虽然只有一个字母的差别，但本质差距较...
2019-11-20 19:57:39
172
原创 AJAX之jQuery操作
jQuery之AJAX日常开发里为了提高开发效率，一般会使用框架中的AJAX语法，例如经常使用的jQuery，也给我们封装好了AJAX的一些语法操作，而且jQuery也封装了JSONP跨域。几种常用的方式.ajax，.ajax，.ajax，.post， $.get， $.getJSON...
2019-11-20 19:44:59
611
原创 AJAX之JSONP跨域
前言本节讲解下利用JSONP实现百度智能搜索案例需求：输入框输入关键字同时，会利用AJAX不断跟后台进行交互，进而实现局部更新页面关键词功能，因为涉及跨域，所以这里用JSONP方式解决接口URL：https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/?wd=&cb=因为百度搜索接口不太稳定，接下来改用电商接口淘宝商品搜索建议...
2019-11-16 16:06:11
220
原创 AJAX之封装+跨域
AJAX5步法先简单回顾下之前所说的5步法1、创建异步对象XMLHttpRequest/*（1）创建XMLHttpRequest异步对象*/ var xhr; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject("Microso...
2019-11-16 15:34:45
261
原创 AJAX之状态值+状态码+HTTP请求
HTTP请求HTTP简介http是计算机通过网络进行通信的规则，使浏览器去服务器请求信息和服务。HTTP是一种无状态协议（他可以自己保存东西cookie）：无状态指的是不建立持久的连接，即服务端不保留连接的相关信息，即断开请求和响应后是没有记忆的。HTTP请求HTTP请求是一步完成的吗？—NOHTTP请求步骤一个完整的HTTP请求过程，通常包含以下7个步骤（1）建立TCP连...
2019-11-15 15:53:25
89
原创 AJAX请求5步法
目录（1）AJAX请求步骤(初版)（2）AJAX请求类型（3）跨域+CORS+Network（4）JSON序列化与反序列化/解析（5）AJAX请求步骤(微调)AJAX请求步骤AJAX请求5部曲：（1）创建XMLHttpRequest异步对象（2）设置回调函数，针对不同的响应状态进行处理 —监听Ajax的状态readyState的改变事件onreadystatechange...
2019-11-15 15:41:11
489
原创 AJAX简介与原理
关联网址（1）聚合数据https://www.juhe.cn/docs/api/id/39—天气（2）JSON API免费接http://www.bejson.com/knownjson/webInterface/目录（1）AJAX简介（2）AJAX应用案例（3）传统验证方式（4）AJAX验证方式（5）AJAX通俗理解+工作方式ajax简介（1）什么是AJAX？正...
2019-11-14 19:25:03
294
原创 AJAX+ML+DTD概念
目录（1）ajax简介（2）XML简介（3）SGML简介（4）DTD简介（5）HTML与DTD（6）为什么需要DTD声明？（7）DTD作用（8）标准模式(strict mode)和怪异模式(quirks mode)（9）HTML5文档声明（10）什么是 XHTML？（11）XHTML对比HTML（12）对比GML、SGML、HTML、XML、XHTML、HTML5aj...
2019-11-14 19:10:11
122
原创 微信小程序（WXML模板文件一）
目录（1）页面根元素（2）WXML简介（3）标签闭合、敏感性（4）数据驱动（5）数据绑定{{}}—{{}}（6）列表渲染v-for----wx:for页面根元素根元素page每一个页面都具备一个根元素：<page></page>页面根元素可以在控制台的WXML选项卡中看到允许在wxss文件中对page根元素进行样式设置...
2019-11-13 17:02:23
565
原创 微信小程序（JSON配置文件）
补充：认识微信小程序的目录结构一、根目录下的三个文件：1、app.js，必须，小程序逻辑文件。2、app.json，必须，小程序配置文件。3、app.wxss，全局公共样式文件。4、[pages]，用于存放页面文件的文件夹。5、[utils]，用于存放公共js的文件夹。微信小程序的页面：1、微信小程序是由若干个页面构成的。2、所有的页面内容必须存放在[pages]文件夹下。...
2019-11-13 15:05:57
1177
原创 微信小程序（开发工具、项目创建、发布审核、人员及目录结构分析）
目录（1）账号申请（2）后台小程序信息完善（3）安装开发工具IDE（4）小程序项目搭建（5）项目编译（6）真机预览调试开发前准备小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。小程序开发前准备：①申请账号②安装开发工具申请账号开发小程序之前需要先注册一个小程序账号，通过这个帐号你就可以管理你的小程序。账号申请：...
2019-11-12 19:03:37
432
原创 ES6之模板引擎&&字符串模板x-template
前言在js里面，经常需要使用js往页面中插入html内容写过一点前端的都会碰到需要使用JS字符串拼接HTML元素然后append到页面DOM树上的情况。一般的写法都是使用+号以字符串的形式拼接，如果html很短还好说，但是遇到描述里面的这么大段，直接用字符串存储会很困难，因为不光要处理单引号，还需要很多「+」号把字符串一个个连接起来，十分的不方便。比如有的时候需要使用弹出框的时候手动使用字...
2019-11-07 20:07:10
147
原创 Vue之全局API（nextTick、filter、use）
全局API（1）什么是全局API？全局API并不在构造器里，而是先声明全局变量或者直接在Vue上定义一些新功能，Vue内置了一些全局API.通俗理解：就是在构造器外部用Vue提供的API函数来定义新的功能。（2）常用vue 的全局 API列表1、Vue.directive 自定义指令2、Vue.extend 扩展实例构造器3、全局操作Vue.set + Vue.delete4、V...
2019-11-06 16:43:20
464
原创 Vue之全局API（全局操作set+delete）
全局API（1）什么是全局API？全局API并不在构造器里，而是先声明全局变量或者直接在Vue上定义一些新功能，Vue内置了一些全局API。通俗理解：就是在构造器外部用Vue提供的API函数来定义新的功能。（2）常用vue 的全局 API列表1、Vue.directive 自定义指令2、Vue.extend 扩展实例构造器3、全局操作Vue.set + Vue.delete4、V...
2019-11-06 16:12:36
203
原创 VUE之全局API（扩展实例构造器extend）
全局API（1）什么是全局API？全局API并不在构造器里，而是先声明全局变量或者直接在Vue上定义一些新功能，Vue内置了一些全局API，比如本节要介绍的指令Vue.directive通俗理解：就是在构造器外部用Vue提供的API函数来定义新的功能。2）常用vue 的全局 API列表1、Vue.directive 自定义指令2、Vue.extend 扩展实例构造器3、全局操作Vu...
2019-11-04 18:46:04
185
原创 VUE之全局API（自定义指令directive）
全局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 17:15:36
1897
原创 VUE之多元素组件过渡+动画封装
（1）多元素过渡（2）多组件过渡（3）列表过渡（4）动画封装多元素过渡首先介绍下如何实现多元素过渡（1）利用条件编译指令v-if与v-else实现多元素内容切换.（2）接下来在内容切换基础上，添加过渡动画，例如渐隐渐现效果1、transition添加name属性命名2、设置过渡状态（3）状态管理测试后发现并没有过渡效果，分析原因Vue在多个元素切换过程中会尽量复用D...
2019-11-04 16:42:26
480
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人