2017年10月_Crab0314

原创【微信小程序】API之网络（四）WebSocket

创建一个WebSocket连接进行使用，微信小程序同时只能有一个WebSocket连接，如果已经存在了一个WebSocket连接，会将该连接关闭，重新开启一个WebSocket连接。1.使用wx.connectSocket(OBJECT)连接，OBJECT的参数说明如下↓ 参数类型必填说明最低版本urlString

2017-10-26 16:46:26 1844

原创【微信小程序】API之网络（三）下载数据

1.微信小程序使用wx.downloadFile(OBJECT)进行文件下载（临时保存），返回文件的临时存储路径。该次存储只有本次小程序启动时有效，如需永久保存需调用wx.saveFile进行保存。先看下wx.downloadFile的参数列表↓参数类型必填必填

2017-10-25 22:14:56 3123 2

原创【微信小程序】API之网络（二）上传数据

今天记录一下小程序上传数据的方法。1.使用官方提供的接口wx.uploadFile(OBJECT)，将本地资源上传到开发者服务器，客户端发起一个HTTPS POST请求。参数说明如下。参数类型必填说明urlString是开发者服务器 urlfilePathString是要上传文件资源的路径nam

2017-10-23 09:38:29 3670

原创【微信小程序】API之网络（一）发起请求

周末很早起来了，折腾一上午终于把小demo搞定了。1.微信小程序的发起网络请求，使用wx.request(OBJECT)，OBJECT的参数说明如下参数名类型必填默认值说明urlString是开发者服务器接口地址dataObject/String否请求的参数headerObj

2017-10-22 14:11:20 3377 1

原创【微信小程序】框架wxml（六）wxml引用

wxml提供两种引用方式，import和include1.import和include的区别（1）import 可以在文件中使用被import文件中定义的template；include可以在文件中使用template及template外的内容。（2）import有作用域的概念，只能引用直接import的template；如果B.wxml import A.wxml，C.wxm

2017-10-21 16:54:40 1297

原创【微信小程序】框架wxml（五）wxml事件

1.事件定义· 事件是视图层到逻辑层的通讯方式。· 事件可以将用户的行为反馈到逻辑层进行处理。· 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。· 事件对象可以携带额外信息，如id，dataset，touches。2.举例事件的使用方法。（1）首先在wxml的组件中为button绑定一个事件处理函数跳转到更多示例（2）在js文件中定义

2017-10-21 09:54:52 3324

原创【微信小程序】框架wxml（四）wxml模板

1.首先在wxml中定义template的样式 {{index}}: {{msg}} Time: {{time}} 2.在js中写入几组数据// pages/wxml2/wxml2.jsPage({ data: { item1: { index: 0, msg: 'this is the first template

2017-10-19 22:23:39 1274

原创【微信小程序】框架wxml（三）wxml条件渲染

记录一下wxml的条件渲染，1.使用wx:if①wxml的代码True 5}}"> length>5 2}}"> length>2 其他 ②在js的data为condition赋值为true，length赋值为6③效果图↓2.block wx:if，用block对一组view进行组装，可以控制一组view的显示与隐藏 view1 v

2017-10-19 21:38:02 1221

原创【微信小程序】框架wxml（二）wxml列表渲染

列表渲染在之前的demo中已经应用过，在这里系统的记录一下。1.wx:for的使用（1）首先在js声明两个数组lipsticks和lipsticks2Page({ data: { lipsticks:["YSL13","Dior999","Armani405"], lipsticks2:[ { name:"YSL13", pr

2017-10-19 20:02:39 2452

原创【微信小程序】框架wxml（一）wxml数据绑定

今天系统的记录一下wxml的数据绑定功能。首先给出wxss样式文件/* pages/wxml/wxml.wxss */.wxml-container{ padding: 0 20rpx ; align-items: center;}.topic-group{ background: pink; width: 100%; text-align: center;

2017-10-17 16:50:03 6801

原创【微信小程序】框架wxss（二）电话列表展示demo

今天好冷，躲在客厅瑟瑟发抖的学习小程序。先看一下效果图↓准备工作：在pages目录下新建一个wxss2文件夹，并在app.json中进行注册，会自动生成wxss.js等四个文件。1.我们先看看wxml样式的编写 name phone time （1）

2017-10-14 10:10:01 1138

原创【微信小程序】框架wxss（一）wxss概述

今天简单记录一下wxss的使用方法。1.WXSS(WeiXin Style Sheet) 用于描述页面的样式。wxss基本沿用了css的特性，新增了两点内容：（1）尺寸单位：rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。设备rpx换算px (屏幕宽度/750)px换算rpx (750/屏幕宽度)

2017-10-13 22:13:59 7951

原创【微信小程序】媒体组件（三）video

最后一个微信小程序的媒体组件1.先看下video的属性，与audio基本类似属性名类型默认值说明最低版本srcString 要播放视频的资源地址 durationNumber 指定视频时长1.1.0controlsBooleantrue是否显示默认播放控件（播放/暂停按钮

2017-10-12 16:49:34 6917 2

原创【微信小程序】媒体组件（二）image

记录一下image的使用，比较简单。1.先看一下属性。属性名类型默认值说明最低版本srcString 图片资源地址 modeString'scaleToFill'图片裁剪、缩放的模式 lazy-loadBooleanfalse图片懒加载。只针对page与scroll-vi

2017-10-12 15:54:31 1587

原创【微信小程序】媒体组件（一）audio

周四没有课，开心，写个博客庆祝一下。今天记录一下audio的基本使用，首先看下效果图。（声音请脑补一下~）1.介绍一下audio属性（来自微信官方文档）属性名类型默认值说明idStringaudio 组件的唯一标识符srcString要播放音频的资源地址loopBoole

2017-10-12 09:29:33 3071 1

原创【微信小程序】组件（六）form

玩耍了好几天，终于今天又开始学习了。今天学习了form表单，先上一个效果图。1.switch组件，很简单的一个小开关，具有如下属性：switch的type值默认为“switch”，如果更改type值为“checkbox”效果如下 ↓2.slider组件，滑动选择器，属性如下 ↓3.input组件，输入框，属性有很多 ↓

2017-10-08 11:54:23 3182

原创【微信小程序】组件（五）progress

记录一个关于progress组件的demo，先看下效果↓1.附上wxml代码 ↓ usual_progress代码如下↓ .usual_progress{ width: 100%; height: 20px;}2.分别介绍一下四个progress①第一个progress百分比为20， show-info属性为true,在进度条右侧显示进度

2017-10-04 14:30:25 6178

原创【微信小程序】组件（四）text

今天记录一下text组件的使用，text组件本身很简单。你好或者{{text}}使用即可。记录一个text相关demo，还是先上效果图↓1.wxml布局文件，由一个text区域和两个button组成，text变量在js中进行定义 {{text}} add line remove line2.js中代码，var为变量，initData为初始数据（前两行字符串，\

2017-10-04 13:45:54 1697

原创【微信小程序】组件（三）icon

下面一下记录小程序的icon组件使用，依旧先展示一下效果图，有三组图标。1.在js文件的data对icon属性进行定义:iconSize定义icon的大小，单位为px；iconColor定义icon的颜色，可用指定颜色、rgb格式颜色和16进制颜色；iconType定义icon的样式，为目前官网支持的样式。Page({ data: { iconSize: [

2017-10-04 13:12:25 1540

原创【微信小程序】组件（二）swiper

记录一下swiper的使用方法。先看一下效果图 ↓1.附上js文件的代码，与微信官网上的开发指南基本相同。其中点击“indicator-dots”会触发changeIndicators方法，设置图片下方小点点的可见性。点击“autoplay”按钮则会触发changeAutoplay方法，决定图片是否自动播放。在data中我们对这两个属性，及切换时间（interval）、持续时间(dur

2017-10-04 12:46:11 1070

原创【微信小程序】组件（一）srcoll-view

今天记录一下scroll-view学习中遇到的问题及解决办法，希望能对其他同学有所帮助。首先展示一下想达到的效果。↓ vertical scroll实现上下滚动，horizontal实现左右滚动。先附上wxml的代码。viewclass="container">view>text>vertical scrolltext>scroll-view

2017-10-03 21:44:34 1616

原创【微信小程序】生命周期

今天记录一下微信小程序的app生命周期及各页面的生命周期。（一）小程序的生命周期在app.json中进行监听，三个方法①onLauch方法只在小程序启动时触发一次。②onShow方法，在小程序启动时，及由后台切换至前台显示时触发。③onHide方法，在小程序由前台显示切换至后台时触发。可以通过 ↓ 这张图片，感受一下各生命周期。比较有趣的地方是，小程序启动时会触

2017-10-02 12:33:06 886

不想做菜鸟的小螃蟹