微信小程序（uni-app）

目录

页面基本配置

tabBar的设置

uni-app引入vantUi

设置动态的顶部文字

封装axios请求

小程序的生命周期函数  uni-app同时兼容

开启关闭下拉刷新

uni-app的分包

uni-app的路由  微信小程序除前缀不同外其余一致

图片的预览

uni-app的自带弹框

---

页面基本配置

backgroundColor	下拉刷新的背景色,下拉刷新的部分才是背景
backgroundTextStyle	小程序的背景文本样式 只有light浅色和dark深色两个值
navigationBarBackgroundColor	导航条的背景色
navigationBarTitleText	导航条的标题文本
navigationBarTextStyle	导航条的文本颜色 只有black黑色和white白色两个值
onReachBottomDistance	触发触底方法的距离 单位是px
enablePullDownRefresh	开启下拉刷新功能 默认值是false

tabBar的设置

在uni-app中的 pages.json中进行配置

 "tabBar": {
    "color": "#000000",  
    "selectedColor": "#d00",  
    "borderStyle": "black",
    "backgroundColor": "#ffffff",  
    "position": "bottom"，     
    "list": [{
        "pagePath": "pages/index/index", 
        "text": "首页",
        "iconPath": "static/icon/shouye.png", 
        "selectedIconPath": "static/icon/pitch-icon/shouye.png"
      }
    // 此处进行配置第二个tabBar页面
   ]
 }

注意事项

1 tabBar最少两个，最多五个

2 下面的字体图标需要两种颜色，未选中与被选中，建议下载好之后，当做图片使用

3 当tabBar设置为顶部的时候，将不在有图标，只会有文字

uni-app引入vantUi

1  内置终端npm安装vant小程序版本

2  新建wxcomponents文件夹，复制@vant里的dist文件夹。并粘贴改名为vant

3 可以删除因为引入vant生成的文件夹

4  正常引入vant所需，但是文件路径为“/wxcomponents/vant/.....”

5  在pages.json中修改配置。让其可以使用vant和npm配置，具体代码如下

设置动态的顶部文字

pages.json中，在新建文件时，会自动增加对应数据，可以在这里设置头部文字，也可以引入vant的样式

 "path": "pages/list/list",
    "style": {
      "navigationBarTitleText": "列表",
      "enablePullDownRefresh": false,
      "usingComponents": {
        "van-icon": "/wxcomponents/vant/icon/index",
      }
    }

封装axios请求

创建utils文件夹，在文件夹中添加http.js文件

function axios({
  url,
  method = "get",
  data = {}
}) {
  uni.showLoading({
    title: '拼命加载中...',
    mask: true
  })
  return new Promise((resolve, reject) => {
    uni.request({
      url: "https://www.uinav.com/api/public/v1" + url,
      method,
      data,
      success(res) {
        resolve(res.data)
        uni.hideLoading()
      },
      fail(err) {
        reject(err)
        uni.hideLoading()
        uni.showToast({
          title: "请求失败"
        })
      }
    })
  })
}
 
 
 
export default axios

在页面使用时

引入

  import axios from '../../utils/http.js'

使用方法

 axios({ url: '/home/swiperdata'}).then(res => {
        console.log(res)
 })

小程序的生命周期函数  uni-app同时兼容

onLoad	页面加载时触发       相当于vue的created生命周期
onReady	页面初次渲染完成时触发     相当于vue的mounted生命周期
onShow	页面显示/切入前台时触发   相当于vue的 activited
onHide	页面隐藏/切入后台时触发   相当于vue的deActivited
onUnload	页面卸载时触发          相当于vue的destroyed生命周期
onPullDownRefresh	下拉刷新的钩子函数
onReachBottom	上拉到底加载的钩子函数

开启关闭下拉刷新

uni.startPullDownRefresh()      // 开启下拉刷新功能

uni.stopPullDownRefresh()      // 停止下拉刷新的方法

而在微信小程序中，则是wx.startPullDownRefresh()  

自定义小程序导航栏
1 在要使用的页面的pages里定义   "navigationStyle":"custom"

2 定义一个子组件，这个子组件就是自定义的头部导航栏,这个组件里没有onLode,可以使用mounted

  uni.getSystemInfo({}) 可以获取手机基础信息 

  statusBarHeight为手机导航栏高度

3 使用的页面引入该组件，可以正常使用父子组件传值

注意：如果点击事件在该组件里不生效，可以尝试子传父传入事件触发

uni-app的分包

1 pages是小程序用来放页面的位置，在跟它同级的位置，创建分包文件夹，创建对应文件，格式如下

2 在 pages.json 中，配置分包

   "subPackages": [{
    "root": "packageOne",
    "pages": [
      
    {
      "path": "search/search",
      "style": {
        "navigationBarTitleText": "商品搜索",
        "enablePullDownRefresh": true,
        "backgroundColor": "#d00",
        "onReachBottomDistance": 260
      }
    }
    //在此处添加另一个页面，{path:....,style....}
  ]  }]

root属性是分包的那个文件夹名称，pages数组中，放置分包的页面，其余和pages文件夹的页面配置一致

uni-app的路由  微信小程序除前缀不同外其余一致

标签跳转

标签名

<navigator url="/pages/home/home"  open-type="navigate"></navigator>

open-type参数

navigate	会隐藏当前页面 进入新页面  页面栈最多十层
redirect	会销毁（关闭）当前页面 进入新页面
switchTab	专门用来跳转tabbar页面 他会销毁所有的非tabbar页面
navigateBack	关闭 当前页面，返回上一级或多级
reLaunch	可跳转tabbar页面,会关闭所有的页面 进入新页面

逻辑跳转

uni.navigateTo(OBJECT)	保留当前页面，跳转到应用内的某个页面
uni.redirectTo(OBJECT)	关闭当前页面，跳转到应用内的某个页面
uni.reLaunch(OBJECT)	关闭所有页面，打开到应用内的某个页面。
uni.switchTab(OBJECT)	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
uni.navigateBack(OBJECT)	关闭当前页面，返回上一页面或多级页面 可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层
uni.preloadPage(OBJECT)	预加载页面，是一种性能优化技术

路由传参和接收参数

 注意：switchTab不能传递参数

 传参：wx.redirectTo({ url: '/pages/home/home?id='+id })

 接收：在监听页面加载的onLoad函数形参options对象里解构

图片的预览

 // 图片预览
 preview(img) {  //点击的图片的网址
  //接受一个数组或字符串，里面的内容是要预览的图片的网址的集合
    let image = this.dataAll.pics.map(item => item.pics_mid_url)
        uni.previewImage({  //开启预览的api
          current: img,   //当前点击的图片
          urls: image     //图片的集合
        })
 },

uni-app的自带弹框

弹出框

 uni.showToast({
          title: '添加成功',
          icon: 'checkbox',
          mask: true
 })

loading

  uni.showLoading({
    title: '拼命加载中...',
    mask: true
  })

添加收货地址

 addSite() {  //事件
 //uni-app获取用户收货地址的api  
    uni.chooseAddress({
      success(res) {   //成功时的回调
        console.log(res)
       }
    })
 }

checkbox组件的使用

因为它是封装好的组件，v-model 是不起作用的，设置其是否被勾选的值为 checked，可以通过 @click 来设置其点击事件，在事件中修改 checked 值 , 如果是循环的数据 ，在事件中传递 下标 来更改对应数据