Uniapp 使用概览 （自用）

常用脚本

交互反馈： https://uniapp.dcloud.net.cn/api/ui/prompt.html

1. showToast

uni.showToast({
    icon:  error ,
    title: res.data.message
})

2. storage相关

uni.setStorageSync(key, data)

uni.removeStorageSync(key)

let data = uni.getStorageSync(key)

生命周期

// 只能在App.vue里监听应用的生命周期
import { onLoad,onShow,onHide,onExit } from "@dcloudio/uni-app"

onLaunch((options) => {
     // 当uni-app 初始化完成时触发（全局只触发一次），参数为应用启动参数，同uni.getLaunchOptionsSync 的返回值
     console.log( 应用启动路径： , options.path)
})

// ***  重大  ***
// 测了下在页面上也能用
onShow((options) => {
    // 当 uni-app 启动，或从后台进入前台显示，参数为应用启动参数，同 uni.getLaunchOptionsSync 的返回值
    console.log( 应用启动路径： , options.path)
})

// ***  重大  ***
onHide(() => {
    // 当 uni-app 从前台进入后台
})

onError(() => {
    // 当 uni-app 报错时触发
})

onExit(() => {
    // 监听应用退出
})

onLoad((options:any) => {
    // 此时能接收到来自路径的参数  列如linkTo(`/pages/realestate/menu?id=${id}`) ，即是options.id
    console.log( MENU:  , options)
})

globalData

https://uniapp.dcloud.net.cn/collocation/App.html#globaldata

样式

CSS相关
https://uniapp.dcloud.net.cn/tutorial/syntax-css.html

关于RPX

rpx 即响应式px，是一种根据屏幕宽度自适应的动态单位。uni-app规定屏幕的基准宽度为750rpx。
设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx

简单理解： 设计稿基于750px宽，1rpx即对应设计稿的1px

Vue 国际化

https://uniapp.dcloud.net.cn/tutorial/i18n.html#vue%E7%95%8C%E9%9D%A2%E5%92%8Cjs%E5%86%85%E5%AE%B9%E7%9A%84%E5%9B%BD%E9%99%85%E5%8C%96

main文件中配置

// 国际化配置
import { createI18n } from  vue-i18n // v9.x

import en from  ./locale/en.json 
import zh from  ./locale/zh.json 

const messages = {
    en,
    zh,
}

let i18nConfig = {
  locale: uni.getLocale(),// 获取已设置的语言
  messages
}

const i18n = createI18n(i18nConfig)

export function createApp() {
  const app = createSSRApp(App);
  app.use(i18n)
  app.use(Pinia.createPinia());
  return {
    app,
    Pinia
  };
}

locale中的配置
en.json

{
  "tax.t1": "请输入您的房屋总价"
}

view中使用
$t( aaa.a )

 <input class="uni-input  _i"  :placeholder="$t( tax.t1 )" type="number" @input="onPriceInput"/>