- 博客(32)
- 收藏
- 关注
RSS订阅原创 CSS3---移动端苹果安卓适配
常见苹果适配问题：【问题1】：iPhone页面会自动把数字当成电话号码，点击后自动跳到电话拨号界面♥♥♥方案：<meta name="format-detection" content="telephone=no" />【问题2】微信浏览器自动调整页面字体大小♥♥♥方案：禁止微信浏览器调整页面字体大小: body{ -webkit-text-size-adjust...
2019-09-20 20:37:09
1716
原创 css3新增属性
一·pointer-events指针事件属性相关特性：①阻止用户的点击动作产生任何效果②阻止缺省即电脑默认状态，鼠标指针的显示③阻止CSS里的hover和active状态的变化触发事件④阻止JavaScript点击动作触发的事件<!DOCTYPE html><html> <head> <meta charset="UTF-8">...
2019-09-19 14:54:55
465
原创 微信小程序（事件对象-绑定、冒泡、捕获）
拓展：原生组件小程序中的部分组件是由客户端创建的原生组件，包含：①camera②canvas③input（仅在focus时表现为原生组件）④map⑤textarea⑥video一·事件冒泡①事件触发验证<view id="parent" bindtap="parentFn"> <view id="child" bindtap="childFn">&...
2019-09-03 20:51:09
878
原创 微信小程序（路由及组件跳页传参）
（1）API路由跳页传参商品展示页基础：<!--pages/type/type.wxml--><view class="goodsList"> <block wx:for="{{goodsList}}" wx:key="index"> <view class="good" bindtap="jump">...
2019-08-28 11:54:42
329
原创 微信小程序（路由及组件跳页传参）
前言：除了使用路由API进行页面跳转外，小程序宿主环境也提供了导航组件navigator进行页面跳转。一·hover样式小程序如果想给元素添加触屏点击样式，可以给元素添加hover-class属性。<view class="mineArea"> <block wx:for="{{mineArray}}" wx:key="index"> <view ...
2019-08-27 19:47:30
1026
原创 微信小程序（页面栈和API跳转）
一·页面栈定义：页面层级可能会有三层或者更多层，我们把这样的一个页面层级称为页面栈。我的主页面!--pages/mine/mine.wxml--><view class="mineArea"> <block wx:for="{{mineArray}}" wx:key="index"> <view class="mineList" bind...
2019-08-27 17:11:25
375
原创 微信小程序（页面用户行为）
前言注册页面：对于小程序中的每个页面，在页面对应的 page.js 文件中调用 Page 方法注册页面示例▲▲作用：指定页面的初始数据、生命周期回调、事件处理函数等。页面的用户行为：小程序宿主环境提供了四个和页面相关的用户行为回调一·页面构造/注册器Page()宿主环境提供了 Page() 构造器用来注册小程序页面Page()在页面脚本page.js中调用，Page() 的调用方式...
2019-08-26 20:14:12
183
原创 微信小程序（*小程序生命周期*、运行机制、场景值，*页面生命周期*）
注册器/构造器分类小程序级别：App-----程序构造器/注册器页面级别：Page------页面构造器/注册器—小程序级别App—（1）小程序的生命周期（2）App() 参数App构造器接受一个Object参数①onLaunch 生命周期函数–监听小程序初始化当小程序初始化完成时，会触发 onLaunch（全局只触发一次）App({ onLaunch: function...
2019-08-24 15:21:51
1292
原创 微信小程序（Flex布局-项目属性）
容器内的元素简称为“项目”或者“元素”项目属性集合：order、flex-grow、flex-shrink、flex-basis、flex、align-self♤♤项目属性♤♤：①沿主轴方向上的排列顺序order: 0（默认值） | <integer整数>②项目的收缩因子flex-shrink: 1（默认值） | <数字>③项目的扩张因子flex-grow: 0（...
2019-08-23 16:57:20
582
原创 微信小程序（Flex布局-容器属性）
（1）盒模型分类：IE盒模型，标准盒模型。区别：宽高计算方式不同。前言：微信小程序 View视图标签支持两种布局方式：Block 和 Flex注意：所有 View 默认都是 block浮动布局，所以如果要使用 flex 布局的话需要进行显式声明。（2）容器与项目元素容器：日常开发中，采用flex布局的元素，一般简称为“容器”。项目/元素：容器内的元素简称为“项目”或者“元...
2019-08-23 15:43:25
451
1
原创 静态补充CSS-----BFC、IFC、FFC、GFC
前言：Web页面的布局，常见的主要有“浮动布局（float）”、“定位布局（position）”、“行内块布局（inline-block）”、“CSS3的多栏布局（Columns）”、“伸缩布局（Flexbox）”以及“网格布局（Grids）”等。（1）BFC在了解 BFC 是什么之前，先介绍 Box、Formatting Context的概念。Box1）Box ： CSS 布局的对象和...
2019-08-23 11:22:53
160
原创 微信小程序（跳页之tabBar导航跳转）
（1）tabBar小程序导航简介：小程序是一个多tab标签应用（客户端窗口的底部或顶部有tab栏可以切换页面），可以通过Tabbar配置项指定tab栏的表现，以及tab切换时显示的对应页面。小程序根目录下的 app.json 文件用来对微信小程序进行全局配置小案例：-----小程序页面----app.json"tabBar":{ "list":[ { ...
2019-08-22 20:34:47
634
原创 微信小程序（JS逻辑文件）
前言：一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，通过编写 脚本文件来处理用户的操作。⌒⌒⌒小程序的主要开发语言是 JavaScript⌒⌒⌒JS 作用：①开发者使用 JS来开发业务逻辑；②调用小程序的 API 来完成业务需求。(1)业务逻辑案例:----(响应用户操作)(2)调用APIwx.showToast(...
2019-08-22 19:43:12
338
原创 微信小程序（适配小结、移动端1px与选择器权重）
（1）WXSS选择器权重与优先级（2）适配小结（3）物理像素dp物理像素(physical pixel)又被称为设备像素（device pixel简称dp）他是显示设备中一个最微小的物理部件。-----一个设备的物理像素是固定不变的。（4）设备独立像素DIPCSS像素/逻辑像素/设备独立像素/设备无关像素/设备无关像素（Device Independent Pixels）可以认为是计...
2019-08-21 20:19:06
600
原创 微信小程序（布局适配与物理逻辑像素）
（1）屏幕尺寸屏幕尺寸指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米如何计算手机尺寸？答：知道手机屏幕的长和宽，然后利用勾股定理，就可以算出斜边的长了。还有个更简单的方法，只要用尺子量一下它的对角线是多少厘米，然后再换算成英寸就搞定了。（2）物理像素–UI设计师像素物理像素==屏幕分辨率/物理分辨率。屏幕分辨率是屏幕像素的数量，一般用屏幕宽度的像素点乘以屏幕高度的像素点，指的是...
2019-08-21 19:24:37
454
原创 微信小程序（WXSS样式文件）
（1）WXSS简介简介：WXSS（WeiXin Style Sheets）是一套用于小程序的样式语言，用于描述WXML的组件样式，也就是视觉上的效果。小程序中的样式文件一共分为两个级别/两类：提供了全局的样式（app.wxss ）和局部样式（page.wxss）；注意：WXSS 仅支持部分 CSS 选择器WXSS与 CSS相比？？？尺寸单位样式导入（2）WXSS尺寸单位目的：引...
2019-08-17 14:56:34
1089
原创 微信小程序（WXML模板文件一）
（1）页面根元素根元素page每一个页面都具备一个根元素：<page></page>页面根元素可以在控制台的WXML选项卡中看到允许在wxss文件中对page根元素进行样式设置（2）WXML简介1）WXML 全称是 WeiXin Markup Language，是小程序框架设计的标签语言。2）WXML 充当的就是类似 HTML 的角色。—（但是也有不同，下）...
2019-08-17 11:40:31
1025
原创 微信小程序（JSON配置文件）
（1）配置文件布局：.json，文件格式遵循JSON语法规范。作用：对微信小程序进行全局配置，设置页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 切换页等。分类：小程序全局配置文件app.json和页面配置文件page.json。小程序配置文件app.json◆◆小程序根目录下的 app.json 文件用来对微信小程序进行全局配置◆◆文件内容本质就是一个 JSON 对象。...
2019-08-16 20:24:32
521
原创 微信小程序（发布审核、人员及目录结构分析）
（1）上传代码同预览和真机调试不同，上传代码是用于提交体验或者审核使用的。1)开发版—仅仅开发人员和管理员可以浏览项目。2)体验版—只要在小程序后台，加入到体验人员名单里，即可扫码体验小程序。注意：在发布体验版本之前，只有管理员和开发人员才可以体验使用小程序，其他人员均无法使用。（2）提交审核-----为了保证小程序的质量，以及符合相关的规范，小程序的发布是需要经过审核的。①在开发者...
2019-08-15 19:23:50
4212
原创 微信小程序（开发工具、项目创建）
（1）账号申请①：进入小程序注册页 根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号。网址：https://mp.weixin.qq.com（首次用QQ邮箱）（2）小程序APPIDAppID：在菜单 “开发”-“开发设置” 可以看到个人的小程序 AppID，这个在开发会用到，相当于微信小程序给开发人员的通行证。（3）小程序基本信息（4）小程序开发工具（5）打开微信...
2019-08-15 16:36:24
541
原创 微信小程序（版本、成员权限、编写设计理念）
（1）小程序版本管理①小程序开发版(开发优化阶段)②小程序体验版(管理员和开发人员体验和测试阶段)③线上版(开发微信用户体验)注：不要随意将功能不完整的小程序demo提交审核发布，如果发现随意发布，后台审核人员会进行封号处理。（2）小程序成员管理点击管理-成员管理会发现，成员分为管理员、项目成员、体验人员等不同角色。一：人员组织结构和权限分配：多数情况下，一个团队多人同时参与同一个小...
2019-08-14 17:26:45
3618
原创 微信小程序--小程序及微信生态圈
（1）微信简介微信：2011年1月21日，腾讯公司推出一个即时通讯服务的免费应用程序，由张小龙带领的腾讯广州研发中心产品团队打造 。)腾讯公司总裁马化腾在产品策划的邮件中确定了这款产品的名称叫做“微信”。（2）微信小程序简介（1）简介：（2）发展历程：①2016年年初，微信之父张小龙时隔多年的公开亮相，解读了微信的四大价值观。张小龙指出微信内部正在研究新的形态，叫「微信小程序」。②...
2019-08-14 16:18:49
1869
原创 vue阶段小结
（1）包管理工具与镜像：npm即node.js包管理工具的全称为node.js package manager，cnpm为淘宝镜像，一般同步频率为10分钟一次。cnpm与npm使用语法相同，区别在于服务器。（2）注册语法为在components选项里加入组件名进行注册，可以在注册时改名v-Register；（3）深拷贝与浅拷贝：数据类型分为基本数据类型和引用数据类型 ，其中基本数据类型包含nu...
2019-08-13 16:30:41
205
1
原创 transition标签或transition-group标签
由于我们使用vue时，也要适当的添加不同方式的应用过渡效果。但有时会遇到这样的问题。这是一种情况另一种情况解决方法：将每个transition和button再用一个盒子包起来但是：我们会发现:那么：transition标签或transition-group标签①transition 只能满足单个节点的过渡效果，在多个节点的渲染上显得力不从心。为了更好适用于更多的场景，v...
2019-08-09 19:38:45
14403
3
原创 组件element------Others组件
（1）Dialog 对话框-----在保留当前页面状态的情况下，告知用户并承载相关操作。基本用法-----需要设置visible属性，它接收Boolean，当为true时显示 Dialog。Dialog 分为两个部分：body和footer，footer需要具名为footer的slot。title属性用于定义标题，它是可选的，默认值为空。最后，本例还展示了before-close的用法。&l...
2019-08-08 16:38:03
446
原创 组件element------Navigation组件
（1）NavMenu 导航菜单顶栏-----导航菜单默认为垂直模式，通过mode属性可以使导航菜单变更为水平模式。另外，在菜单中通过submenu组件可以生成二级菜单。Menu 还提供了background-color、text-color和active-text-color，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。<el-menu :default-acti...
2019-08-08 15:33:36
222
原创 组件element------Notice组件
（1）Alert 警告基本用法----Alert 组件提供四种主题，由type属性指定，默认值为info。<template> <el-alert title="成功提示的文案" type="success"> </el-alert> <el-alert title="消息提示的文案" type="info...
2019-08-08 14:45:10
629
原创 组件element------form组件（2），Switch 开关-----Form 表单
（7）Switch 开关基本用法—绑定v-model到一个Boolean类型的变量。可以使用active-color属性与inactive-color属性来设置开关的背景色。<el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"></el-switch>&l...
2019-08-08 11:56:15
2986
原创 组件element------data组件
（1）Table 表格基础表格-------基础的表格展示用法。—当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。 <template> <el-table :data="tableData" ...
2019-08-07 20:45:33
986
原创 组件element------基础组件
（1） Layout 布局基础布局<el-row> <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col></el-row><el-row> <el-col :span="12"><d...
2019-08-07 17:01:18
510
原创 vue工程化之路由router
router可以译为路由器，在项目开发中是Vue.js 官方的路由管理器，主要功能是实现组件的路由配置路由router的使用步骤：①：在src/main.js入口文件中引入相关模块及组件 首先在src下新建个router目录，然后在里面新建个index.js文件。-------此时会报错：找不到vue-router开发依赖，即未安装vue-route模块。-----可以运行npm inst...
2019-08-02 18:57:09
177
原创 vue生命周期钩子和计算属性
一 vue之生命周期钩子1:什么是生命周期???vue实例从创建到销毁的过程，就是生命周期。]Vue 组件的生命周期分为四个阶段，每个阶段有两个生命钩子，注意前后钩子；①beforeCreate：组件实例刚被创建，组件属性data、el等还未生效。el 和 data 并未初始化。②created：实例已经创建完成之后被调用，然而，挂载阶段还没开始，$el 属性目前不可见。③befo...
2019-07-04 19:56:29
351
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人