表单组件及网络API+常用API接口+utils 中自定义模块module.exports

表单(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');

Dwell_hls

发布了182 篇原创文章 · 获赞 33 · 访问量 1万+

私信关注