微信小程序-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的优先级大于iconduration: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>
<!-- reLaunch关闭所有页面，打开到应用内的某个页面 -->
<!-- 可携带参数，在左下角页面路径那打开页面参数 id=123 -->
<navigator url="/pages/test/test?id=123" open-type="reLaunch">测试页面</navigator>
<!-- 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面，没有携带参数 -->
<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)}})},

七、小案例

<!-- 双向绑定model, bindconfirm点击完成按钮/回车时触发 -->
<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"}
}

<!--component/MyHeader/MyHeader.wxml-->
<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;}

修改组件的内容

<!--component/MyHeader/MyHeader.wxml-->
<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: {}
})