- 博客(54)
- 收藏
- 关注
RSS订阅原创 微信小程序 （API---界面、位置、转发）
界面API位置API转发API界面API（1）界面—交互APIwx.showToast(Object object)显示消息提示框事件属性object.icon 的合法值案例：wx.hideToast(Object object)隐藏消息提示框语法：wx.hideToast()wx.showModal(Object object)显示模态对话框，基础属性wx....
2019-09-19 18:08:49
861
原创 微信小程序 （API---基础、路由、缓存、媒体）
基础 API路由API数据缓存API媒体API基础API（1）基础API—系统获取系统信息wx.getSystemInfo(Object object)与wx.getSystemInfoSync(Object object)wx.getSystemInfoSync为同步API，即wx.getSystemInfo的同步版success参数异步获取系统信息wx.getSyste...
2019-09-19 17:18:25
385
原创 微信小程序 （API---简介、运行机制及同步异步）
API简介1.API是什么？引用百度百科介绍微信小程序API2.微信小程序API是什么？API（Application Programming Interface,应用程序编程接口），通俗来讲：API是一种接口函数，把函数封装起来，给开发者，这样好多的功能就不需要你去实现了，只要会调用就好了。微信小程序利用API就可以实现用户信息、数据存储、微信支付等功能。微信小程序API结构图3...
2019-09-19 16:28:12
6167
2
原创 微信小程序 （组件---自定义组件）
缘由：小程序的界面是由一系列组件构成的。小程序基础库提供了一组基础组件来满足开发者的基本需求。但随着小程序开发变得越来越复杂，单纯使用基础组件来进行开发也变得越来越不方便。例如，较为复杂的小程序中常常会有一些通用的交互模块，比如“下拉选择列表”、“搜索框”、“日期选择器”等。这些界面交互模块可能会在多个页面中用到，逻辑也相对独立。然而，用传统的小程序开发方法来实现这样的模块是非常繁琐的。自定...
2019-09-19 16:17:06
807
原创 微信小程序 （组件---地图、画布）
今天我们先介绍下地图组件map及画布组件canvas。因为组件属性过多，很多方法尚未完善，所以主要讲解下常用属性及方法，后期开发如遇个性化地图项目需求，可参考官方文档依次配置即可。地图组件map个性化地图能力可在小程序后台“开发-开发者工具-腾讯位置服务”申请开通，详见https://lbs.qq.com/product/miniapp/guide《小程序个性地图使用指南》。根据指南介绍进...
2019-09-19 15:58:08
597
原创 微信小程序 （组件---媒体）
常用媒体组件audio音频组件camera系统相机组件image图片组件video视频组件媒体组件-音频audio音频控件注意：1.6.0版本开始，该组件不再维护，建议使用能力更强的 wx.createInnerAudioContext 接口 data: { srcVal:'http://sc1.111ttt.cn:8282/2018/1/03m/13/39613122...
2019-09-19 15:45:04
1057
原创 微信小程序 （组件---表单：滑块、开关、选择器）
表单组件—slider滑动组件拖动滑块时，两个两个的开始增长颜色类属性滑块属性<slider min="10" max="60" show-value="true" value="20" step="2" backgroundColor="red" activeColor="black" block-size="24" bl...
2019-09-19 11:42:01
1345
原创 微信小程序 （组件---表单：交互控件）
input输入框组件textarea多行输入框组件form表单组件radio-group单选选择器与radio单选项目label关联组件checkbox-group多选选择器与checkbox多选项目input输入框组件基础属性input输入框组件–基础属性—type类型type属性值input输入框组件—占位符placeholder相关占位符place...
2019-09-19 09:57:44
611
原创 微信小程序 （组件---表单：按钮微信开放能力与客服）
本节主要讲解下按钮组件之open-type —微信开放能力常用属性值1.contact客户会话2.share分享转发3.getPhoneNumber获取用户手机号4.getUserInfo获取用户信息5.openSetting授权设置页6.feedback意见反馈页面表单组件按钮组件之open-type —微信开放能力常用属性值open-type 微信开放能力属性值----co...
2019-09-19 09:31:16
578
原创 微信小程序 （组件---表单：按钮）
表单组件（1）button按钮组件button按钮属性按钮大小size属性值查看源码，分析button默认样式与小尺寸button默认样式默认样式（1px）由此可以分析出button按钮的边框是由伪元素button:after设置的。所以，若想去除小程序按钮默认边框，给button设置border:none无效，只能通过伪元素去除默认边框。查看源码，小尺寸butto...
2019-09-18 20:59:14
226
原创 微信小程序 （组件---基础内容组件）
icon图标组件progress进度条组件text文本组件拓展：富文本编辑器UE和UMrich-text 富文本组件基础内容组件icon图标组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)icon图标组件type类型参数icon图标组件progress进度条组件组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)基础展示属性...
2019-09-18 19:24:43
347
原创 微信小程序 （组件---视图组件案例）
滑块视图容器swiper和滑块swiper-item组件小程序scroll-view实现横向滚动导航scroll-view满屏滚动滚动Tab选项卡一.滑块视图容器swiper和滑块swiper-item组件微信小程序swiper实现滑动放大缩小效果第一步：先将基础轮播图写出来，开启无缝衔接模式circularWXML模板 渲染层<swiper circular="{{ci...
2019-09-10 19:10:12
1154
原创 微信小程序 （组件---视图组件）
什么是组件？组件就是我们写HTML的一些基本标签，比如div、span、p、ul、li等。在大多数HTML里面的标签，很多都是要自己写上一些效果的，但是在小程序里面，很多标签都带有自己的效果，可以实现一些简单的JS逻辑。微信小程序里有很多很有意思的组件，这些组件给我们开发小程序提供了很大的便利。一个小程序页面可以分解成多个部分组成，组件就是小程序页面的基本组成单元。为了让开发者可以快速进行开...
2019-09-09 21:14:46
2169
原创 微信小程序 （事件对象---绑定、冒泡、捕获）
原生组件小程序中的部分组件是由客户端创建的原生组件，包含：camera 相机canvas 画布input（仅在focus时表现为原生组件） 输入框map 地图textarea 多行输入框video 视频事件冒泡事件触发验证：点击父元素红色区域时，只会触发父级绑定的事件点击子元素橙色区域currentTarget和target有区别...
2019-09-03 19:00:35
536
原创 微信小程序（组件---收藏案例）
收藏功能需求分析样式分析：未收藏时为灰色态，点击收藏按钮，图标变色，同时弹框实体收藏成功；收藏成功后，点击已收藏的商品，取消收藏，此时图标恢复为灰色态，同时弹框提示取消收藏成功。**逻辑分析：每个商品单独绑定个数据，负责管理收藏状态，点击时判断状态，然后切换1.先将图片静态样式写入因为收藏按钮是在商品展示栏上一层，所以可以用绝对定位到右下角，此时点击便不会跳页接下来绑定数...
2019-08-28 21:52:31
726
原创 微信小程序 （触控事件）
事件简介本质：事件是视图层到逻辑层的通讯方式作用：事件可以将用户的行为反馈到逻辑层进行处理应用：事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数参数：事件对象可以携带额外信息，如 id， dataset， touches事件类型在编写代码时，使用频率高的是单击-tap长按-longtap滑动-touchstart、touchmove、touched、tou...
2019-08-28 20:52:19
313
1
原创 微信小程序 （WeUI框架）
因为小程序的api描述都比较简单，并没有wxml及wxss的描述，有的人可能会想小程序有没有一个UI库。类似于前端中的常见的UI库例如Bootstrap、MDUI（简称MD）、Semantic UI（简称Semantic ）、uni-app、MUI、Element等等类似的框架UI库小程序UI库WeUI：结果当前是当前有的，它就是微信小程序官方推出的小程序UI库WeUI。WeUI是什么?W...
2019-08-27 20:36:30
585
原创 微信小程序 （路由及组件跳页传参）
API路由跳页传参navigator导航组件跳页传参API路由跳页传参点击跳转商品详情页商品展示页代码API路由跳页传参如果跳页时直接传参，会发现黄色警告，无法跳页黄色警告小程序事件传递参数在小程序中，给元素绑定事件不能直接传递参数，如果写成正解：1.给元素绑定自定义属性data-item=”{{item}}”2.在js中通过事件对象获取event.curr...
2019-08-27 20:02:22
207
原创 微信小程序 （组件跳转、规范、层级准备）
路由API跳转小结hover样式navigator导航组件跳转路由跳转规范页面层级准备路由API跳转小结wx.navigateTowx.navigateBackwx.redirectTowx.switchTabwx.reLaunchDOM的API：document.createElement除了使用路由API进行页面跳转外，小程序宿主环境也提供了导航组件navigator进...
2019-08-27 19:38:30
1415
原创 微信小程序 （页面栈和API跳转）
数据操作限制补充页面栈API页面跳转wx.navigateTowx.navigateBackwx.redirectTowx.switchTabwx.reLaunch数据操作限制补充页面数据data的操作限制1.直接修改Page实例的this.data而不调用this.setData是无法改变页面的状态的，还会造成数据不一致。2.由于setData是需要两个线程的一些通信消耗，...
2019-08-27 13:22:17
1124
原创 微信小程序 （页面用户行为）
小程序界面渲染小程序界面渲染的基本原理：由WXML通过数据绑定的语法绑定逻辑层传过来的数据，数据来自于页面Page构造器的data字段，data参数是页面首次渲染时从逻辑层传递到渲染层的数据。双线程下的界面渲染：小程序的逻辑层和渲染层是分开的两个线程在渲染层，宿主环境会把WXML转化成对应的JS对象，在逻辑层发生数据变更的时候，需要通过宿主环境提供的setData方法把数据从逻辑层传递到...
2019-08-26 20:45:13
470
原创 微信小程序 （逻辑层与程序注册构造器）
小程序逻辑层jsCore和渲染层webview缘由：逻辑层也称之为 App Service(缘由：开发者写的所有代码最终将会打包成一份 JavaScript 文件，并在小程序启动的时候运行，直到小程序销毁，这一行为类似 ServiceWorker)顺序梳理：逻辑层jsCore—App Service—Service Worker —Web Worker（为 JavaScript 创造多线程...
2019-08-24 17:55:09
187
原创 微信小程序 （页面生命周期）
小程序注册App()页面注册Page()页面构造/注册器Page()宿主环境提供了 Page() 构造器用来注册小程序页面Page()在页面脚本page.js中调用，Page() 的调用方式Page构造器接受一个Object参数data属性是当前页面的初始数据onLoad、onReady、onShow、onHide、onUnload ，这5个回调是Page页面实例的生命周期函数，即...
2019-08-24 17:25:19
277
原创 微信小程序 （小程序生命周期、运行机制、场景值）
注册器/构造器分类：小程序级别：App-----程序构造器/注册器页面级别：Page------页面构造器/注册器小程序的生命周期：App() 参数App构造器接受一个Object参数小程序生命周期①onLaunch 生命周期函数–监听小程序初始化当小程序初始化完成时，会触发 onLaunch（全局只触发一次）②onShow 生命周期函数–监听小程序显示当小程序启动，或从后...
2019-08-24 16:14:52
649
原创 微信小程序 （JS逻辑文件）
业务逻辑案例调用API案例ECMAScript小程序执行环境模块化作用域与全局变量一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，通过编写 脚本文件来处理用户的操作。小程序的主要开发语言是 JavaScriptJS 作用：①开发者使用 JS来开发业务逻辑；②调用小程序的 API 来完成业务需求。业务逻辑案例用户响应操作...
2019-08-23 11:43:10
379
原创 微信小程序 （跳页之tabBar导航跳转）
tabBar小程序导航小程序是一个多tab标签应用（客户端窗口的底部或顶部有tab栏可以切换页面），可以通过Tabbar配置项指定tab栏的表现，以及tab切换时显示的对应页面。小程序根目录下的 app.json 文件用来对微信小程序进行全局配置在小程序配置文件里面可以设置tabBar属性：配置属性color设置字体颜色为黑色配置项属性selectedColor设置选中时...
2019-08-23 08:44:28
5914
原创 微信小程序 （小程序模型与宿主环境）
小程序模型模型基本工作方式数据驱动通信模式WebViewJsCore宿主环境小程序可以调用宿主环境/微信提供的微信客户端的能力，这就使得小程序比普通网页拥有更多的能力(扫一扫、摇一摇)。小程序的运行环境分成渲染层和逻辑层， WXML 模板文件和 WXSS 样式文件工作在渲染层，JS 逻辑文件工作在逻辑层。WXML模板使用 view 标签，其子节点用 {{ }} 的语法绑定一个 m...
2019-08-22 20:41:29
628
原创 静态补充CSS之IFC、FFC、GFC讲解
Web页面的布局，常见的主要有“浮动布局（float）”、“定位布局（position）”、“行内块布局（inline-block）”、“CSS3的多栏布局（Columns）”、“伸缩布局（Flexbox）”以及“网格布局（Grids）”等。IFC简介IFC简介：行级格式化上下文Inline Formatting ContextIFC布局规则：①在一个行内格式化上下文中，盒是一个接一个水平...
2019-08-21 22:01:56
240
原创 静态补充CSS-BFC讲解
BFC简介BFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）首先要明确BFC是什么意思，其全英文拼写为 Block Formatting Context 直译为“块级格式化上下文”。在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念Box 是 CS...
2019-08-21 21:43:36
210
原创 微信小程序 （flex布局 项目属性）
项目属性：设置容器内项目相关样式，用于设置项目的尺寸、位置，以及对项目的对齐方式做特殊设置。项目元素属性集合：order、flex-grow、flex-shrink、flex-basis、flex、align-self项目属性：①沿主轴方向上的排列顺序order: 0（默认值） | <integer整数>②项目的收缩因子flex-shrink: 1（默认值） | ③项目的扩张...
2019-08-21 20:57:22
1247
原创 微信小程序 Flex布局-容器属性
场景容器与项目元素主轴与交叉轴容器属性盒模型分类盒模型分类：IE盒模型，标准盒模型，本质区别：宽高计算方式场景在小程序开发中，需要考虑各种尺寸终端设备上的适配。在传统网页开发，用的是盒模型，通过display:inline | block | inline-block、 position、float来实现布局，缺乏灵活性且有些适配效果难以实现比如下面常见的信息列表，要求内容高...
2019-08-17 18:37:54
572
原创 微信小程序 （适配小结、移动端1px与选择器权重）
WXSS选择器权重与优先级WXSS优先级与CSS类似，权重如下图所示权重越高越优先。在优先级相同的情况下，后设置的样式优先级高于先设置的样式权重案例适配小结上节介绍的物理像素与逻辑像素相关概念，关键词：物理像素dp（1）物理像素(physical pixel)物理像素又被称为设备像素（device pixel简称dp）他是显示设备中一个最微小的物理部件。一个设备的物理像素...
2019-08-16 19:20:21
519
原创 微信小程序 （布局适配与物理逻辑像素）
移动端开发经常遇到一些概念：物理像素、逻辑像素、像素密度、像素比等关键词：屏幕尺寸、物理像素/屏幕分辨率/物理分辨率、逻辑像素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等如何计算手机尺寸？知道手机...
2019-08-16 16:53:01
1891
原创 微信小程序 WXSS样式
WXSS简介分类尺寸单位rpx样式导入@importstyle内联样式WXSS选择器开发工具设置WXSS简介WXSS（WeiXin Style Sheets）是一套用于小程序的样式语言，用于描述WXML的组件样式，也就是视觉上的效果对比：WXSS与Web开发中的CSS类似。为了更适合小程序开发，WXSS对CSS做了一些补充以及修改。WXSS 决定 WXML 组件的显示样式。...
2019-08-16 16:25:44
1267
原创 微信小程序 WXML模板文件（ 二）
循环指令key属性补充wx:if条件渲染指令block标签hidden隐藏元素模板引用共同属性循环指令key属性补充Vue和React框架用遍历指令时的key值不建议用index（1）key值在没有删除插入操作时只要是唯一值也无所谓，即此时为index索引也可以（2）如果有删除或者插入的操作，后一位会继承删掉的index，这时的key写不如不写，本来key是为了让遍历性能优化的...
2019-08-16 15:09:10
340
原创 微信小程序 WXML模板文件
页面根元素WXML简介标签闭合、敏感性数据驱动数据绑定列表渲染页面根元素根元素page每一个页面都具备一个根元素：page页面根元素可以在控制台的WXML选项卡中看到允许在wxss文件中对page根元素进行样式设置全称：WXML 全称是 WeiXin Markup Language，是小程序框架设计的标签语言对比：网页编程采用的是 HTML + CSS + JS 这样的组...
2019-08-15 19:11:26
1318
原创 微信小程序 JSON配置文件
新建页面page（1）手动创建①右键单击 [pages] 文件夹，在弹出的菜单中选择“新建目录”②右键单击新建的目录，在弹出的菜单中选择“新建Page”（2）自动创建直接在app.json文件的pages选项中将新页面的路径写好，系统会自动创建所对应的四个文件page.wxml模板文件、page.wxss样式文件、page.json配置文件、page.js逻辑文件删除页面page...
2019-08-15 17:46:52
1937
原创 微信小程序 发布审核 人员及结构目录分析
上传代码提交审核发布代码包优化小程序目录结构分析上传代码同预览和真机调试不同，上传代码是用于提交体验或者审核使用的。点击开发者工具顶部操作栏的上传按钮，填写版本号以及项目备注，需要注意的是，这里版本号以及项目备注是为了方便管理员检查版本使用的，开发者可以根据自己的实际要求来填写这两个字段。上传成功之后，登录小程序管理后台 - 开发管理 - 开发版本 就可以找到刚提交上传的版本了...
2019-08-14 16:32:18
444
原创 微信小程序 开发工具 项目创建步骤
账号申请后台小程序信息完善安装开发工具IDE小程序项目搭建项目编译真机预览调试小程序开发前准备：①申请账号②安装开发工具账号申请进入小程序注册页 根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号。网址：https://mp.weixin.qq.com小程序APPID注册完毕后即可登录小程序后台AppID：在菜单 “开发”-“开发设置” 可以看到个人的小程...
2019-08-14 14:58:20
2004
原创 了解微信小程序
简介：微信小程序，简称小程序，英文名Mini Program微信小程序VS移动APP小程序优势：无需下载，随走随关功能丰富，体验更简便接口众多，可以进行不断的开发 。流量入口大，背靠日活9.6亿的微信有强大的微信生态环境小程序对比APP的好处：开发成本低获客成本低于App开发周期更短，节省开发成本App已经饱和市场优势：①用户：减轻内存，用完即可关闭，不占用空间②...
2019-08-13 19:33:16
147
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人