- 博客(41)
- 收藏
- 关注
RSS订阅原创 uniapp/微信小程序获取蓝牙设备
uniapp/微信小程序获取蓝牙设备viewscriptstyle此文章只是获取蓝牙设备，不涉及连接设备，连接设备敬请期待！！！view<u-navbar :is-back="true" title="设备" :background="background" title-color="#FFFFFF" back-icon-color="#FFFFFF" :border-bottom="false"> </u-navbar> <button class='bu
2021-06-19 10:36:13
1605
1
原创 微信小程序----表单：交互控件
表单组件1. input输入框组件基础属性input输入框组件–基础属性—type类型type属性值input输入框组件—占位符placeholder相关占位符placeholder属性注意：placeholder字体大小默认与input字体大小相同，不能分开设置，不然应用户体验。方案：给input设置字体大小即可input输入框组件...
2019-09-28 09:32:46
449
原创 微信小程序----表单：按钮微信开放能力与客服
表单组件按钮组件之open-type —微信开放能力常用属性值open-type 微信开放能力属性值----contact客服会话
2019-09-21 11:05:15
791
原创 微信小程序----表单：按钮
表单组件1. button按钮组件button按钮属性按钮大小size属性值查看源码，分析button默认样式与小尺寸button默认样式默认样式（1px问题）由此可以分析出button按钮的边框是由伪元素button:after设置的。所以，若想去除小程序按钮默认边框，给button设置border:none无效，只能通过伪元素去除默认边框。查看源码，小尺寸but...
2019-09-20 09:09:04
323
原创 微信小程序----基础内容组件
icon图标组件组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)icon图标组件type类型参数<icon type="success"></icon> <icon type="success_no_circle"></icon> <icon type="info"></icon> ...
2019-09-19 16:24:28
217
原创 微信小程序----视图组件案例
视图容器组件1. 滑块视图容器swiper和滑块swiper-item组件微信小程序swiper实现滑动放大缩小效果先将基础轮播图写出来，开启无缝衔接模式circular开启指示点属性：值：自定义指示点样式添加前后边距属性：值：...
2019-09-19 15:59:07
258
原创 微信小程序----视图组件
什么是组件？组件就是我们写HTML的一些基本标签，比如div、span、p、ul、li等。在大多数HTML里面的标签，很多都是要自己写上一些效果的，但是在小程序里面，很多标签都带有自己的效果，可以实现一些简单的JS逻辑。微信小程序里有很多很有意思的组件，这些组件给我们开发小程序提供了很大的便利简介一个小程序页面可以分解成多个部分组成，组件就是小程序页面的基本组成单元。为了让开发者可以...
2019-09-18 15:31:04
557
原创 微信小程序----WeUI框架
前言因为小程序的api描述都比较简单，并没有wxml及wxss的描述，有的人可能会想小程序有没有一个UI库。类似于前端中的常见的UI库例如Bootstrap、MDUI（简称MD）、Semantic UI（简称Semantic ）、uni-app、MUI、Element等等类似的框架UI库小程序UI库WeUI：结果当前是当前有的，它就是微信小程序官方推出的小程序UI库WeUI。WeU...
2019-09-18 11:47:53
517
原创 微信小程序----收藏案例
需求分析样式分析：未收藏时为灰色态，点击收藏按钮，图标变色，同时弹框实体收藏成功；收藏成功后，点击已收藏的商品，取消收藏，此时图标恢复为灰色态，同时弹框提示取消收藏成功。逻辑分析：每个商品单独绑定个数据，负责管理收藏状态，点击时判断状态，然后切换收藏功能先将图片静态样式写入因为收藏按钮是在商品展示栏上一层，所以可以用绝对定位到右下角，此时点击便不会跳页接下来绑定数据...
2019-09-18 11:06:30
314
原创 微信小程序----事件对象-绑定、冒泡、捕获
事件冒泡事件触发验证事件冒泡验证验证后发现事件发生冒泡，点击子级时，除了触发子级事件，还会冒泡到父级，触发父级绑定的事件点击父级红色区域点击父级红色区域时，只会触发父级绑定的事件target和currentTarget 属性的区别event.target返回触发事件的元素event.currentTarget返回绑定事件的元素例如：事件冒泡到父级时触发事件源头...
2019-09-03 20:37:43
194
原创 微信小程序----跳页之tabBar导航跳转
tabBar小程序导航简介：小程序是一个多tab标签应用（客户端窗口的底部或顶部有tab栏可以切换页面），可以通过Tabbar配置项指定tab栏的表现，以及tab切换时显示的对应页面。小程序根目录下的 app.json 文件用来对微信小程序进行全局配置在小程序配置文件里面可以设置tabBar属性：案例接下来挨个看下tabBar配置项下的属性：tabBar配置项属性—...
2019-08-28 17:29:28
1190
原创 微信小程序----小程序模型与宿主环境
前言小程序可以调用宿主环境/微信提供的微信客户端的能力，这就使得小程序比普通网页拥有更多的能力(扫一扫、摇一摇)。小程序的运行环境分成渲染层和逻辑层， WXML 模板文件和 WXSS 样式文件工作在渲染层，JS 逻辑文件工作在逻辑层。渲染案例渲染“Hello World”案例WXML模板使用 view 标签，其子节点用 {{ }} 的语法绑定一个 msg 的变量JS 脚本使用 ...
2019-08-28 17:12:15
204
原创 微信小程序----JS逻辑文件
前言一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，通过编写 脚本文件来处理用户的操作。小程序的主要开发语言是 JavaScriptJS 作用：开发者使用 JS来开发业务逻辑；调用小程序的 API 来完成业务需求。业务逻辑案例交互案例：点击 button 按钮的时候，希望界面显示 “Hello World”，于是在 ...
2019-08-28 17:01:59
301
原创 微信小程序----静态补充CSS之IFC、FFC、GFC讲解
简介前言：Web页面的布局，常见的主要有“浮动布局（float）”、“定位布局（position）”、“行内块布局（inline-block）”、“CSS3的多栏布局（Columns）”、“伸缩布局（Flexbox）”以及“网格布局（Grids）”等。IFC简介IFC简介：行级格式化上下文Inline Formatting ContextIFC布局规则：在一个行内格式化上下文中，盒是...
2019-08-28 16:12:34
240
原创 微信小程序----静态补充CSS-BFC
BFC简介BFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）首先要明确BFC是什么意思，其全英文拼写为 Block Formatting Context 直译为“块级格式化上下文”。在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。Box 是 ...
2019-08-28 16:08:04
327
原创 微信小程序----Flex布局-项目属性
项目属性：设置容器内项目相关样式，用于设置项目的尺寸、位置，以及对项目的对齐方式做特殊设置。项目元素属性集合：order、flex-grow、flex-shrink、flex-basis、flex、align-self项目属性：沿主轴方向上的排列顺序order: 0（默认值） | <integer整数>项目的收缩因子flex-shrink: 1（默认值） | <nu...
2019-08-28 15:58:34
178
原创 微信小程序----Flex布局-容器属性
盒模型分类盒模型分类：IE盒模型，标准盒模型，本质区别：宽高计算方式场景：在小程序开发中，需要考虑各种尺寸终端设备上的适配。在传统网页开发，用的是盒模型，通过display:inline | block | inline-block、 position、float来实现布局，缺乏灵活性且有些适配效果难以实现比如下面常见的信息列表，要求内容高度不确定情况下，保持垂直居中在不固定高度...
2019-08-23 10:18:52
201
原创 微信小程序----适配小结、移动端1px与选择器权重
WXSS选择器权重与优先级WXSS优先级与CSS类似，权重如下图所示权重越高越优先。在优先级相同的情况下，后设置的样式优先级高于先设置的样式权重案例：适配小结关键词：物理像素dp1. 物理像素(physical pixel)物理像素又被称为设备像素（device pixel简称dp）他是显示设备中一个最微小的物理部件。一个设备的物理像素是固定不变的。每个像素可以根据操作系...
2019-08-23 10:01:09
326
原创 微信小程序----布局适配与物理逻辑像素
屏幕尺寸屏幕尺寸指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米.比如常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等如何计算手机尺寸？知道手机屏幕的长和宽，然后利用勾股定理，就可以算出斜边的长了。还有个更简单的方法，只要用尺子量一下它的对角线是多少厘米，然后再换算成英寸就搞定了。物理像素–UI设计师像素物理像素/屏幕分辨率/物理分辨率：屏幕分...
2019-08-23 09:20:42
466
原创 微信小程序----WXSS
WXSS简介WXSS（WeiXin Style Sheets）是一套用于小程序的样式语言，用于描述WXML的组件样式，也就是视觉上的效果。对比：WXSS与Web开发中的CSS类似。为了更适合小程序开发，WXSS对CSS做了一些补充以及修改。WXSS分类小程序中的样式文件一共分为两个级别/两类：提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，可...
2019-08-16 19:19:38
1254
原创 微信小程序----wxml-2
循环指令key属性补充Vue和React框架用遍历指令时的key值不建议用indexkey值在没有删除插入操作时只要是唯一值也无所谓，即此时为index索引也可以如果有删除或者插入的操作，后一位会继承删掉的index，这时的key写不如不写，本来key是为了让遍历性能优化的操作，这种可能重复或者改变的key值，不仅不会优化还会影响性能index作为:key值，有可能导致第一次执行循环体初...
2019-08-16 14:39:12
138
原创 微信小程序----WXML
简介全称：WXML 全称是 WeiXin Markup Language，是小程序框架设计的标签语言。WXML 文件后缀名是 .wxml，语句在语法上同 HTML 非常相似标签闭合编译：WXML 要求标签必须是严格闭合的，没有闭合将会导致编译错误。WXML中的属性是大小写敏感：WXML和 HTML 非常相似，WXML 由标签、属性等等构成。但是也有很多不一样的地方下面来一...
2019-08-15 19:43:39
5213
1
原创 微信小程序基础
微信简介2011年1月21日，腾讯公司推出一个即时通讯服务的免费应用程序，由张小龙带领的腾讯广州研发中心产品团队打造张小龙（腾讯广州研发中心团队经理）：团队经理张小龙所带领的团队曾成功开发过QQ邮箱等互联网项目腾讯公司总裁马化腾在产品策划的邮件中确定了这款产品的名称叫做“微信”。logo首先要区分微信小程序、微信小游戏和微信公众号微信小程序简介：微信小程序，简称小程序，英...
2019-08-14 19:22:40
861
原创 vue考点
包管理工具与镜像：npm即node.js包管理工具的全称为node.js package manager，cnpm为淘宝镜像，一般同步频率为10分钟一次。cnpm与npm使用语法相同，区别在于服务器不同。vue单文件组件导入与导出：vue中引入其他组件的步骤（例如引入同级的Register组件）：单文件组件默认导入步骤：① 引入语法import Register from ‘./Regis...
2019-08-13 17:19:33
321
原创 Vue小结---面试题
1. 什么是MVVM？MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewMo...
2019-08-09 20:00:18
217
原创 element组件---其他组件
Dialog 对话框在保留当前页面状态的情况下，告知用户并承载相关操作。基本用法Dialog 弹出一个对话框，适合需要定制性更大的场景。<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button><el-dialog title="提示" :visible...
2019-08-08 11:48:16
2232
原创 element组件---导航组件
NavMenu 导航菜单为网站提供导航功能的菜单。顶栏适用广泛的基础用法。<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"> <el-menu-item index="1">处理中心</el-menu-i...
2019-08-08 10:31:24
994
原创 element组件---警告组件
Alert 警告用于页面中展示重要的提示信息。基本用法页面中的非浮层元素，不会自动消失。<template> <el-alert title="成功提示的文案" type="success"> </el-alert> <el-alert title="消息提示的文案" type="info"> ...
2019-08-08 09:54:47
2852
原创 element组件----数据组件
Table 表格用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。基础表格基础的表格展示用法。 <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" ...
2019-08-08 09:23:42
899
原创 element组件---表单组件
Radio 单选框在一组备选项中进行单选基础用法由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。<template> <el-radio v-model="radio" label="1">备选项</el-radio> <el-radio v-model="radio" label="2">备选项</e...
2019-08-07 19:30:34
2799
1
原创 element组件---基础组件
Layout 布局通过基础的 24 分栏，迅速简便地创建布局。基础布局使用单一分栏创建基础的栅格布局。<el-row> <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col></el-row><el-row&...
2019-08-07 16:25:45
1237
原创 vue工程化之路由router
路由routerrouter可以译为路由器，在项目开发中是Vue.js 官方的路由管理器，主要功能是实现组件的路由配置。路由router的使用步骤在src/main.js入口文件中引入相关模块及组件/* 引入并使用模块 *//*引入router下的index.js文件*/import router from './router';/*引入并使用vue-resource网络请求模块...
2019-08-02 18:16:12
389
原创 VUE之表单与v-model
v-model基本用法表单控件在实际业务较为常见，比如单选、多选、下拉选择、输入框等，用它们可以完成数据的录入、校验、提交等。 Vue 提供了 v-model 指令，用于在表单类元素上双向绑定数据。注意事项使用 v-model 后，表单控件显示的值只依赖所绑定的数据，不再关心初始化时的 value属性（解耦初始化value属性）。对于< textarea></texta...
2019-07-13 20:21:23
254
原创 Array数组操作（变异更新、替换）
JS数组操作末尾添加-push，会改变原始数组，返回值为数组更新后的新数组长度。末尾删除-pop，会改变原始数组，返回值为被删除的数组元素。
2019-07-13 17:25:59
12834
原创 VUE之v-bind类名与样式绑定 *重点
v-bindv-bind动态属性：常用于动态绑定HTML元素的属性，例如id、class、href、src等属性。改 变任一方数据后都会实时更新。语法格式：单个语法格式---- v-bind:attributeName=variable对象语法格式 ----v-bind=“{attributeName1:variable1,attributeName2:varia...
2019-07-13 09:19:17
214
原创 vue的生命周期和计算属性
生命周期1:什么是生命周期???vue实例从创建到销毁的过程，就是生命周期。2:Vue 组件的生命周期分为四个阶段，每个阶段有两个生命钩子，注意前后钩子；①beforeCreate：组件实例刚被创建，组件属性data、el等还未生效。el 和 data 并未初始化。②created：实例已经创建完成之后被调用，然而，挂载阶段还没开始，$el 属性目前不可见。③beforeMount：在...
2019-07-04 20:08:08
436
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人