微信小程序开发
文章平均质量分 75
Crab0314
这个作者很懒,什么都没留下…
展开
-
【微信小程序】媒体组件(三)video
最后一个微信小程序的媒体组件1.先看下video的属性,与audio基本类似属性名类型默认值说明最低版本srcString 要播放视频的资源地址 durationNumber 指定视频时长1.1.0controlsBooleantrue是否显示默认播放控件(播放/暂停按钮原创 2017-10-12 16:49:34 · 6920 阅读 · 2 评论 -
【微信小程序】框架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 · 7953 阅读 · 0 评论 -
【微信小程序】框架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 · 6803 阅读 · 0 评论 -
【微信小程序】框架wxml(五)wxml事件
1.事件定义· 事件是视图层到逻辑层的通讯方式。· 事件可以将用户的行为反馈到逻辑层进行处理。· 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。· 事件对象可以携带额外信息,如id,dataset,touches。2.举例事件的使用方法。(1)首先在wxml的组件中为button绑定一个事件处理函数跳转到更多示例(2)在js文件中定义原创 2017-10-21 09:54:52 · 3325 阅读 · 0 评论 -
【微信小程序】框架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 · 1298 阅读 · 0 评论 -
【微信小程序】API之网络(一)发起请求
周末很早起来了,折腾一上午终于把小demo搞定了。1.微信小程序的发起网络请求,使用wx.request(OBJECT),OBJECT的参数说明如下参数名类型必填默认值说明urlString是 开发者服务器接口地址dataObject/String否 请求的参数headerObj原创 2017-10-22 14:11:20 · 3378 阅读 · 1 评论 -
【微信小程序】API之网络(二)上传数据
今天记录一下小程序上传数据的方法。1.使用官方提供的接口wx.uploadFile(OBJECT),将本地资源上传到开发者服务器,客户端发起一个HTTPS POST请求。参数说明如下。参数类型必填说明urlString是开发者服务器 urlfilePathString是要上传文件资源的路径nam原创 2017-10-23 09:38:29 · 3673 阅读 · 0 评论 -
【微信小程序】API之网络(三)下载数据
1.微信小程序使用wx.downloadFile(OBJECT)进行文件下载(临时保存),返回文件的临时存储路径。该次存储只有本次小程序启动时有效,如需永久保存需调用wx.saveFile进行保存。先看下wx.downloadFile的参数列表↓参数类型必填必填原创 2017-10-25 22:14:56 · 3123 阅读 · 2 评论 -
【微信小程序】API之网络(四)WebSocket
创建一个WebSocket连接进行使用,微信小程序同时只能有一个WebSocket连接,如果已经存在了一个WebSocket连接,会将该连接关闭,重新开启一个WebSocket连接。1.使用wx.connectSocket(OBJECT)连接,OBJECT的参数说明如下↓ 参数类型必填说明最低版本urlString原创 2017-10-26 16:46:26 · 1844 阅读 · 0 评论 -
【微信小程序】位置之重新授权
目前开发的小程序需要应用到一个获取经纬度的功能,授权的部分有点繁琐,记录一下。1.使用 wx.getLocation()可以获取用户的位置信息,第一次会弹出微信原生的modal提问用户是否授权,之后不会再次弹出。第一次我的解决方案是,每次要定位之前getSetting,查看用户是否已授权。如果未授权执行openSetting引导用户开启授权。代码如下:studentCheckIn: f原创 2018-02-03 19:26:37 · 8669 阅读 · 0 评论 -
【微信小程序】设置合法域名
1.微信小程序开发的时候遇到的问题。xxx.xxx不在以下request合法域名列表中2.两种解决方案,在开发阶段我们可以在 小程序开发环境 右上角,点击“详情”,勾选“不校验安全域名。。。”3.要审核时等,进入微信公众平台(https://mp.weixin.qq.com),用小程序账号密码邮箱登录。在设置-开发设置-服务器域名 中进行设置。...原创 2018-03-23 10:22:02 · 11988 阅读 · 0 评论 -
【微信小程序】TextArea的坑
今天遇到一个textArea的坑,先上个图。1.点击“选择内容反馈”,弹出action-sheet时,有时点击第一个条目“讲太快”,textArea会把焦点劫走。2.解决方法,当actionsheet显示时,设置textarea的disabled属性为true. 即将textarea的disabled属性置为action-sheet的hiddden属性的取反值。...原创 2018-03-21 12:30:32 · 5521 阅读 · 0 评论 -
【微信小程序】wx.request出现undefined
偶现,天啦噜,一直困惑了很久的bug终于找到原因了。示例代码如下wx.request({ sucess:function(res){ if(res.statusCode==200 && res.data.status==200){ //do something }else { console.lo...原创 2018-03-30 21:26:10 · 12275 阅读 · 1 评论 -
【微信小程序】框架wxss(二)电话列表展示demo
今天好冷,躲在客厅瑟瑟发抖的学习小程序。先看一下效果图↓准备工作:在pages目录下新建一个wxss2文件夹,并在app.json中进行注册,会自动生成wxss.js等四个文件。1.我们先看看wxml样式的编写 name phone time (1)原创 2017-10-14 10:10:01 · 1139 阅读 · 0 评论 -
【微信小程序】框架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 · 2454 阅读 · 0 评论 -
【微信小程序】框架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 阅读 · 0 评论 -
【微信小程序】媒体组件(二)image
记录一下image的使用,比较简单。1.先看一下属性。属性名类型默认值说明最低版本srcString 图片资源地址 modeString'scaleToFill'图片裁剪、缩放的模式 lazy-loadBooleanfalse图片懒加载。只针对page与scroll-vi原创 2017-10-12 15:54:31 · 1588 阅读 · 0 评论 -
【微信小程序】媒体组件(一)audio
周四没有课,开心,写个博客庆祝一下。今天记录一下audio的基本使用,首先看下效果图。(声音请脑补一下~)1.介绍一下audio属性(来自微信官方文档)属性名类型默认值说明idStringaudio 组件的唯一标识符srcString要播放音频的资源地址loopBoole原创 2017-10-12 09:29:33 · 3072 阅读 · 1 评论 -
【微信小程序】组件(六)form
玩耍了好几天,终于今天又开始学习了。今天学习了form表单,先上一个效果图。1.switch组件,很简单的一个小开关,具有如下属性:switch的type值默认为“switch”,如果更改type值为“checkbox”效果如下 ↓2.slider组件,滑动选择器,属性如下 ↓3.input组件,输入框,属性有很多 ↓原创 2017-10-08 11:54:23 · 3186 阅读 · 0 评论 -
【微信小程序】组件(五)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 阅读 · 0 评论 -
【微信小程序】组件(四)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 · 1699 阅读 · 0 评论 -
【微信小程序】组件(三)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 阅读 · 0 评论 -
【微信小程序】组件(二)swiper
记录一下swiper的使用方法。先看一下效果图 ↓1.附上js文件的代码,与微信官网上的开发指南基本相同。其中点击“indicator-dots”会触发changeIndicators方法,设置图片下方小点点的可见性。点击“autoplay”按钮则会触发changeAutoplay方法,决定图片是否自动播放。在data中我们对这两个属性,及切换时间(interval)、持续时间(dur原创 2017-10-04 12:46:11 · 1071 阅读 · 0 评论 -
【微信小程序】组件(一)srcoll-view
今天记录一下scroll-view学习中遇到的问题及解决办法,希望能对其他同学有所帮助。首先展示一下想达到的效果。↓ vertical scroll实现上下滚动,horizontal实现左右滚动。先附上wxml的代码。viewclass="container">view>text>vertical scrolltext>scroll-view原创 2017-10-03 21:44:34 · 1616 阅读 · 0 评论 -
【微信小程序】生命周期
今天记录一下微信小程序的app生命周期及各页面的生命周期。(一)小程序的生命周期在app.json中进行监听,三个方法①onLauch方法只在小程序启动时触发一次。②onShow方法,在小程序启动时,及由后台切换至前台显示时触发。③onHide方法,在小程序由前台显示切换至后台时触发。可以通过 ↓ 这张图片,感受一下各生命周期。比较有趣的地方是,小程序启动时会触原创 2017-10-02 12:33:06 · 887 阅读 · 0 评论 -
【微信小程序】开发环境
1.首先,注册申请一个小程序的AppId,申请地址:https://mp.weixin.qq.com/cgi-bin/registermidpage?action=index&lang=zh_CN登录预留邮箱进行激活,并配置小程序的基本信息。2.小程序开发工具下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.h原创 2017-09-29 10:22:48 · 700 阅读 · 0 评论 -
【微信小程序】框架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 · 1222 阅读 · 0 评论 -
【微信小程序】e.target.id和e.currentTarget.dataset.id的区别
1.需求page1展示一个列表,选中列表中的一项,获取该项的一些属性值,set到缓存里。page2 onLoad时从缓存里读取这个缓存,进行使用。2.原始代码①page1的xml文件 列表<view wx:for="{{courseList}}"> <template is="course_temp" data="{{item}}"></template>..原创 2018-04-24 16:10:51 · 39423 阅读 · 12 评论