2.微信小程序的部分配置和API

微信小程序文档:http://mp.weixin.qq.com
可以查看全局配置,页面配置,组件,API等内容

1.tabBar底部栏

list 接受一个数组,只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序,每个项都是一个对象。在app.json文件中配置信息。

"tabBar": {
    "color":"#aaa",
    "selectedColor": "#f00",
    "list":[{
      "pagePath":"pages/index/index",
      "text":"首页",
      "iconPath":"images/index0.png",
      "selectedIconPath": "images/index1.png"
    },{
      "pagePath":"pages/shop/shop",
      "text":"购物车",
      "iconPath":"images/shop0.png",
      "selectedIconPath": "images/shop1.png"
    },{
      "pagePath":"pages/my/my",
      "text":"我的",
      "iconPath":"images/my0.png",
      "selectedIconPath": "images/shop1.png"
    }]
  },

2.修改页面标题

① 修改全部页面的标题:设置app.json文件内的window的navigationBarTitleText。

每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。文件内容为一个 JSON 对象。
② 修改子页面的标题:在shop.json文件中设置navigationBarTitleText

{
  "navigationBarTitleText":"购物车",
  "usingComponents": {}
}

3.路由跳转

① API

wx.navigateTo(Object object):
保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

//shop.wxml
<button bindtap="turn">turn</button>
//shop.js  turn()与data同级
 turn(){
    wx.navigateTo({
    //url可带参数
      url:"/pages/home/home?id=10"
    });
  },
//home.js页面onLoad页面加载阶段接收参数
onLoad: function (options) {
    console.log(options.id);
  },

wx.redirectTo(Object object):
关闭当前页面(没有回退按钮),跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

 turn(){
    wx.redirectTo({
      url:"/pages/home/home"
    });
  },

wx.switchTab(Object object)

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。

  turn(){
   wx.switchTab({
     url:"/pages/my/my"
   })
  },

wx.reLaunch(Object object)
关闭所有页面,打开到应用内的某个页面(不限制页面类型)。

wx.navigateBack(Object object)
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈,决定需要返回几层。
通过wx.navigateTo跳转过来,才能通过wx.navigateBack回退

//shop.js
 turn(){
    wx.navigateTo({
      url: '/pages/home/home?id=10',
    })
  },
// home.vxml
<button bindtap="back">back</button>
// home.js
back(){
	wx.navigateBack({
  // 回退一步
  	delta: 1,
})
  },

② 组件

navigator

navigate对应 wx.navigateTo 的功能。

<navigator url="/pages/home/home" open-type="navigate">跳转到home页面</navigator>

redirect 对应 wx.redirectTo 的功能。

<navigator url="/pages/home/home" open-type="redirect ">跳转到home页面</navigator>

switchTab 对应 wx.switchTab 的功能。

<navigator url="/pages/my/my" open-type="switchTab">跳转到my页面</navigator>

reLaunch 对应 wx.reLaunch 的功能。
navigateBack 对应 wx.navigateBack 的功能。

4.界面API

显示消息提示框:wx.showToast(Object object)
image可以自定义图标的本地路径优先级高于 icon。

<button bindtap="show">show</button>
 show(){
    wx.showToast({
      title: '操作成功',
      icon:"success",
      image:'/images/shop0.png',
      // 遮罩防止操作其他功能
      mask:true,
      duration:2000
    })
  },

显示模态对话框:wx.showModal(Object object)
success回调函数可以判断用户点击的是取消还是确定。

 show(){
    wx.showModal({
      title: '是否确定删除?',
      content:"一旦删除,不可撤销",
      success:function(res){     
        console.log(res);
      }
    })
  },

显示 loading 提示框:wx.showLoading(Object object)
注意
需主动调用 wx.hideLoading 才能关闭提示框;
wx.showLoading 和 wx.showToast 同时只能显示一个。

  show(){
    wx.showLoading({
      title: '加载中',
    });
    setTimeout(function () {
      wx.hideLoading()
    }, 2000)
      
  },

显示操作菜单:wx.showActionSheet(Object object)
itemList:按钮的文字数组,数组长度最大为 6。
tapIndex:用户点击的按钮序号,从上到下的顺序,从0开始。

  show(){
    wx.showActionSheet({
      itemList: ['zhangsan','lisi','tom'],
      success:function(res){
        console.log(res.tapIndex);
      }
    }) 
  },

5.网络API

5.1发起请求

发起 HTTPS 网络请求: wx.request(Object object)。
参数url:开发者服务器接口地址,地址要经过备案,然后在管理后台进行域名配置。通过https://mp.weixin.qq.com进入微信小程序首页 -> 开发 ->开发设置。
在这里插入图片描述

<button bindtap="getData">getData</button>
  getData(){
    wx.request({
      url: 'https://xxx',
      success:function(data){
        console.log(data);
      }
    })
  },

如果要测试http请求,打开微信开发者工具右上角的详情,勾选不校验合法域名。

在这里插入图片描述
参数method默认为get;header 中不能设置 Referer,content-type 默认为 application/json。

  getData(){
    wx.request({
      url: 'http://xxx',
      method:"post",
      data:{
        name:"terry",
        num:123
      },
      header:{
        "content-type":"application/x-www-form-urlencoded"
      },
      success:function(data){
        console.log(data);
      }
    })
  },

5.2 下载

wx.downloadFile(Object object)
将资源缓存到本地,并未下载

  downLoad(){
    wx.downloadFile({
      url:'https://xxx/xx.png',
      //将资源缓存到本地,并未下载,缓存目录在res参数中
      success:function(res){
        console.log(res,"success");
        //调用saveImageToPhotosAlbum()下载资源,手机端打开图库,电脑端打开文件夹
        wx.saveImageToPhotosAlbum({
          filePath: 'res.tempFilePath',
          success:function(){
            console.log('下载成功')
          }
        })
      }

    })
  },

5.3 上传

wx.uploadFile(Object object)

将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求,其中 content-type 为 multipart/form-data。

upLoad(){
//chooseImage()打开图库/文件夹
   wx.chooseImage({
   //将图片信息封装在success方法中
     success:function(res){
       const tempFilePaths=res.tempFilePaths;
       wx.uploadFile({
         filePath: tempFilePaths[0],
         name: 'png',
         url: 'https://xxx',
         header:{
           'content-type':'multipart/form-data'
         },
         //上传成功
         success:function(r){
           console.log(r,"success----");
         },
         //上传失败
         false:function(err){
           console.log(err);
         }
       });
     }
   });
  },

6.位置

wx.getLocation(Object object):
获取当前的地理位置、速度。当用户离开小程序后,此接口无法调用。开启高精度定位,接口耗时会增加,可指定 highAccuracyExpireTime 作为超时时间。参数type默认值为wgs84,在手机上测试结果更精确。

wx.openLocation(Object object):
使用微信内置地图查看位置。

<button bindtap="map">map</button>
  map(){
  //获取地理位置
    wx.getLocation({
     success:function(res){
       var latitude=res.latitude;
       var longitude=res.longitude; 
       //打开地理位置
       wx.openLocation({
         latitude: latitude,
         longitude: longitude,
       })
     }
    })
  },

通过预览生成二维码,在手机端测试

在这里插入图片描述

©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页