自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

青蛙king的博客

走在前端的路上……

  • 博客(37)
  • 收藏
  • 关注

转载 小程序 图标icon & 进度条progress & 文本text & 富文本rich-text

目录一、图标icon二、进度条progress三、文本text四、富文本rich-text一、图标icon属性 类型 默认值 必填 说明 type string 是 icon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, downl...

2019-08-30 10:37:28 702

转载 小程序 view容器

view是视图容器属性 类型 默认值 必填 说明 hover-class string none 否 指定按下去的样式类。当hover-class="none"时,没有点击态效果 hover-stop-propagation boolean false 否 指定是否阻止本节点的祖先节点出现点击态 hover...

2019-08-30 09:49:32 276

转载 webpack 概念

webpack是一个JavaScript 应用程序的静态模块打包工具。这份文档最重要的是:你的 webpack 配置可以有许多不同的格式和风格。关键在于,为了便于你和你的团队易于理解和维护这些配置,需要保证一致性。前言:本文档旨在给出这些概念的高度概述,同时提供具体概念的详尽相关用例。目录一、核心概念1、入口(entry)2、输出(output)(1)...

2019-08-29 16:52:02 402

原创 小程序 swiper仿tab切换----动态绑定事件+获取wxml节点+在wxs里修改节点样式

一、先看效果:(不知道为啥录屏后的gif视频总会偏移,令人烦恼,望大神告知~)二、用到的知识点枚举scroll-view,详情请戳此:https://blog.csdn.net/mChales_Liu/article/details/99859680swiper + swiper-item,详情请戳此:https://blog.csdn.net/mChales_Liu/a...

2019-08-27 19:32:55 1025

原创 小程序 swiper轮播 & swiper仿tab切换

目录一、swiper轮播1、swiper + sweiper-item二、swiper仿tab切换一、swiper轮播1、swiper + sweiper-item微信小程序官网讲解swiper详情:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.htmlindicator-dot...

2019-08-23 16:24:56 542

原创 小程序 滚动条

一、scroll-view如何使用 scroll-view 详见:https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html二、竖直滚动条案例// index.wxml<!-- 竖直滚动条 --><scroll-view class="scrol...

2019-08-20 17:14:41 2062

原创 小程序 image相关

图片要分两种来看,一种是本地的图片,另一种是服务器上的图片。小程序中如何引入这两种图片呢?目录一、如何引用本地图片1、通过cover-view和cover-image来引入图片2、通过image标签引入图片二、如何引入自己服务器上的图片1、通过cover-view和cover-image来引入服务器上的图片2、通过image标签引入服务器上的图片3、将图片上传至服务...

2019-08-16 15:17:30 2605

原创 小程序 拖拽

在小程序中,拖拽的实现已经组件化了,可以用<movable-area>和<movable-view>这对父子标签来实现,当然也可以原生js去实现。这里切说一说我如何用这对父子标签实现的拖拽功能:目录一、了解<movable-area>和<movable-view>这对父子标签二、 案例一、了解<movable-a...

2019-08-15 14:35:26 2101

原创 小程序 用ruby把scss文件转为wxss文件

目录一、需要的工具:二、配置webstorm三、导入项目,开始编译。四、编译单个scss文件在小程序项目开发中,在WXSS中会遇到图片不能通过 background:url() 的方式引入,啷个办,用scss去编写,编写好了之后通过ruby把scss文件转为wxss文件。具体操作如下:一、需要的工具:webstorm安装好ruby:下载包百度网盘链接:h...

2019-08-12 12:09:47 598

转载 小程序 功能的实现

这里有:{视图容器轮播图标进度条表单导航媒体(音频、视频、拍照等)地图画布……}详情请戳这里:https://developers.weixin.qq.com/miniprogram/dev/component/...

2019-08-09 18:52:16 266

转载 小程序 登录 & 用户信息

目录一、登录二、用户信息一、登录小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系。登录流程时序说明:调用wx.login()获取临时登录凭证code,并回传到开发者服务器。 调用auth.code2Session接口,换取用户唯一标识 OpenID和会话密钥 session_key。之后开发...

2019-08-08 10:57:23 249

转载 小程序 蓝牙 & NFC & WiFi

目录一、蓝牙二、NFC三、Wi-Fi一、蓝牙1、蓝牙适配器模块生效周期为调用wx.openBluetoothAdapter 至调用wx.closeBluetoothAdapter 或 小程序被销毁为止。2、使用蓝牙打开蓝牙:wx.openBluetoothAdapter关闭蓝牙:wx.closeBluetoothAdapter3、请戳此链接:htt...

2019-08-08 10:55:48 1236

转载 小程序 地址

请戳此链接:https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/functional-pages/choose-address.html

2019-08-08 10:44:25 105

转载 小程序 支付

请戳此链接:https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/functional-pages/request-payment.html

2019-08-08 10:43:14 126

转载 小程序 转发 & 动态消息

目录一、转发1、获取更多转发信息2、页面内发起转发二、动态消息1、消息状态2、使用方法一、转发1、获取更多转发信息通过调用wx.showShareMenu并且设置withShareTicket为true; 当用户将小程序转发到任一群聊之后,此转发卡片在群聊中被其他用户打开时,可以在App.onLaunch或App.onShow获取到一...

2019-08-08 10:41:29 2661

转载 小程序 路由 & 分包 & 预加载

目录一、分包1、独立分包2、使用分包二、分包预加载1、配置方法2、限制三、实战一、分包分包是为了满足:按需加载。目前,小程序分包,大小有以下限制:整个小程序所有分包大小不超过 8M 单个分包/主包大小不能超过 2M1、独立分包独立分包是小程序中一种特殊类型的分包,可以独立于主包和其他分包运行。从独立分包中页面进入小程序时,不需要下载主包。当...

2019-08-07 18:32:19 1198

转载 小程序 Canvas画布

目录一、如何使用 Canvas 画布第一步:创建一个 Canvas 绘图上下文第二步:使用 Canvas 绘图上下文进行绘图描述第三步:画图二、坐标系三、渐变一、如何使用 Canvas 画布所有在canvas中的画图必须用 JavaScript 完成:WXML:(我们在接下来的例子中如无特殊声明都会用这个 WXML 为模板,不再重复)<ca...

2019-08-07 17:43:40 408

转载 小程序 存储

每个微信小程序都可以有自己的本地缓存,可以通过一下操作对本地缓存进行读写和清理。1、存储本地数据wx.setStorage/wx.setStorageSync2、获取本地数据wx.getStorage/wx.getStorageSync3、清除本地数据wx.clearStorage/wx.clearStorageSync4、清除本地数据的存储地址(清库)wx.rem...

2019-08-07 17:15:11 533

转载 小程序 组件化

目录一、组件生命周期二、 组件所在页面的生命周期三、组件 component四、组件传值1、父传子2、子传父五、组件 代码共享behaviors1、behavior特性:2、如何在组件中使用behavior?3、behavior字段的覆盖和组合规则4、细说behavior参数5、如何使用内置 behaviors?六、组件间关系re...

2019-08-07 16:55:45 211

转载 小程序 抽象节点

目录一、组件中使用抽象节点二、使用包含抽象节点的组件三、抽象节点的默认组件一、组件中使用抽象节点抽象节点:若节点对应的自定义组件不是由自定义组件本身确定的,而是自定义组件的调用者确定的,这时可以把这个节点声明为“抽象节点”。例如,我们现在来实现一个“选框组”(selectable-group)组件,它其中可以放置单选框(custom-radio)或者复选框(cus...

2019-08-07 16:51:34 871

转载 小程序 监听机制

目录一、使用数据监听器二、监听字段语法一、使用数据监听器有时,在一些数据字段被 setData 设置时,需要执行一些操作。例如,this.data.sum永远是this.data.numberA与this.data.numberB的和。此时,可以使用数据监听器进行如下实现。Component({ attached: function() { ...

2019-08-07 16:33:59 1529

转载 小程序 动画

目录一、简易动画二、高级动画一、简易动画1、使用CSS 渐变和CSS 动画来创建简易的界面动画。2、使用wx.createAnimation接口来动态创建简易的动画效果。二、高级动画1、通过使用 WXS 来响应事件的方法,来动态调整节点的 style 属性,从而实现动画效果。2、连续使用 setData 来改变界面的方法也可以达到动画的效果。...

2019-08-07 14:52:16 278

转载 小程序 屏幕 适配与旋转

目录一、屏幕适配二、屏幕旋转一、屏幕适配对于不同尺寸的显示区域,页面的布局会有所差异。此时可以使用 media query 来解决大多数问题。代码示例:.my-class { width: 40px;}@media (min-width: 480px) { /* 仅在 480px 或更宽的屏幕上生效的样式规则 */ .my-class { ...

2019-08-07 14:17:18 874

转载 小程序 事件

目录一、什么是事件二、事件分类三、事件冒泡四、事件 捕获五、事件对象1、BaseEvent 基础事件对象属性列表:2、CustomEvent 自定义事件对象属性列表(继承 BaseEvent):3、TouchEvent 触摸事件对象属性列表(继承 BaseEvent):4、特殊事件5、 target 和 currentTarget的区别六、WXS响应...

2019-08-07 11:34:38 990

转载 小程序 API

目录一、事件监听 API二、同步 API三、异步 API四、API大全五、api的私人订制一、事件监听 API以on开头的 API 用来监听某个事件是否触发。二、同步 API以Sync结尾的 API 都是同步 API。三、异步 API大多数 API 都是异步 API。四、API大全请戳这里:https://deve...

2019-08-07 10:33:57 582

转载 小程序模块化与资源引用

目录一、模块化二、资源引用一、模块化可以将一些公共的代码抽离成为一个单独的 js 文件,作为一个模块。模块只有通过module.exports或者exports才能对外暴露接口。二、资源引用1、如何利用node_modules里的 js 文件?小程序目前不支持直接引入node_modules, 开发者需要使用到node_modules时候建议...

2019-08-06 19:07:39 473

转载 小程序页面路由

目录一、页面栈二、 路由方式一、页面栈小程序以栈的形式维护了当前的所有页面。当发生路由切换的时候,页面栈的表现如下:路由方式 页面栈表现 初始化 新页面入栈 打开新页面 新页面入栈 页面重定向 当前页面出栈,新页面入栈 页面返回 页面不断出栈,直到目标返回页 Tab 切换 页面全部出栈,只留下新的 Tab 页面 ...

2019-08-06 18:28:01 435

转载 小程序生命周期

小程序生命周期://index.jsPage({ data: { text: "This is page data." }, onLoad: function(options) { // 页面创建时执行 }, onShow: function() { // 页面出现在前台时执行 }, onReady: function() {...

2019-08-06 18:14:42 1332

转载 小程序注册(不是用户注册哦)

目录一、注册小程序实例App.js二、注册页面1、使用 Page 构造器注册页面2、使用 Component 构造器构造页面一、注册小程序实例App.js每个小程序都需要在app.js中调用App方法注册小程序,绑定生命周期回调函数、错误监听和页面不存在监听函数等。整个小程序只有一个 App 实例。// app.jsApp({ onLaunch...

2019-08-06 18:10:50 512

转载 小程序 运行机制

目录一、小程序启动二、前台/后台状态三、小程序销毁一、小程序启动 热启动:假如用户已经打开过某小程序,然后在一定时间内再次打开该小程序,此时无需重新启动,只需将后台态的小程序切换到前台,这个过程就是热启动; 冷启动:用户首次打开或小程序被微信主动销毁后再次打开的情况,此时小程序需要重新加载启动,即冷启动; 小程序没有重启的概念。二、前台/后台状态当用户点击...

2019-08-06 16:43:32 227

转载 运算符

运算符目录一、运算符1、基本运算符2、一元运算符3、位运算符4、比较运算符5、等值运算符6、赋值运算符7、二元逻辑运算符8、条件运算符(三目运算符)9、逗号运算符二、运算符优先级一、运算符1、基本运算符+、-、*、/、%注意:加法运算(+)也可以用作字符串的拼接。2、一元运算符自增运算(++) ...

2019-08-06 14:18:45 267

转载 小程序WXS语法

WXS(WeiXin Script)目录WXS(WeiXin Script)一、WXS1、.wxs文件(1)、共享(2)、引用2、标签3、注意二、WXS变量三、WXS运算符详见我的另一篇转载:https://blog.csdn.net/mChales_Liu/article/details/98614298四、WXS语句五、WXS数据类型...

2019-08-06 11:13:45 1201

转载 小程序WXSS样式文件

WXSS (WeiXin Style Sheets)目录WXSS (WeiXin Style Sheets)一、全局样式与局部样式二、WXSS 是一种用来描述 WXML 的组件样式的语言。三、WXSS 的特性:1、尺寸单位2、样式导入一、全局样式与局部样式全局样式——定义在 app.wxss 中;局部样式——定义在 page 的 wxss 文件中...

2019-08-06 10:16:02 310

转载 小程序WXML 模板

一、WXML 模板语法目录一、WXML 模板语法1、数据绑定2、列表渲染3、条件渲染4、模板5、引用1、数据绑定<!--wxml--><view> {{message}} </view>// page.jsPage({ data: { message: 'Hello MINA!' }})注...

2019-08-05 18:40:01 277

转载 小程序 JSON 配置*大全

目录JSON 配置一、全局配置(app.json)二、工具配置(project.config.json)三、页面配置(页面.json)四、微信索引配置(sitemap.json)JSON 配置在小程序中,JSON扮演的静态配置的角色。 JSON 文件中无法使用注释。 初次生成的项目,里面包含3个json文件: app.json、project.confi...

2019-08-05 15:38:47 1267

转载 小程序代码构成

小程序构成.json后缀的JSON配置文件 .wxml后缀的WXML模板文件 .wxss后缀的WXSS样式文件 .js后缀的JS脚本逻辑文件

2019-08-05 15:12:47 100

转载 微信小程序允许上传的文件

在项目目录中,以下文件会经过编译,因此上传之后无法直接访问到:.js、app.json、.wxml、*.wxss(其中 wxml 和 wxss 文件仅针对在 app.json 中配置了的页面)。除此之外,只有后缀名在白名单内的文件可以被上传,不在白名单列表内文件在开发工具能被访问到,但无法被上传。具体白名单列表如下:wxspngjpgjpeggifsvgjsoncermp3...

2019-08-05 11:29:37 2650

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除