微信小程序-3 - 技术栈

一、交互

API - - - 界面 - - - 交互

功能：提示是否删除

1.wx.showToast 显示消息提示框

html 复制代码

<button type="primary" bindtap='clickBtn'>按钮</button>
<input style="margin: 20rpx;height: 60rpx;background: gainsboro;" type="text"/>

js 复制代码

  clickBtn(){
    wx.showToast({
      title:'加载中...',
      icon:'loading',
      // image的优先级大于icon
      duration:5000,
      // mask 遮罩层，为true时不可操作界面，页面也不可滚动
      mask:true,
      // 弹窗出现时就会调用
      success:res=>{
      	console.log(res);
      }
    })
  },

2.wx.showModal 显示模态对话框

js 复制代码

  clickBtn(){
    wx.showModal({
      title:'是否删除',
      content:'删除之后不可恢复，请谨慎删除',
      // showCancel:false,
      // 箭头函数，不会出现指向问题
      success:res=>{
        console.log(res);
        // comfirm值为确认返回true和取消false
      }
    })
  },

content和editable不要一起使用

js 复制代码

  clickBtn(){
    wx.showModal({
      title:'请输入验证码',
      editable:true,
      placeholderText:'请输入...',
      success:res=>{
        console.log(res);
        // comfirm值为true，content值为用户输入的内容
      }
    })
  },

3.wx.showLoading 显示 loading 提示框

js 复制代码

  onLoad: function (options) {
    // 一进入页面就会显示
    wx.showLoading({
      title: '加载中...',
      // 加载中不可对页面进行操作
      mask:true,
    })
	// 定时器，1秒后隐藏loading提示框
    setTimeout(()=>{
      wx.hideLoading()
    },1000)
  },

3.wx.showActionSheet 显示操作菜单

js 复制代码

  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里设置

html 复制代码

"navigationBarTitleText":"标题"

js 复制代码

  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文件里不能有注释

json 复制代码

  // entryPagePath指定首页，默认index
  "entryPagePath": "pages/demo/demo",
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/demo/demo"
  ],

单独页面不显示导航栏

json 复制代码

  // 导航栏样式
  // custom 自定义导航栏，只保留右上角胶囊按钮
  "navigationStyle": "custom"

下拉刷新背景颜色

json 复制代码

  // 是否开启当前页面下拉刷新
  "enablePullDownRefresh": true,
  // 刷新窗口的背景色
  "backgroundColor": "#8bc34a",
  // 下拉 loading 的样式（三个点），仅支持 dark / light
  "backgroundTextStyle":"light"

四、tabBar

图标 iconfont 官方图标库收藏量 ctrl+F搜索 home

json 复制代码

  "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

html 复制代码

<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>

或盒子，使用点击事件

html 复制代码

<view bindtap="goTest" style="width: 100rpx;height: 100rpx;background: greenyellow;"></view>

js 复制代码

  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.获取网络请求

html 复制代码

<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>

css 复制代码

.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;}

js 复制代码

  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.下拉刷新数据

json 复制代码

{
  "usingComponents": {},
  "enablePullDownRefresh": true,
  "backgroundColor": "#000",
  "backgroundTextStyle":"light"
}

js 复制代码

  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 触底距离

json 复制代码

{
  "usingComponents": {},
  "enablePullDownRefresh": true,
  "backgroundColor": "#000",
  "backgroundTextStyle":"light",
  "onReachBottomDistance": 200
}

js 复制代码

// 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传参

js 复制代码

  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请求

js 复制代码

  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)}
    })
  },

七、小案例

html 复制代码

<!-- 双向绑定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>

js 复制代码

  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组件

json 复制代码

{
  "usingComponents": {
    "MyHeader":"/component/MyHeader/MyHeader"
  }
}

html 复制代码

<!--component/MyHeader/MyHeader.wxml-->
<view class="header">
  <view class="big">头部大标题</view>
  <view class="small">小标题</view>
</view>

css 复制代码

/* 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;}

修改组件的内容

html 复制代码

<!--component/MyHeader/MyHeader.wxml-->
<view class="header">
  <view class="big">头部大标题</view>
  <view class="small">小标题{{name}}</view>
</view>

js 复制代码

// component/MyHeader/MyHeader.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    name:{
      type:String,
      value:"-----"
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

传参，若没有传参，使用默认值value:"-----"，传参使用传参值

html 复制代码

<MyHeader name='-首页'></MyHeader>