woshierdanya的博客

原创 手机端常见兼容问题

1、在写手机端时必要需要加入meta// （width=device-width），// 初始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。// minimum-scale=1, maximum-scale=1 最大（最小）缩放比例// user-scalable 是否允许用户缩放。2.删除默认的苹果工具栏和菜单栏3.在web app应用下状态条（屏幕顶部条）的颜色4.禁止了把数字转化为拨号链接5.浏览网站时的小图标 6.设置缓存

原创 微信小程序（组件--基础内容组件）

（1）icon图标组件（2）progress进度条组件（3）text文本组件（4）拓展：富文本编辑器UE和UM（5）rich-text 富文本组件（1）icon图标组件组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)（1）icon图标组件type类型参数<view> <icon type="success"></icon&...

原创 IE兼容问题

#以上代码告诉IE浏览器，无论是否用DTD声明文档标准，IE8/9都会以IE7引擎来渲染页面。 #以上代码告诉IE浏览器，IE8/9都会以IE8引擎来渲染页面。 #以上代码告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。 #以上代码IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame.ht...

原创 微信小程序（组件--视图组件案例）

（1）滑块视图容器swiper和滑块swiper-item组件（2）小程序scroll-view实现横向滚动导航（3）scroll-view满屏滚动（4）滚动Tab选项卡（1）滑块视图容器swiper和滑块swiper-item组件微信小程序swiper实现滑动放大缩小效果①先将基础轮播图写出来，开启无缝衔接模式circular<view>滑块视图容器swiper和滑块...

原创 微信小程序（组件--视图组件）

什么是组件？组件就是我们写HTML的一些基本标签，比如div、span、p、ul、li等。在大多数HTML里面的标签，很多都是要自己写上一些效果的，但是在小程序里面，很多标签都带有自己的效果，可以实现一些简单的JS逻辑。微信小程序里有很多很有意思的组件，这些组件给我们开发小程序提供了很大的便利组件类型小程序按照应用场景将组件分为以下几个常用类型①视图容器组件—view、swiper②基...

原创 微信小程序（事件对象-绑定、冒泡、捕获）

原生组件原小程序中的部分组件是由客户端创建的生组件，包含：1.camera 2.canvas 3.input(仅在focus时表现为原生组件) 4.map 5.textarea 6.video事件冒泡<view id="parent" bindtap="parentFn"> <view id="child" bindtap="childFn"><...

原创 微信小程序（触控事件）

事件简介①本质：事件是视图层到逻辑层的通讯方式②作用：事件可以将用户的行为反馈到逻辑层进行处理③应用：事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数④参数：事件对象可以携带额外信息，如 id， dataset， touches事件类型在编写代码中，使用频率高的事件方式是：注意：touch触屏系列事件常结合画布canvas组件使用，简单了解即可。事件绑定...

原创 微信小程序（路由及组件跳页传参）

（1）API路由跳页传参（2）navigator导航组件跳页传参商品列表展示页：点击任何一个商品跳到对应的详情页：商品展示页编写：<!--pages/market/market.wxml--><text>pages/market/market.wxml</text><view class="goodList"> <view...

原创 微信小程序（组件跳转、规范、层级准备）

回顾下路由API跳转:wx.navigateTowx.navigateBackwx.redirectTowx.switchTabwx.reLaunch除了使用路由API进行页面跳转外，小程序宿主环境也提供了导航组件navigator进行页面跳转。hover样式点击跳页时，点击栏没有背景样式，类似于css的hover事件，小程序如果想给元素添加触屏点击样式，可以给元素添加hover-...

原创 微信小程序（页面栈和API跳转）

（1）数据操作限制补充（2）页面栈（3）API页面跳转wx.navigateTowx.navigateBackwx.redirectTowx.switchTabwx.reLaunch页面栈就相当于下面这个图 ↓“mine我的”页面代码案例：<!--pages/mine/mine.wxml--><text>pages/mine/mine.wxml...

原创 微信小程序（页面用户行为）

注册页面：对于小程序中的每个页面，在页面对应的 page.js 文件中调用 Page 方法注册页面示例作用：指定页面的初始数据、生命周期回调、事件处理函数等。页面的用户行为：小程序宿主环境提供了四个和页面相关的用户行为回调页面构造/注册器Page()宿主环境提供了Page()构造器用来注册小程序页面Page()在页面脚本page.js中调用，page()的调用方式如下所示：// p...

原创 微信小程序（页面生命周期）

①小程序注册App()②页面注册Page()1.页面构造/注册器Page()宿主环境提供了 Page() 构造器用来注册小程序页面Page()在页面脚本page.js中调用，Page() 的调用方式// pages/home/home.jsPage({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 ...

原创 微信小程序（小程序生命周期、运行机制、场景值）

体验版特定页面设置体验人员扫描二维码进入时不是首页？？？方案：登录小程序后台，重新设置体验版打开时的特定页面路径，更换为当前首页即可程序构造/注册器App()程序构造/注册器分类：小程序级别：APP—程序构造器/注册器页面级别：Page—页面构造器/注册器小程序的生命周期：App()参数（构造器接受一个object参数）程序构造/注册器App()App()参数：...

原创 微信小程序（跳页之tabBar导航跳转）

tabBar小程序导航小程序是一个多tab标签应用（客户端窗口的底部或顶部有tab栏可以切换页面），可以通过Tabbar配置项指定tab栏的表现，以及tab切换时显示的对应页面。小程序根目录下的 app.json 文件用来对微信小程序进行全局配置在小程序配置文件里面可以设置tabBar属性：案例："tabBar":{ "list":[ { ...

原创 微信小程序（小程序模型与宿主环境）

小程序的运行环境分成渲染层和逻辑层， WXML 模板文件和 WXSS 样式文件工作在渲染层，JS 逻辑文件工作在逻辑层。渲染“你好！”案例：XML模板使用 view 标签，其子节点用 {{ }} 的语法绑定一个 msg 的变量<view>{{message}}</view>JS 脚本使用 this.setData 方法把 msg 字段设置成 “你好!”/*生命...

原创 微信小程序（js逻辑文件）

小程序的主要开发语言是 JavaScriptJS 作用：①开发者使用 JS来开发业务逻辑；②调用小程序的 API 来完成业务需求。业务逻辑案例（响应用户操作）<view>{{message}}</view><button bindTap="btn">点击</button>点击 button 按钮的时候，希望界面显示 “我是点击后的内容...

原创 静态补充CSS-BFC讲解

BFC简介BFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。英文拼写为 Block Formatting Context 直译为“块级格式化上下文”。在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。Box 是 CSS 布局的对象和基本单位素...

原创 微信小程序（Flex布局-项目属性）

项目属性集合order、flex-grow、flex-shrink、flex-basis、flex、align-self设置容器内项目相关样式，用于设置项目的尺寸、位置，以及对项目的对齐方式做特殊设置。项目属性：①沿主轴方向上的排列顺序order: 0（默认值） | <integer整数>②项目的收缩因子flex-shrink: 1（默认值） | ③项目的扩张因子flex-...

原创 微信小程序（适配小结、移动端1px与选择器权重）

WXSS优先级与CSS类似，权重如下图所示权重越高越优先。权重案列：回顾（关键词）：物理像素dp（1）物理像素(physical pixel)物理像素又被称为设备像素（device pixel简称dp）他是显示设备中一个最微小的物理部件。一个设备的物理像素是固定不变的。屏幕像素密度ppi屏幕像素密度ppi（pixel per inch）屏幕像素密度(ppi)是指一个设备...

原创 微信小程序（布局适配与物理逻辑像素）

移动端开发经常遇到一些概念：物理像素、逻辑像素、像素密度、像素比等关键词：屏幕尺寸、物理像素/屏幕分辨率/物理分辨率、逻辑像素DIP、像素密度PPI、像素比DPR、视网膜显示屏Retina、rpx、vw、vh等。单位是英寸，1英寸=2.54厘米比如常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等逻辑像素/设备独立像素DIP—WEB逻辑像素/设备独立像素...

原创 微信小程序（WXSS样式文件）

WXSS（WeiXin Style Sheets）是一套用于小程序的样式语言，用于描述WXML的组件样式，也就是视觉上的效果。WXSS分类小程序中的样式文件一共分为两个级别/两类：提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。...

原创 微信小程序（WXML模板文件二）

循环指令key属性补充Vue和React框架用遍历指令时的key值不建议用index（1）key值在没有删除插入操作时只要是唯一值也无所谓，即此时为index索引也可以（2）如果有删除或者插入的操作，后一位会继承删掉的index，这时的key写不如不写，本来key是为了让遍历性能优化的操作，这种可能重复或者改变的key值，不仅不会优化还会影响性能（3）index作为:key值，有可能导致第...

原创 微信小程序（WXML模板一）

1.根元素page每一个页面都具备一个很元素：全称：WXML全称是WeiXin Markup Language，是小程序框架设计的标签语言。WXML文件后缀名是.wxml，语句在语法上同HTMl非常相似标签闭合编译：wxml要求标签必须是严格闭合的，没有闭合会导致编译错误。标签写法:解析结果：WXML中的属性是大小写敏感：WXML标签（1）标签名不一致HTML经常会...

原创 微信小程序（JSON配置文件）

新建页面page(1)手动创建：①右键单击 [pages] 文件夹，在弹出的菜单中选择“新建目录”②右键单击新建的目录，在弹出的菜单中选择“新建Page”（2）自动创建：直接在app.json文件的pages选项中将新页面的路径写好，系统自动创建对应四个文件page.wxml模板文件、page.wxss样式文件、page.json配置文件、page.js逻辑文件。删除页面page手...

原创 微信小程序（发布审核、人员及目录结构分析）

（1）上传代码（2）提交审核（3）发布（4）代码包优化（5）小程序目录结构分析上传代码1.同预览和真机调试不同，上传代码是用于提交体验或者审核使用的。点击开发者工具顶部操作栏的上传按钮，填写版本号以及项目备注，需要注意的是，这里版本号以及项目备注是为了方便管理员检查版本使用的，开发者可以根据自己的实际要求来填写这两个字段。上传成功之后，登录小程序管理后台 - 开发管理 - 开发版本...

原创 微信小程序（开发工具、项目创建）

1.申请账号2.后台小程序信息完善3.安装开发工具IDE4.小程序项目搭建5.项目编译6.真机预览调试小程序开发前准备：①申请账号 ②安装开发工具账号申请：进入小程序注册页网址：https://mp.weixin.qq.com注册完毕后即可登录小程序后台AppID：在菜单 “开发”-“开发设置” 可以看到个人的小程序 AppID，这个在开发会用到，相当于微信小程序给开发人员的...

原创 vue考试题

1.目前三大主流框架：vue、react、angular2.设计模式：主流框架模式MVC、MVP、MVVM全程为：Model View controller 、Model View presenter、Model View ViewModel3.

原创 VUE之过渡与动画

Vue提供了transition的封装组件，在下列情形中，可以给任何元素和租金添加进入/离开过过渡1.条件渲染（使用-v-if）2.条件展示（使用v-show）3.动态组件4.组件根节点过渡的类名在进入/离开的过渡中，会有6个class切换v-enter（插入）类：（1）v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。（2）v-ente...

原创 Element框架（组件）之总结

原创 Element框架之Others

1.Dialog 对话框¶ 基本用法需要设置visible属性，它接收Boolean，当为true时显示 Dialog。Dialog 分为两个部分：body和footer，footer需要具名为footer的slot。title属性用于定义标题，它是可选的，默认值为空。最后，本例还展示了before-close的用法。<el-button type="text" @click="d...

原创 Element框架之Navigation--nav导航

1.NavMenu 导航菜单¶ 顶栏适用广泛的基础用法。导航菜单默认为垂直模式，通过mode属性可以使导航菜单变更为水平模式。另外，在菜单中通过submenu组件可以生成二级菜单。Menu 还提供了background-color、text-color和active-text-color，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。<el-menu :defa...

原创 Element框架之Notice-Alert警告

1.Alert 警告用于页面中展示重要的提示信息。¶ 基本用法页面中的非浮层元素，不会自动消失。Alert 组件提供四种主题，由type属性指定，默认值为info。<template> <el-alert title="成功提示的文案" type="success"> </el-alert> <el-alert ...

原创 Element框架之data

1.Table 表格¶ 基础表格当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。 <template> <el-table :data="tableData" style="width: 100...

原创 Element框架之Form

1.Radio 单选框基础用法要使用 Radio 组件，只需要设置v-model绑定变量，选中意味着变量的值为相应 Radio label属性的值，label可以是String、Number或Boolean。<template> <el-radio v-model="radio" label="1">备选项</el-radio> <el-r...

原创 Element框架之Basic基础布局

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="...

原创 工程化（路由routher）

router可以译为路由器，在项目开发中是Vue.js官方的路由管理器，主要功能是实现组件的路由配置。下面讲解一下路由router的使用步骤：首先打开cmd让她跑起来；（1）在src/main.js文件中引入相关模块及组件vue-resource的用法：在src/main.js入口文件引入并注册vue-resouorce，和上一个截图中“引入并使用vue-resource网络请求模块”...

原创 CMD命令提示符

简介cmd是command的缩写，即命令提示符（CMD）（1）本质：命令提示符是在操作系统中，提示进行命令输入的一种工作提示符。特性及快捷操作（1）DOS操作系统用户指令是不区分大小写的。例如：Dir、dir、DIR的执行都是一样的。（2）快捷键：上下按钮可以切换到之前输入的指令；输入部分文件名，按TAB键即可自动识补全名称（3）打开方式：win键+R打开对话框→输入cmd→回车...

原创 Vue之表单与v-model

课程大纲（1）v-model基本用法（2）单选框/按钮（3）复选框/多选按钮（4）下拉选择列表（5）表单输入绑定修饰符v-model基本用法表单控件在实际业务较为常见，比如单选、多选、下拉菜单、输入框等，用他们可以完成数据的录入、校验、提交等。Vue提供了v-model指令，用于在表单类元素上双向绑定数据例如：在输入框上使用时，输入的内容会实时映射到绑定的数据上对于文本域tex...

原创 Array数组操作（变异更新、替换）

循环指令v-for补充使用v-for更新已渲染的元素列表时，默认用就地复用策略；列表数据修改的时候，他会根据key值去判断某个值是否修改，如果修改，则重新渲染这一项，否则复用之前的元素；循环指令key属性补充Vue和React框架用遍历指令时的key值不建议用index（1）key值在没有删除插入操作时只要是唯一值也无所谓，即此时为index索引也可以（2）如果有删除插入的操作，后一位会...

原创 vue之内置指令（基本、条件、列表渲染）

拓展迭代器迭代器模式是一种相对简单的模式，迭代器的使用可以极大地就爱你还数据操作，目前的绝大部分语言都内置了迭代器。（1）forEach迭代器forEach方法接收一个函数作为参数，对数组中的每个元素使用这个函数，只调用这个函数，数组本身没有任何变化，即不改变原始数组。forEach（2）map迭代器map迭代器和forEach有些类似（3）every迭代器every方法接受...