微信小程序-3
一、交互
API - - - 界面 - - - 交互
功能：提示 是否删除
1.wx.showToast 显示消息提示框
<button type="primary" bindtap='clickBtn'>按钮button>
<input style="margin: 20rpx;height: 60rpx;background: gainsboro;" type="text"/>
clickBtn(){
wx.showToast({
title:'加载中...',
icon:'loading',
// image的优先级大于icon
duration:5000,
// mask 遮罩层，为true时不可操作界面，页面也不可滚动
mask:true,
// 弹窗出现时就会调用
success:res=>{
console.log(res);
}
})
},
2.wx.showModal 显示模态对话框
clickBtn(){
wx.showModal({
title:'是否删除',
content:'删除之后不可恢复，请谨慎删除',
// showCancel:false,
// 箭头函数，不会出现指向问题
success:res=>{
console.log(res);
// comfirm值为确认返回true和取消false
}
})
},
content和editable不要一起使用
clickBtn(){
wx.showModal({
title:'请输入验证码',
editable:true,
placeholderText:'请输入...',
success:res=>{
console.log(res);
// comfirm值为true，content值为用户输入的内容
}
})
},
3.wx.showLoading 显示 loading 提示框
onLoad: function (options) {
// 一进入页面就会显示
wx.showLoading({
title: '加载中...',
// 加载中不可对页面进行操作
mask:true,
})
// 定时器，1秒后隐藏loading提示框
setTimeout(()=>{
wx.hideLoading()
},1000)
},
3.wx.showActionSheet 显示操作菜单
clickBtn(){
wx.showActionSheet({
itemList: this.data.listArr,
success: (res)=> {
// res.tapIndex得到索引，this.data.listArr是列表
console.log(this.data.listArr[res.tapIndex])
},
fail: (res)=> {
console.log(res.errMsg)
}
})
},
二、导航栏api接口
平常在json里设置
"navigationBarTitleText":"标题"
onLoad: function (options) {
// 动态设置当前页面的标题
wx.setNavigationBarTitle({
title: '标题名',
})
// 设置页面导航条颜色
wx.setNavigationBarColor({
backgroundColor: '#ff0000',
frontColor: '#000000',
})
// 在当前页面显示导航条加载动画
wx.showNavigationBarLoading()
setTimeout(() => {
// 在当前页面隐藏导航条加载动画
wx.hideNavigationBarLoading()
}, 2000);
// 隐藏返回首页按钮
wx.hideHomeButton()
},
三、json配置
指南 - - - 配置小程序
框架 - - - 小程序配置 - - - 全局配置app.json - - - 页面配置.json
注意：json文件里不能有注释
// entryPagePath指定首页，默认index
"entryPagePath": "pages/demo/demo",
"pages":[
"pages/index/index",
"pages/logs/logs",
"pages/demo/demo"
],
单独页面不显示导航栏
// 导航栏样式
// custom 自定义导航栏，只保留右上角胶囊按钮
"navigationStyle": "custom"
下拉刷新 背景颜色
// 是否开启当前页面下拉刷新
"enablePullDownRefresh": true,
// 刷新窗口的背景色
"backgroundColor": "#8bc34a",
// 下拉 loading 的样式（三个点），仅支持 dark / light
"backgroundTextStyle":"light"
四、tabBar
图标 iconfont 官方图标库 收藏量 ctrl+F搜索 home
"tabBar": {
// 字体颜色
"color": "#cdcdcd",
// 选中时的颜色
"selectedColor": "#00ffff",
"list": [{
"text": "首页",
"pagePath": "pages/index/index",
"iconPath": "/static/icon/home.png",
"selectedIconPath": "/static/icon/home-fill.png"
},{
"text": "我的",
"pagePath": "pages/logs/logs",
"iconPath": "/static/icon/user.png",
"selectedIconPath": "/static/icon/user-lan.png"
}]
},
五、api中navigate路由接口与组件的关系
组件 - - - 导航 - - - navigator
<navigator url="/pages/test/test">测试页面navigator>
<navigator url="/pages/test/test?id=123" open-type="reLaunch">测试页面navigator>
<navigator url="/pages/test/test?id=123" open-type="switchTab">测试页面navigator>
或盒子，使用点击事件
<view bindtap="goTest" style="width: 100rpx;height: 100rpx;background: greenyellow;">view>
goTest(){
// wx.reLaunch 关闭所有页面，打开到应用内的某个页面
wx.reLaunch({
url: '/pages/test/test',
})
},
wx.switchTab - - - 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.redirectTo - - - 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
wx.navigateTo - - - 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层
wx.navigateBack - - - 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层
六、request请求
1.获取网络请求
<view class="out">
<view class="box" wx:for="{{listArr}}" wx:key="id">
<view class="pic">
<image src="{{item.url}}" mode="aspectFit"/>
view>
<view class="name">姓名：{{item.id}}view>
view>
view>
.out{padding: 30rpx;}
.out .box{width: 100%;height: 460rpx;border: 1px solid #eee;margin-bottom: 30rpx;}
.out .box .pic{width: 100%;height: 400rpx;}
.out .box .pic image{width: 100%;height: 100%;}
.out .box .name{text-align: center;line-height: 60rpx;}
data: {
listArr:[]
},
onLoad(options) {
this.getData();
},
// 随机获取猫咪的网络请求
getData(){
// console.log(123)
wx.request({
// 可以改limit后的数字
url: 'https://api.thecatapi.com/v1/images/search?limit=2',
// 需要再详情-本地设置-开启不校验合法域名
success:res=>{
console.log(res)
this.setData({
listArr:res.data
})
}
})
},
2.下拉刷新数据
{
"usingComponents": {},
"enablePullDownRefresh": true,
"backgroundColor": "#000",
"backgroundTextStyle":"light"
}
data: {
listArr:[]
},
onLoad(options) {
wx.showLoading({
title: '加载中...',
mask:true
})
this.getData();
},
getData(){
// console.log(123)
wx.request({
url: 'https://api.thecatapi.com/v1/images/search?limit=2',
// 需要再详情-本地设置-开启不校验合法域名
success:res=>{
console.log(res)
this.setData({
listArr:res.data
})
// 在页面刷新完后 停止页面下拉刷新
// API --- 界面 --- 下拉刷新
wx.stopPullDownRefresh()
// wx.hideLoading()
},
// 接口调用结束的回调函数（调用成功、失败都会执行）
complete:err=>{
wx.hideLoading()
}
})
},
onPullDownRefresh() {
// console.log(123)
// 先清空数组
this.setData({
listArr:[]
})
// 下拉刷新，重新获取数据
this.getData()
},
3.触底加载更多数据
onReachBottomDistance 触底距离
{
"usingComponents": {},
"enablePullDownRefresh": true,
"backgroundColor": "#000",
"backgroundTextStyle":"light",
"onReachBottomDistance": 200
}
// pages/test/test.js
Page({
/**
* 页面的初始数据
*/
data: {
listArr:[]
},
onLoad(options) {
wx.showLoading({
title: '加载中...',
mask:true
})
this.getData();
},
getData(){
// console.log(123)
wx.request({
url: 'https://api.thecatapi.com/v1/images/search?limit=2',
// 需要再详情-本地设置-开启不校验合法域名
success:res=>{
console.log(res)
let oldData = this.data.listArr
// let newData = res.data
// 让老数据追加新数据，新数据在res.data中
let newData = oldData.concat(res.data)
this.setData({
listArr:newData
})
// 在页面刷新完后 停止页面下拉刷新
// API --- 界面 --- 下拉刷新
wx.stopPullDownRefresh()
// wx.hideLoading()
},
// 接口调用结束的回调函数（调用成功、失败都会执行）
complete:err=>{
wx.hideLoading()
wx.hideNavigationBarLoading()
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
// console.log(123)
// 先清空数组
this.setData({
listArr:[]
})
// 下拉刷新，重新获取数据
this.getData()
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
wx.showNavigationBarLoading()
// need重新编译
console.log('触底了');
this.getData();
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
4.其他参数
get请求，data传参
onLoad: function (options) {
this.getData();
},
getData(){
wx.request({
url: 'https://api.thecatapi.com/v1/images/search',
method:'get',
data:{
limit:10
},
success:res=>{console.log(res)}
})
},
post请求
getData(){
wx.request({
url: 'http://jsonplaceholder.typicode.com/posts',
method:'post',
// header里的参数在调试器Network下headers的RequestHeaders里可以看到
header:{'content-type':'application/json','token':123123},
data:{
limit:10,
name:'wangwu'
},
success:res=>{console.log(res)}
})
},
七、小案例
<input type="text" model:value="{{iptVal}}" bindconfirm="onSubmit" placeholder="请输入标题" style="background: #eee;margin: 30rpx;"/>
<view class="box" style="margin: 30rpx;">
<view class="row" wx:for="{{listArr}}" wx:key="_id" style="border-bottom: 1px solid #eee;padding: 10rpx;">
<view class="title">标题：{{item.title}}view>
<view class="time">时间：{{item.posttime}}view>
view>
view>
data: {
iptVal:'',
listArr:[]
},
onLoad: function (options) {
this.getData();
},
getData(){
wx.request({
// url: 'https://console-docs.apipost.cn/preview/8b23f100b39a63c5/617499421662264b',
url:'https://tea.qingnian8.com/demoArt/get',
method:'POST',
header:{'Content-Type':'application/json'},
data:{
num:3,
page:1
},
success:res=>{
console.log(res);
this.setData({
listArr:res.data.data
})
}
})
},
onSubmit(){
// console.log(this.data.iptVal);
wx.request({
url: 'https://tea.qingnian8.com/demoArt/add',
method:'POST',
header:{'Content-Type':'application/json'},
data:{
title:this.data.iptVal
},
success:res=>{
console.log(res);
if(res.data.errCode!=0){
// 如果没有成功，返回 不执行下面代码
return;
}
this.setData({
iptVal:''
})
this.getData();
wx.showToast({
title: res.data.errMsg,
})
}
})
},
八、自定义组件Component
框架 - - - 框架接口 - - - 自定义组价
新建文件夹（和pages同级），新建文件夹，右键新建Component
在json中引入component组件
{
"usingComponents": {
"MyHeader":"/component/MyHeader/MyHeader"
}
}
<view class="header">
<view class="big">头部大标题view>
<view class="small">小标题view>
view>
/* component/MyHeader/MyHeader.wxss */
.header{text-align: center;padding: 30rpx;background: #eee;}
.header .big{font-size: 52rpx;}
.header .small{font-size: 32rpx;margin-top: 20rpx;color: #666;}
修改组件的内容
<view class="header">
<view class="big">头部大标题view>
<view class="small">小标题{{name}}view>
view>
// component/MyHeader/MyHeader.js
Component({
/**
* 组件的属性列表
*/
properties: {
name:{
type:String,
value:"-----"
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
}
})
传参，若没有传参，使用默认值value:“-----”，传参使用传参值
<MyHeader name='-首页'>MyHeader>