- 博客(56)
- 收藏
- 关注
RSS订阅原创 微信小程序 组件--地图+画布
地图组件<map></map>个性化地图能力可在小程序后台“开发-开发者工具-腾讯位置服务”申请开通，详见https://lbs.qq.com/product/miniapp/guide《小程序个性地图使用指南》。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)...
2019-09-20 15:20:34
499
原创 微信小程序 API--界面、位置、转发
一、界面API1、界面—交互API：wx.showToast(Object object)显示消息提示框：（1）基础属性：（2）事件属性：3、object.icon 的合法值案例：wx.hideToast(Object object)隐藏消息提示框：wx.showModal(Object object)显示模态对话框1、基础属性：2、事件属性：3、objec...
2019-09-20 14:10:40
969
原创 微信小程序 API--基础、路由、缓存、媒体
一、基础 API获取系统信息：wx.getSystemInfo(Object object)与wx.getSystemInfoSync(Object object)wx.getSystemInfoSync为同步API，即wx.getSystemInfo的同步版success参数：1、异步获取系统信息wx.getSystemInfo(Object object)：2、同步获取系统...
2019-09-20 11:57:41
380
原创 微信小程序 API--简介、运行机制及同步异步
API简介（1）API是什么？引用百度百科介绍：API，全称Application Programming Interface，即应用程序编程接口。（2）微信小程序API是什么？API（Application Programming Interface,应用程序编程接口），通俗来讲：API是一种接口函数，把函数封装起来，给开发者，这样好多的功能就不需要你去实现了，只要会调用就好了。微信小...
2019-09-20 11:27:37
1855
原创 微信小程序 组件--自定义组件
自定义组件：面对这个情况，小程序基础库提供了让开发者自己创建界面组件的特性，称之为“自定义组件”。通过这个特性，开发者就能够将这样的交互模块抽象成界面组件，使界面代码组织变得非常灵活。版本要求：从小程序基础库版本 1.6.3 开始，小程序支持简洁的组件化编程。开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。...
2019-09-20 11:03:12
377
原创 微信小程序 组件--媒体
一、<audio></audio>音频控件注意：1.6.0版本开始，该组件不再维护，建议使用能力更强的 wx.createInnerAudioContext 接口。基础属性：事件绑定属性：第1步：获取音频上下文实例，并绑定给变量第2步：通过音频上下文实例来操作对应音频3、设置当前播放时间功能此时，点击按钮时便会快速跳跃至第10秒，如果see...
2019-09-19 17:08:01
480
原创 微信小程序 组件--表单：滑块、开关、选择器
一、slider滑动组件<view class="sliderA"> <slider min="10" max="100" show-value="true"></slider></view>颜色类属性：滑块属性拖动事件二、switch开关组件注意：switch类型切换时在iOS自带振动反馈，可在...
2019-09-19 16:11:32
783
原创 微信小程序 组件--表单：交互控件
一、input输入框组件（1）基础属性：其中：（2）占位符placeholder属性：<input value="输入框的初始内容" focus="true"></input> <input type="text">input框的类型</input> <input password="false" disabled...
2019-09-19 14:14:24
304
原创 微信小程序 组件--表单：按钮微信开放能力与客服
一、open-type 微信开放能力属性值----contact客服会话<button open-type="contact">客服会话</button>注意：①开发者工具暂不支持打开客服会话，所以需要真机测试。②聊天和普通对话一样，会被放置到小程序客服消息栏。开启客服消息推送需要在小程序后台配置二、open-type 微信开放能力属性值—share...
2019-09-19 09:42:38
517
原创 微信小程序 组件--表单：按钮
button按钮组件1、属性分析button默认样式与小尺寸button默认样式：默认样式（1px 问题）：由此可以分析出button按钮的边框是由伪元素button:after设置的。所以，若想去除小程序按钮默认边框，给button设置border:none无效，只能通过伪元素去除默认边框。2、属性3、属性4、属性5、属性分析按钮显示loadi...
2019-09-18 20:45:53
282
原创 微信小程序 组件--基础内容组件
一、icon图标组件（组件属性的长度单位默认为px）属性：其中：<view> <icon type="success"></icon> <icon type="success_no_circle"></icon> <icon type="info"></icon> <icon ty...
2019-09-18 20:22:32
192
原创 微信小程序--------组件（视图组件）
什么是组件？组件就是我们写HTML的一些基本标签，比如div、span、p、ul、li等。在大多数HTML里面的标签，很多都是要自己写上一些效果的，但是在小程序里面，很多标签都带有自己的效果，可以实现一些简单的JS逻辑。一个小程序页面可以分解成多个部分组成，组件就是小程序页面的基本组成单元。简介：组件是在WXML模板文件声明中使用的，WXML的语法和HTML语法相似，小程序使用标签名来引...
2019-09-18 15:26:52
635
原创 小程序效果案例
1、编写缩放类轮播图步骤：①基础轮播图写出来，开启无缝衔接模式circular②开启指示点③自定义指示点样式④添加前后边距⑤设置中间激活块的类名active⑥分开设置激活态与普通状态样式，并添加过渡效果⑦添加间隙⑧开启自动播放<swiper class="banner" circular="{{dots0}}" indicator-dots...
2019-09-10 15:49:46
114
原创 微信小程序--------WeUI框架
微信小程序官方推出的小程序UI库WeUI。一、简介WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。在微信小程序的开发过程中，涉及到的前端复杂的样式界面的问题，就需要使用个UI框架，这样可以省去以后很多麻烦。WeUI作为一个开源的移动端UI框架，由于它是微信官方提供的对微信的兼容性没有太大问题，而且和各组件的样...
2019-09-03 20:31:22
614
原创 微信小程序--------原生组件、事件对象（绑定、冒泡、捕获）
一、原生组件小程序中的部分组件是由客户端创建的原生组件，包含：①camera—相机②canvas—画布③input（仅在focus时表现为原生组件）④map—地图⑤textarea—多行输入框⑥video—视频二、事件冒泡<view id="parent" bindtap="fj"> <view id="child" bindtap="zj"><...
2019-09-03 19:24:25
1832
原创 案例：收藏功能
常见的收藏功能的实现逻辑分析：每个商品单独绑定个数据，负责管理收藏状态，点击时判断状态，然后切换样式分析：未收藏时为灰色态，点击收藏按钮，图标变色，同时弹框实体收藏成功；收藏成功后，点击已收藏的商品，取消收藏，此时图标恢复为灰色态，同时弹框提示取消收藏成功。步骤解析：（1）先将图片静态样式写入因为收藏按钮是在商品展示栏上一层，所以可以用绝对定位到右下角，此时点击便不会跳页。接下来...
2019-08-28 21:20:36
1519
原创 微信小程序--------触控事件
一、事件简介（1）本质：事件是视图层到逻辑层的通讯方式。（2）作用：事件可以将用户的行为反馈到逻辑层进行处理。（3）应用：事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。（4）参数：事件对象可以携带额外信息，如 id， dataset， touches二、事件类型在编写代码中，使用频率高的事件方式是：单击、长按、滑动。常见的事件类型：注意：touch触屏...
2019-08-28 19:34:00
361
原创 微信小程序-----路由及组件跳页传参
一、API路由跳页传参小程序事件传递参数：在小程序中，给元素绑定事件不能直接传递参数，如果写成bindtap="tops(a)" //不能写小括号，会有黄色警告。正解：（1）给元素绑定自定义属性data-item=”{{item}}”（2）在js中通过事件对象获取event.currentTarget.dataset.item①JS中通过event.currentTarget.dat...
2019-08-27 20:40:05
189
原创 微信小程序-----组件跳转、规范、层级准备
除了使用路由API进行页面跳转外，小程序宿主环境也提供了导航组件navigator进行页面跳转。一、hover样式注意：虽然css的hover伪类也可以实现类似效果，但不太理想，效果粘附性太大，不建议使用。小程序如果想给元素添加触屏点击样式，可以给元素添加hover-class属性。.hover{ background:#ccc;}二、navigator导航组件跳转wxml...
2019-08-27 17:37:58
396
原创 微信小程序-----页面栈和API跳转
一、数据操作限制补充（程序注册器与页面注册器）（1）直接修改Page实例的this.data而不调用this.setData是无法改变页面的状态的，还会造成数据不一致。（2）由于setData是需要两个线程的一些通信消耗，为了提高性能，每次设置的数据不应超过1024KB；（3）不要把data中任意一项的value设为undefined，否则可能会引起一些不可预料的bug。二、页面栈一个小...
2019-08-26 22:04:00
286
原创 微信小程序------页面用户行为
页面数据data，最后需要注意3点：（1）直接修改 Page实例的this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致；（2）由于setData是需要两个线程的一些通信消耗，为了提高性能，每次设置的数据不应超过1024kB；（3）不要把data中的任意一项的value设为undefined，否则可能会有引起一些不可预料的bug。页面用户行为有：...
2019-08-26 17:38:33
231
原创 微信小程序--------逻辑层与程序注册构造器
小程序分为：逻辑层jsCore和渲染层webview一、小程序逻辑层 App Service（APP服务）逻辑层也称之为 App Service。缘由：开发者写的所有代码最终将会打包成一份 JavaScript 文件，并在小程序启动的时候运行，直到小程序销毁，这一行为类似 ServiceWorker。顺序梳理：逻辑层jsCore—也可称为App Service—类似于Service W...
2019-08-24 15:59:30
295
原创 微信小程序--------页面生命周期
一、页面构造/注册器Page()注册页面：对于小程序中的每个页面，在页面对应的 page.js 文件中调用 Page 方法注册页面示例作用：指定页面的初始数据、生命周期回调、事件处理函数等。宿主环境提供了 Page() 构造器用来注册小程序页面Page()在页面脚本page.js中调用，Page() 的调用方式如下所示Page({ /** * 页面的初始数据 */...
2019-08-24 14:59:00
267
原创 微信小程序-------小程序生命周期、运行机制、场景值
一、程序构造/注册器注册器/构造器分类：小程序级别：App-----程序构造器/注册器页面级别：Page------页面构造器/注册器二、小程序生命周期App的生命周期是由微信客户端根据用户操作主动触发的。为了避免程序上的混乱，避免从其他代码里调用App实例的生命周期函数。App() 参数App构造器接受一个Object参数（1）onLaunch 生命周期函数–监听小程序初始化...
2019-08-24 14:18:24
615
原创 微信小程序-----JS逻辑文件
一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，通过编写 脚本文件来处理用户的操作。小程序的主要开发语言是 JavaScriptJS 作用：（1）开发者使用 JS来开发业务逻辑；（2）调用小程序的 API 来完成业务需求。一、业务逻辑案例交互案例：<view class="usermotto"> <te...
2019-08-23 11:22:46
465
原创 微信小程序（跳页之tabBar导航跳转）
tabBar小程序导航小程序是一个多tab标签应用（客户端窗口的底部或顶部有tab栏可以切换页面），可以通过Tabbar配置项指定tab栏的表现，以及tab切换时显示的对应页面。小程序根目录下的 app.json 文件用来对微信小程序进行全局配置在小程序配置文件里面可以设置tabBar属性：导航案例：接下来挨个看下tabBar配置项下的属性：tabBar配置项属性—list按...
2019-08-23 11:05:31
3131
原创 微信小程序-----小程序模型与宿主环境
小程序可以调用宿主环境/微信提供的微信客户端的能力，这就使得小程序比普通网页拥有更多的能力(扫一扫、摇一摇)。小程序的运行环境分成渲染层和逻辑层：WXML 模板文件和 WXSS 样式文件工作在渲染层。JS 逻辑文件工作在逻辑层。渲染案例：WXML模板使用 view 标签，其子节点用 {{ }} 的语法绑定一个 msg 的变量 <view class="usermotto">...
2019-08-23 09:25:53
395
原创 静态补充CSS之IFC、FFC、GFC讲解
Web页面的布局常见的主要有：“浮动布局（float）”、“定位布局（position）”、“行内块布局（inline-block）”、“CSS3的多栏布局（Columns）”、“伸缩布局（Flexbox）”以及“网格布局（Grids）”等。IFC简介：IFC–Inline Formatting Context（行级格式化上下文）布局规则：（1）在一个行内格式化上下文中，盒是一个接一个水...
2019-08-22 16:12:29
303
原创 静态补充CSS-BFC讲解
BFC—Block Formatting Context （块级格式化上下文）Box 是 CSS 布局的对象和基本单位。直观点来说，就是**一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 **不同类型的 Box， 会参与不同的 Formatting Context（译为：格式化上下文）（一个决定如何渲染文档的容器），因此Box内的元素会以...
2019-08-22 15:53:48
70
原创 Flex布局-项目属性
项目属性：设置容器内项目相关样式，用于设置项目的尺寸、位置，以及对项目的对齐方式做特殊设置。一、沿主轴方向上的排列顺序 order: 0（默认值） | <integer整数>作用：设置项目沿主轴方向上的排列顺序，数值越小，排列越靠前，属性值为整数。<view class="demo"> <view>1</view> <view...
2019-08-21 21:24:40
252
原创 Flex布局-容器属性
flex 布局方便适配不同大小的内容区域一、盒模型分类：IE盒模型，标准盒模型区别：/* 标准盒模型（默认值）------实际占比（width+padding+border）-----需要额外计算 */box-sizing:content-box;/* IE盒模型 -----实际占比（width）----不需要额外计算 */box-sizing:content-box;微信小程...
2019-08-17 19:21:37
170
原创 微信小程序-----适配小结、移动端1px与选择器权重
一、WXSS选择器权重与优先级权重越高越优先。在优先级相同的情况下，后设置的样式优先级高于先设置的样式<!-- WXSS选择器权重与优先级 --> <view class="qz" id="qzA" >权重问题</view>/* 权重优先级 *//* 权重1 */view{ color: red;}/* 权重10 */.qz...
2019-08-17 15:08:19
302
1
原创 微信小程序-----布局适配与物理逻辑像素
一、屏幕尺寸屏幕尺寸指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米。常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等。如何计算手机尺寸？第一种：量出手机屏幕的长和宽，在利用勾股定理，就可以算出斜边的长。第二种：用尺子量一下它的对角线是多少厘米，然后再换算成英寸就搞定了。手机屏幕尺寸：二、物理像素–UI设计师像素（物理像素/屏幕分辨率/物理分...
2019-08-16 21:36:12
688
原创 微信小程序-----WXSS样式文件
一、WXSS简介WXSS-------WeiXin Style Sheets（全称），用于小程序的样式语言。对比：WXSS与Web开发中的CSS类似。为了更适合小程序开发，WXSS对CSS做了一些补充以及修改。WXSS 决定 WXML 组件的显示样式二、分类小程序中的样式文件一共分为两个级别/两类：全局样式和局部样式小程序全局样式-------app.wxss，也叫页面公共样式，会被...
2019-08-16 20:21:13
2399
原创 小程序----WXML模板文件二
一、循环指令key属性补充Vue和React框架用遍历指令时的key值不建议用index（1）key值在没有删除插入操作时只要是唯一值也无所谓，即此时为index索引也可以。（2）如果有删除或者插入的操作，后一位会继承删掉的index，这时的key写不如不写，本来key是为了让遍历性能优化的操作，这种可能重复或者改变的key值，不仅不会优化还会影响性能。（3）index作为:key值，有可...
2019-08-16 19:22:45
176
原创 微信小程序----------WXML模板文件一
一、页面根元素page每一个页面都具备一个根元素：<page></page>。页面根元素可以在控制台的WXML选项卡中看到。允许在wxss文件中对page根元素进行样式设置。二、WXML简介全称：WXML 全称是 WeiXin Markup Language，是小程序框架设计的标签语言。对比：网页编程采用的是 HTML + CSS + JS 这样的组合。在...
2019-08-15 20:34:07
515
原创 微信小程序-------JSON配置文件
**新建页面**（1）手动创建①右键单击 [pages] 文件夹，在弹出的菜单中选择“新建目录”②右键单击新建的目录，在弹出的菜单中选择“新建Page”（2）自动创建直接在app.json文件的pages选项中将新页面的路径写好，系统会自动创建所对应的四个文件page.wxml模板文件、page.wxss样式文件、page.json配置文件、page.js逻辑文件**删除页面*...
2019-08-15 19:45:30
1172
原创 微信小程序-----发布审核、人员及目录结构分析
（1）上传代码同预览和真机调试不同，上传代码是用于提交体验或者审核使用的。项目上传：编写完代码后，在微信开发工具点击上传，将项目上传至网上。发布完成后，可以在后台选择“体验版”，点击选择“选为体验版本”，即可生成体验版。开发版—仅仅开发人员和管理员可以浏览项目。体验版—只要在小程序后台，加入到体验人员名单里，即可扫码体验小程序。注意：在发布体验版本之前，只有管理员和开发人员才可以体...
2019-08-14 16:54:44
710
原创 微信小程序-----项目创建、安装开发工具IDE
**（1）申请账号**网址：https://mp.weixin.qq.com进入小程序注册页 根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号，注册完毕后即可登录小程序后台。**（2）后台小程序信息完善**在菜单 “开发”-“开发设置” 可以看到个人的小程序 AppID，这个在开发会用到，相当于微信小程序给开发人员的通行证接下来设置小程序基本信息：小程序名称、简介、简...
2019-08-14 14:59:30
803
1
原创 初识微信小程序
微信小程序，简称小程序，英文名Mini Program微信小程序对比APP微信小程序VS移动APP：小程序优势：无需下载，随走随关功能丰富，体验更简便接口众多，可以进行不断的开发 。流量入口大，背靠日活9.6亿的微信有强大的微信生态环境小程序对比APP的好处：1.开发成本低2.获客成本低于App3.开发周期更短，节省开发成本4.App已经饱和小程序限制：①分享到...
2019-08-13 19:18:30
173
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人