Uni-app 笔记二 (项目笔记)_uniapp safeareainsets

/**
 * @author wn
 * @date 2023/07/26 10:14:15
 * @description:uniapp 笔记
 */

/*
1 安全区域
屏幕去掉 状态栏 +刘海 剩余展示内容的区域 --
可通过 uni.getSystemInfoSync() 获取屏幕 上边界 到安全区 顶部 的距离。
safeAreaInsets = {top: 59, left: 0, right: 0, bottom: 34}

"navigationStyle": "custom", // 隐藏默认导航,自定义
页面 直接顶到 windows 最上方

这时 paddingTop:安全距离
view 中的 内容就不会被遮挡

const { safeAreaInsets } = uni.getSystemInfoSync()
const top = ref<number | undefined>()
top.value = safeAreaInsets?.top

:style="{ paddingTop: top + 'px' }"

自定义状态栏 返回按钮 --可以使用 navigator + icon 自定义图标
                            open-type="navigateBack" 对应 uni.navigateBack 设置 路由

2 icon  使用 iconFont

3 font-size 有继承size时  可以指定 百分比
  font-size: 80%;

4 伪元素  可以通过 display:flex; 与 text的内容 排列
  .caption {
	display: flex;
	justify-content: center;
	align-items: center;
	&::before,
	&::after {
		content: '';
		width: 20rpx;
		height: 20rpx;
		background: url(@/static/images/bubble.png) center/contain;
	}
}

5 uniAPP css  使用 标签选择器 报警告  要避免

6 v-if 导致 setup 执行了两次
  v-show 不会 onMounted中也不会

7  注意  page { height: 100%; }
  基于 scroll-view 组件实现 下拉刷新 上拉加载
  配置 refresher-enabled     属性，开启自定义下拉刷新交互
  监听  @refresherrefresh    事件，判断用户是否执行了下拉操作
  配置  refresher-triggered  属性，是否关闭下拉状态  true 开始动画 false 关闭动画
  配置  @scrolltolower       滚动到底部/右边，会触发  事件 -- 上拉加载

8 生成骨架屏
  微信开发者工具 --左边页面 右下角--三个点--生成骨架屏
  --xxx.skeleton.wxml 和 xxx.skeleton.wxss--
  将二者封装成 xxx.skeleton.vue组件  这里生成的是整个页面的骨架屏
  要是只需要部分 比如 navBar 不需要  template 中 删除 结构即可

  <XXXSkeleton v-if="isLoading" />
  <template v-else>
    <xxx1.vue />
    <xxx2.vue />
  </template>

9 navigator 参数传递
  navigator 通过url传递的参数  会在 page 的 props中接收到
  传递的参数应该是基本类型（如字符串、数字等），或者是经过JSON序列化的对象
  <navigator
  :url="'/pages/navigate/navigate?item='+ encodeURIComponent(JSON.stringify(item))">

  const { item } = defineProps<{ item:string }>()
  const obj = JSON.parse(decodeURIComponent(item))

  自定义状态栏

10 小程序的 tap 事件  等同于 click

11 setup 的执行时机 在 onLoad 之前
   setup > onLoad > beforeCreated

12 uni-popup 弹出层组件
  插入内容  uni-popup-message   uni-popup-dialog  uni-popup-share
  uni-popup 组件实例 通过 open close 打开与关闭

  const popupRef = ref<{
  open: (type?: UniHelper.UniPopupType) => void
  close: () => void
}>()
  popup.value?.open("top")
  popup.value?.close()

  禁止滚动穿透

13 微信登录  获取微信用户基本信息（昵称、性别、手机号码等）
   用户在使用小程序时，其实已登录微信，其本质上就是：微信授权给小程序读取微信用户信息
   1 前端：调用 wx.login() 接口获取登录凭证（code）
     后端：通过凭证（code）向微信服务器生成 用户登录态
     用户登录态，不包含用户昵称、性别、手机号码等信息，作用是用于后端与微信服务器通讯
     onLoad-->
     const { code } = await wx.login()

   2 微信登录接口(后台 API)
   button -- open-type="getPhoneNumber"
   点击 弹窗--允许后
   触发 @getphonenumber 回调中 获取 -- LoginParams
     type LoginParams = {
       code: string
       encryptedData: string
       iv: string
      }

   回调中 -- 调用 后台 API -- 获取 -- LoginResult

export type LoginResult = {
  id: number // 用户ID
  avatar: string // 头像
  account: string // 账户名
  nickname?: string // 昵称
  mobile: string // 手机号
  token: string // 登录凭证
}

14 pages.json -- "navigationBarTextStyle": "white"
   导航栏标题-文字颜色  还可以设置当前页面 状态栏 电池,时间等文字颜色
   仅支持 black/white

15 分包 1 按模块管理页面，方便项目维护。
       2 减少主包体积，用到的时候再加载分包，属于性能优化解决方案
   通过 插件 uni-create-view 可以快速新建分包页面，自动配置分包路由。
   注意: 自动生成的分包页面 需要修改下 分包加载规则 的 路径
   subPackages--[]

   分包预下载 -- preloadRule
   当用户进入【某个】页面时，由框架自动预下载 分包，提升进入后续分包页面时的启动速度

16 表单校验 -- uni-forms -- uni-forms-item
   1 表单校验 2 自定义校验规则 3 动态表单校验 -- v-model的巧妙赋值 (name:value)
   触发时机 validate-trigger= "bind" -- 数据改变时
           blur--input失去焦点  submit 提交数据时

17 滑动删除 uni-swipe-action--uni-swipe-action-item
   可以通过 1 数据 2 插槽 -- 生成 左右滑块内容
   点击滑块触发 click 事件 -- 只对1数据渲染生效
           2插槽渲染的  通过插槽自身的点击事件触发 @tap
   滑块 开关  触发 change 事件

18 SKU 组件 -- gitee 中 源码中  components--下载  导入自己项目中  components
   组件市场 下载 组件 按照文档使用
    <vk-data-goods-sku-popup
      ref="skuPopup"
      v-model="skuKey"          true为打开组件，false为关闭组件
      border-radius="20"        顶部圆角值
      :localdata="goodsInfo"    数据源
      :mode="skuMode"           1:都显示 2:只显示购物车 3:只显示立即购买
      @open="onOpenSkuPopup"    打开组件时
      @close="SkuPopup"         关闭组件时
      @add-cart="addCart"       加到购物车时--选完SKU才会触发	selectShop 当前选择的sku数据
      @buy-now="buyNow"         立即购买时--选完SKU才会触发	selectShop 当前选择的sku数据
    ></vk-data-goods-sku-popup>
    还可以通过 属性 配置
    最大最小购买数量 点击步长 库存显隐 主题  右上角关闭按钮及样式  立即购买与加入购物车 文字内容 样式 背景
    商品缩略图背景  按钮可点不可点 样式

    localdata -- 数据格式
    数据定义重点看
    (sku_list--sku_name_arr) --> (spec_list)

   {
     "_id":"001",         // 商品ID
     "name": "iphone11",  // 商品名称
     "goods_thumb":"",    // 商品头像
     // 该商品对应的sku列表 -- 也就是最终的 选完规格后的 库存商品
    "sku_list": [
        {
      "_id": "001",           // SKU ID
      "goods_id": "001",      // 商品ID
      "goods_name": "xx",     // 商品名称
      "image": ""             // SKU头像
      "price": 19800,         // SKU 价格
      "stock": 100            // 库存
      // 该SKU由哪些规格组成（规格是有顺序的，需要与spec_list的数组顺序对应）
      "sku_name_arr": ["红色", "128G", "公开版"],
        }
    ],
     // 商品规格列表
    "spec_list": [
        {
            "name": "颜色", // 第一组规格名
            // 第一组规格的 第一项规格值名称    二项规格值名称  三项规格值名称
            "list": [{"name": "红色"},{"name": "黑色"},{"name": "白色"}]
        },
        {
            "name": "内存",
            "list": [{"name": "128G"},{"name": "256G"}]
        },
        {
            "name": "版本",
            "list": [{"name": "公开版"},{"name": "非公开版"}]
        }
    ]
}
sku_name_arr 数组的第一个值sku_name_arr[0] = spec_list[0].list中的任意一个元素的name属性的值
                               spec_list[0].list中必须要有且只有一个元素的name属性的值为"红色"

19 组件类型生命
 1 自定义组件   --   custom.vue
 2 组件类型     --   import custom from '@/components/custom.vue'
                    typeof custom
 3 组件实例     --   InstanceType<typeof custom>

 方式二
 1 import type { Component } from '@uni-helper/uni-app-types'
 2 定义 props  -- interface CustomProps {
                   name:string
                  }
 3 Component<T> 等同于  typeof T
   Component<CustomProps> === typeof custom
 4 组件实例     --   InstanceType<Component<CustomProps>>

最后 -- 全局组件类型声明--这样自定义的组件就有类型了
declare module 'vue' {
	export interface GlobalComponents {
		'custom': typeof custom
    'custom2': Component<CustomProps>
	}
}

20 滚动驱动的动画 -- this.animate(selector, keyframes, duration, ScrollTimeline)
    this.animate(
    '.avatar', // 选择器 多个空格隔开

    [{
    borderRadius: '0',
    borderColor: 'red',
    transform: 'scale(1) translateY(-20px)',
    offset: 0,
  }, {
    borderRadius: '25%',
    borderColor: 'blue',
    transform: 'scale(.65) translateY(-20px)',
    offset: .5,
  }],

    2000,

    {
    scrollSource: '#scroller', // 以谁滚动触发动画
    timeRange: 2000,
    startScrollOffset: 0,
    endScrollOffset: 85,
  })

  纯 CSS 实现
  https://segmentfault.com/a/1190000044039882#item-5

21 开发环境 -- boolean
   import.meta.env.DEV      开发
   import.meta.env.PROD     发布

22 微信支付 -- 获取微信支付参数 + 发起微信支付
   const onOrderPay = async () => {
	// 开发环境 DEV
	if (import.meta.env.DEV) {
		// 开发环境 -- 模拟支付
		await getPayMockApi({ orderId: id })
	} else {
		// 正式环境支付 -- 1.获取支付订单信息，
		const res = await getWxPayApi({ orderId: id })

		// uni.requestPayment(res) -- res:UniApp.RequestPaymentOptions
		// 2.调用微信支付API -- 弹框输密码
		await wx.requestPayment(res)
	}
*/


 ===========================项目打包============================

 ======微信小程序端========
 1 运行打包命令 pnpm build:mp-weixin -- vsCode
 2 预览和测试，微信开发者工具导入生成的 /dist/build/mp-weixin 目录 -- 微信开发者工具
 3 上传小程序代码 -- 微信开发者工具 -- 上传
 4 提交审核和发布 -- 微信公众平台 -- 版本管理 -- 提交审核
 打包成其他小程序端的步骤类似，只是更换了 打包命令 和 开发者工具 。

 =======H5 端============
 1 运行打包命令 pnpm build:h5 -- vsCode
 2 预览和测试，使用浏览器打开 /dist/build/h5 目录下的 index.html 文件
 3 由运维部署到服务器
  // manifest.json
{
   // 网页端特有配置
  "h5": {
    "router": {
      "base": "./"   // 基础路径：./ 为相对路径
    }
  }
}

======打包为 APP 端=======
HBuilderX
1 手机预览与调试
2 导入HBuilderX-->选中项目根目录-->运行(运行到手机或模拟器)-->下载真机运行插件-->运行到Android App基座

打包APP -- 云打包
1 Manifest 中 获取 DCloud AppId
2 发行(原生APP 云打包)-->注册 DCloud 账号--> 登陆 DCloud-->
3 发行(原生APP 云打包)
使用云端证书(详情中  DCloud AppId -- 获取证书 -- Android 云端证书--创建证书)
正式打包
传统打包 或者 快速安心打包
打包
安装云打包插件
打包

======打包为 IOS 端=======
HBuilderX + MacBook + iphone
1 手机预览与调试
2 导入HBuilderX-->选中项目根目录-->运行(运行到手机或模拟器)-->运行到 IOS App基座
建议运行到模拟器上 真机版本太多了
mac 安装  Xcode  提供 iPhone 模拟器
运行 到 IOS App基座 时就会有 多个版本的 模拟器

打包IOS -- 云打包
需要 ios IDP/IEP 证书 -- 申请 每年几百元

证书私钥密码
证书profile文件
私钥证书

花钱就有了
其他按步骤进行填写

正式打包
传统打包 或者 快速安心打包
打包

====================================
各平台兼容
1 小程序端 不支持 * 选择器
  运行直接报错 --> 并集选择器 view,text,image{ }

2 页面视口差异 page
  H5端 -- 整个页面都是 视口 (上下 通过定位画出)
  小程序端 + APP端 -- 顶部导航栏 + 视口(webview区域) + 底部 tabBar
  (非tabBar页 或 者自定义导航栏 -->视口webview区域会相应延伸)

  A 视口内容 -- 是否 会被 上下 遮挡 (H5端)
  page {
	height: 100% !important;
 }
因为内部的继承关系  100% 可以让 H5的视口--page 在 中间,不会被上下部分因为定位遮挡
 B 定位 组件的位置 -- 是否 会被 上下 遮挡 (H5端)
 --window-bottom  App 小程序 都是 0 ,H5 tabBar高度
 --window-top     App 小程序 都是 0 ,H5 导航栏高度
 position:fixed;
 bottom:var(--window-bottom);

3 H5 style 默认开启 scoped
 开发者工具生成的 骨架屏 是根据页面样式 + 其他样式生成的
 打包到 H5 或者 APP 后
 因为 默认开启了 scoped
 骨架屏 依赖的 一些组件样式  比如 首页(轮播图,分类,猜你喜欢) 的样式引用不到
 骨架屏 样式 异常
将 scss 写到独立的  category.scss ,hot.scss 中
组件 和 骨架屏 style 中 分别引用
骨架屏中
#ifdef H5 || APP-PLUS

@import '../styles/category.scss';
@import '../styles/hot.scss';

#endif

4 组件兼容
编译到不同的平台时  相同的组件可能会 编译成 不同的 组件树
例如 navigator --> a
标签 与 结构 父子嵌套 都会变化 --导致样式 失效 -- flex失效  类名丢失 等
根据平台 通过条件编译调整 css 样式 即可

5 js 的 跨端 条件编译 -- 根据文档查阅即可
微信支付
选择图片
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389