uniapp蛋糕笔记

原创已于 2023-09-23 18:56:22 修改 · 80 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #前端

于 2023-08-16 21:26:19 首次发布

本文围绕uni-app开发展开，介绍了class数组表示、uni.setStorage本地存储、watch浅深监听、表单三要素、upx作用、uView组件库、路由跳转方法、公共组件生命周期、封装请求及web-view功能等内容，为uni-app开发提供实用技巧。

class用数组表示

<view :class="['box',isActive?'active':'']"></view>
<view :class="['box',{'active':isActive}]"></view>

uni.setStorage

使用uniapp的api进行本地存储，不要用localStorage

watch

watch分为浅监听和深监听，浅监听为函数写法，只能监听到表层的变化，深监听为对象写法，可以监听到深层的变化，基本写法如下

watch:{
//浅监听
 stu(){
...
},
//深监听
stuDeep:{
handler(){
...
 },
deep:true
}

}

表单三要素

form的submit事件，表单元素的name，提交按钮的form-type

<form @submit="handleSubmit">
   <input type='text' name='username'/>
   <button form-type='submit'>提交</button>
</form>

upx

upx的作用和rpx一样

uView组件库

uniapp用的组件库

路由跳转

与微信小程序的方法相似

uni.navigateTo及其路由传参，传参通过onLoad生命周期获取

uni.navigateBack自定义返回

uni.switchTab实现Tab页面访问

其他路由方法的运用

公共组件

公共组件不能用onLoad生命周期,组件的生命周期是vue的那套生命周期

封装请求

在utils文件夹下创建request.js，

// 统一地址前缀
let baseURL = 'https://api2105.h5project.cn'
export const $http = function(url, method = 'GET', data = {}) {
  // 用Promise进行封装
  return new Promise((resolve, reject) => {
    uni.request({
      url: baseURL + url,
      method,
      header: {
        "X-LC-Id": "7yoqQxyLBNN9MW5rsgTGXbHL-gzGzoHsz",
        "X-LC-Key": "hA8yGYuHjnXWRui1rzTe0C3P",
        "Content-Type": "application/json"
      },
      data,
      // 成功
      success: (res) => {
        resolve(res.data)
      },
      // 失败
      fail: (err) => {
        reject(err)
      }
    })
  })
}
// 封装get
export const $get = function(url, data = {}) {
  return $http(url, 'GET', data)
}
// 封装post
export const $post = function(url, data = {}) {
  return $http(url, 'POST', data)
}

在main.js进行全局挂载

// 挂载全局异步请求方法
 import {$http,$get,$post} from 'utils/request.js'
 Vue.prototype.$http = $http
 Vue.prototype.$get = $get
 Vue.prototype.$post = $post
import * as request from 'utils/request.js'
// 简化上面
for(let key in request){
	Vue.prototype[key] = request[key]
}

web-view

可以跳转到该网页的地址，显示链接内容，可以用来显示广告

<web-view src="网页地址"></web-view>