表单(Form):
表单组件主要应用是获取用户输入内容。表单组件分为11个组件:
button - 按钮组件
switch - 开关组件
slider - 滑动选择器
radio - 单项选择器
chechbox - 多项选择器
input - 输入框
textarea - 多行输入框
picker - 从底部弹起的滚动选择器
picker-view - 嵌入页面的滚动选择器
label - 改进用户可用性选择组件
form - 表单组件,将用户输入的内容提交
button
详细属性请参见官方文档
size 的合法值 default mini。
default为块级按钮、mini为小按钮
type 的合法值 primary(绿色)、default(白色)、warn(红色)
例子 wxml
<!--按钮默认样式,点击事件-->
<button type="defaule" bindtap="clickButton">Defalut</button>
<!--原始颜色,不可点击状态, 正在加载状态-->
<button type="primary" disabled="true" loading="true">Primary</button>
<button type="warn">warn</button>
我们可以按照自己的需求设置相关按钮,比如需要一个小尺寸红色手松开保留1秒的删除按钮,可以这样写。
<button class="mini-btn" type="warn" size="mini" hover-stay-time="1000">删除</button>
input
详细属性请参见官方文档
例子:
wxml
<view class="inputView" style="margin-top: 40% ">
<input name="" class="input" type="number" placeholder="请输入手机号" placeholder-style="color: red" bindinput="listenerPhoneInput" />
</view>
<view class="inputView">
<input name="password" class="input" password="true" placeholder="请输入密码" placeholder-style="color: red" bindinput="listenerPasswordInput"/>
</view>
<button style="margin-left: 15rpx; margin-right: 15rpx; margin-top: 50rpx; border-radius: 40rpx" type="primary" bindtap="listenerLogin">登录</button>
js
data:{
phone: '',
password: '',
},
/** * 监听手机号输入 */
listenerPhoneInput: function(e) {
this.data.phone = e.detail.value;
},
/** * 监听密码输入 */
listenerPasswordInput: function(e) {
this.data.password = e.detail.value;
},
/** * 监听登录按钮 */
listenerLogin: function() {
//打印收入账号和密码
console.log('手机号为: ', this.data.phone);
console.log('密码为: ', this.data.password);
},
wxss
.input{ padding-left: 10px; height: 44px; }
.inputView{ border: 2px solid red; border-radius: 40px; margin-left: 15px; margin-right: 15px; margin-top: 15px; }
lable
用来改进表单组件的可用性,使用for属性找到对应的id,或者将控件放在该标签下,当点击时,就会触发对应的控件。
for优先级高于内部控件,内部有多个控件的时候默认触发第一个控件。
目前可以绑定的控件有:<button/>, <checkbox/>, <radio/>, <switch/>。
radio单选框
radio由radio-group和radio组成
radio单选项目
示例:
<radio-group name="radio1" class="radio-group" bindchange="radioChange">
<view style="margin-left:10rpx"wx:for="{{items}}">
<label class="radio">
<radio value="{{item.name}}" checked="{{item.checked}}" />{{item.value}} </label>
</view>
</radio-group>
Page({
data: {
items: [ {name: 'USA', value: '美国'},
{name: 'CHN', value: '中国', checked: 'true'},
{name: 'BRA', value: '巴西'},
{name: 'JPN', value: '日本'},
{name: 'ENG', value: '英国'},
{name: 'TUR', value: '法国'}, ]
},
radioChange: function(e) {
console.log('radio发生change事件,携带value值为:', e.detail.value) }
})
checkbox复选框
- checkbox-group
- 多项选择器,内部由多个checkbox组成。checkbox组件为一个多选框被放到checkbox-group组中,并在checkbox-group(只能包含checkbox)中设置监听事件。
- checkbox-group监听方法:bindchange
- checkbox多选属性:disabled、checked
<checkbox-group name="checkbox1" bindchange="listenCheckboxChange">
<!--这里用label显示内容,for循环写法 wx:for-items 默认item为每一项-->
<label style="display: flex;" wx:for-items="{{items}}">
<!--value值和默认选中状态都是通过数据绑定在js中的-->
<checkbox value="{{item.name}}" checked="{{item.checked}}" />{{item.value}} </label>
</checkbox-group>
/** * 监听checkbox事件 */
listenCheckboxChange: function (e) {
console.log('当checkbox-group中的checkbox选中或者取消是我被调用');
//打印对象包含的详细信息
console.log(e);
},
picker
- 从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器。
- 普通选择器:mode = selector
普通选择器 mode = selector
属性:range,value,bindchange
时间选择器 mode=time
属性:value,start,end,bindchange
日期选择器 mode=date
属性: value,start,end,bindchange,field
<view>普通选择器</view>
<!--mode默认selector range数据源value选择的index bindchange事件监听-->
<picker name="picker1" mode="selector" range="{{array}}" value="{{index}}" bindchange="listenerPickerSelected">
<text>{{array[index]}}</text> </picker>
<view>时间选择器</view>
<picker name="picker2" mode="time" value="{{time}}" start="06:00" end="24:00" bindchange="listenerTimePickerSelected">
<text>{{time}}</text> </picker>
<view>日期选择器</view>
<picker name="picker3" mode="date" value="{{date}}" start="2016-09-26" end="2017-10-10" bindchange="listenerDatePickerSelected">
<text>{{date}}</text> </picker>
data:{
array: ['Android', 'IOS', 'ReactNativ', 'WeChat', 'Web'],
index: 0,
time: '08:30',
date: '2016-09-26'
},
/** * 监听普通picker选择器 */
listenerPickerSelected: function(e) {
//改变index值,通过setData()方法重绘界面
this.setData({
index: e.detail.value
});
},
/** * 监听时间picker选择器 */
listenerTimePickerSelected: function(e) {
//调用setData()重新绘制
this.setData({
time: e.detail.value,
});
},
/** * 监听日期picker选择器 */
listenerDatePickerSelected:function(e) {
this.setDate({
date: e.detail.value
})
},
pickerview
嵌入页面的滚动选择器
switch
- 开关选择器。
- switch开关组件使用主要属性:checked、disabled、type(switch或checkbox)、bindchange
<!--switch类型开关-->
<view>switch类型开关</view>
<switch name="switch1" type="switch" checked="true" bindchange="listenerSwitch"/>
<!--checkbox类型开关-->
<view>checkbox类型开关</view>
<switch name="switch2" type="checkbox" bindchange="listenerCheckboxSwitch" />
/** * switch开关监听 */
listenerSwitch: function(e) {
console.log('switch类型开关当前状态-----', e.detail.value);
},
/** * checkbox类型开关监听 */
listenerCheckboxSwitch: function(e) {
console.log('checkbox类型开关当前状态-----', e.detail.value)
},
slider组件
多行输入框。该组件是原生组件,使用时请注意相关限制。
<slider max="100" step="10" show-value="true" bindchange="listenerSlider" />
/** * 监听slider */
listenerSlider:function(e) { //获取滑动后的值
console.log(e.detail.value);
},
textarea
多行输入框。该组件是原生组件,使用时请注意相关限制。
form
- 表单,将
等组件内的用户输入的数据提交给服务端。 - 当点击 表单中 formType 为 submit 的 组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key。
<form bindsubmit="listenFormSubmit" >
<!--<switch/> <input/><checkbox/><slider/><radio/><picker/>等各种表单组件,各个组件必须加name属性-->
<button formType="submit" type="primary">提交</button>
<button formType="reset" type="warn">重置</button>
</form>
listenFormSubmit:function(e){
console.log(e.detail.value);
},
网络API
网络API文件的上传、下载API ,wx.request请求和WebSocket套接字API。
wx.request
wx.request接口实现和服务端的交互(GET,POST,PUT,DELETE等),如
wx.request(
url:’https//url’,
data:{},
method:’get’, //请求方法
header:{}, //设置请求的header
success:function(res){
}
)
wx.request接口参数说明
页面跳转一般过程
Content-Type请求头
Content-Type请求头的作用,用于标记请求体数据的格式,如:
- Content-Type:application/x-www-form-urlencoded
请求体:‘pwd=123&user=root’ - Content-Type:application/json
请求体:{“pwd”: 123, “user”: “root”}
get请求
<block wx:for-items="{{result}}">
<view style="width:100%; height: 50rpx"></view>
<!--index默认为下标,item为每项-->
<text>第{{index}}条数据 {{item.desc}}</text>
<text>地址{{item.url}}</text>
</block>
Page({
data:{ // text:"这是一个页面"
result: []
},
onLoad:function() {
var that = this;
wx.request({
url: 'http://gank.io/api/data/Android/30/1',
method: 'GET',
success:function(res) {
that.setData({
result: res.data.results
})
}
})
},
})
post请求(参数为json格式)
wx.request({
url: 'http://www.phonegap100.com/appapi.php?a=getPortalCate',
data: {
id: '11' ,
name: '222'
},
header: {
'Content-Type': 'application/json'
},
success: function(res) {
console.log(res.data.result)
_that.setData({
list:res.data.result,
text:'12345'
});
}
})
post请求(参数为键值对格式)
wx.request({
url: 'http://url',
method: 'POST',
data:'pageSize=1&pageNum=10', //参数为键值对字符串
header: { //设置参数内容类型为x-www-form-urlencoded
'content-type':'application/x-www-form-urlencoded',
'Accept': 'application/json'},
success: function (res) {console.log(res.data)
that.setData({ items: res.data })
}
})
媒体组件
audio
音频组件
相关api
- wx.playVoice(Object object)
- wx.stopVoice(Object object)
- wx.pauseVoice(Object object)
video
视频组件
相关API
- wx.createVideoContext
- VideoContext.play()
- VideoContext.pause()
- VideoContext.stop()
- VideoContext.seek(number position)跳转到指定位置
- VideoContext.sendDanmu(Object data)发送弹幕
- VideoContext.playbackRate(number rate)设置倍速播放
- VideoContext.requestFullScreen(Object object)进入全屏
- VideoContext.exitFullScreen()退出全屏
camera
系统相机
- 相关api:wx.createCameraContext
微信小程序常用API接口
微信小程序API介绍
- API即“应用程序编程接口”,是一些预先定义的函数,目的是作为“介面”沟通两个不同的东西,提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。
- 为了让开发者可以很方便的调起微信提供的能力,例如获取用户信息、微信支付等等,小程序提供了很多 API 给开发者去使用。
API的分类
每种API都有其代表的意思和归类,如API:wx.request
代表“发起网络请求”的意思,属于网络类API;wx.chooseImage
代表“从相册选择图片,或者拍照”,属于媒体类API;wx.getLocation
代表“获取当前位置”等等。比如你想拍照,就需要有wx.chooseImage
这样的API信息。
路由API
路由API
- wx.navigateTo 新窗口打开页面,可返回原页面
- wx.redirectTo 原窗口打开页面,关闭原页面
- wx.switchTab 切换到 tabbar 页面
- wx.navigateBack 退回上一个页面
wx.navigateTo(Object object)
- 保留当前页面,跳转到应用内的某个页面,但是不能跳到 tabbar 页面。通过success/fail/complete来实现不同状态下的提醒,形成更好的体验效果。使用 wx.navigateBack 可以返回到原页面。参数对象包含属性如下:
例:
onPicDetailTap:function(event){
console.log(event.target.dataset.tagname);
wx.navigateTo({
url: '/pages/index/pic-detail/pic-detail?taga=' + event.target.dataset.taga + "&tagb=" + event.target.dataset.tagb
})
总结:navigateTo往往用于导航到下一级的页面,当通过该API跳转后,下一级页面会自动添加一个返回按钮可返回原页面。
wx.redirectTo(Object object)
- wx.redirectTo接口实现不保留当前页面跳转到新页面,但是不允许跳转到 tabbar 页面。 用法与wx.navigateTo相同。
- 思考:使用wx.navigateTo跳转后如果想返回原页面如果操作?
wx.switchTab(Object object)
- 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
- 在之前我们做过的一个实验,从welcome页跳转到index页,就使用了switchTab。
wx.switchTab({
url:'../index/index',
})
wx.navigateBack(Object object)
- 关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。
- 参数对象属性,success/fail/complete同上。
wx.reLaunch(Object object) - 关闭所有页面,打开到应用内的某个页面
utils 中自定义模块module.exports
自定义模块
微信小程序中 中, utils 下面 个 一个 JavaScript 文件中定义的变量、函数,都只在这个文件内部有效。当需要从此 JS 文件外部引用这些变量、函数时,必须使用 exports 对象进行暴露。使用者要用 require()命令引用这个 JS 文件。
module.exports = {
formatTime: formatTime
}
var Api = require('../../utils/api.js');