青蛙king的博客

开发小程序注意事项：开发环境下建议关闭对“域名、TLS 版本以及 HTTPS 证书的校验”，但是上线时一定记得打开此校验，后端提供的接口必须并配置https 的小程序才能调用。 小程序页面下的四个文件的文件名最好与该页面名保持一致。...

登录微信小程序的“公众平台”，获取appid号：然后同步appid号到微信开发者工具里：选择上传：然后，回到微信公众平台，选择“版本管理”：然后，一步步提交审核（若信息不全，按要求完善信息就OK了）...

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

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

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

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

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

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

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

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

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

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

// index.wxml<view> <input style="border-bottom:2rpx solid #000;" type="text" placeholder="请输入本金" bindblur="changeVal" value="{{money}}"/></view>// index.js/** * * @par...

目录1、引入插件2、使用插件在vue中，监听数据变化常用 watch / computed ，在微信小程序里怎么用呢？通过一通学习，找到了一个插件，然后自己操作了一波。1、引入插件npm install --save miniprogram-computed2、使用插件如果你已经有一个这样的页面：Page({ data: { a: 1...

路由的实现方案：目录一、switchTab--跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。二、reLaunch--关闭所有页面，打开到应用内的某个页面。三、redirectTo-关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到tabbar页面。四、navigateTo--保留当前页面，跳转到应用内的某个页面。但是不能跳到tabbar页...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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数据类型...