uniapp-小程序开发0-1笔记大全

news2024/10/26 23:26:11

uniapp官网： https://uniapp.dcloud.net.cn/tutorial/syntax-js.html

uniapp插件市场： https://ext.dcloud.net.cn/

uviewui类库： https://www.uviewui.com/

柱状、扇形、仪表盘库： https://www.ucharts.cn/v2/#/

CSS样式： https://www.runoob.com/css/css-tutorial.html https://www.w3school.com.cn/css/css_shiyong.asp

资环图片转换base64: https://www.sojson.com/image2base64.html

1.HBuilder打包Android原生apk相关：

生成keystore: keytool -genkey -alias testalias -keyalg RSA -keysize 2048 -validity 36500 -keystore test.keystore

HBuilder官网：https://dev.dcloud.net.cn/pages/app/list

2.HBuilder运行微信小程序相关：

通过微信小程序平台可以进行实时调试，注意部分vue api 无法运行到小程序,需要添加说明

3.AES/CBC/PKCS5Padding加密方式与Java实现联动

4.Uniapp应用生命周期

onLaunch 全局只触发一次初始化完成
onShow uniapp启动
onHide 从前天进入后台
onError 报错的时候出发
onUniNViewMessage 对nvue页面发送的数据监听
onUnhandledRejection 对未处理的Promise拒绝进行监听
onPageNotFound 页面不存在监听
onThemeChange 监听系统主题变化

5.注意static目录下的js文件不会被webpack编译

es6的代码不经过转换直接运行在手机端会报错；
所以less、scss等资源文件不要放在static目录下，建议放进common公共资源目录下

6.资源路径相关：

如：image,video等标签的src属性可以使用相对路径或绝对路径
unniapp建议使用： import url(‘@/common/uniapp.css’);

7.路由跳转

普通跳转：uni.navigateTo 或者组件
tab切换：uni.switchTab

注：跳转携带参数如果比较长需要编码处理
encodeURIComponent
decodeURIComponent

8.uniapp运行在小程序虚拟机log打印需注意

如果想打印当前object类型，不要拼接其他文字

9.uts语法注意

如果需要内部访问相关数据，需要用箭头函数

10.数据本地缓存使用

存储：uni.setStorage 同步
uni.setStorageSync 异步
获取：uni.getStorage 同步
uni.getStorageSync 异步

11.页面通讯，事件传递

uni. $e mi t 触发自定义事件 U ni .$ on 监听自定义事件

12.vuex状态管理

状态管理核心：state、getter、mutation、action、module

13.运行环境判断、跨端兼容

process.env.NODE_ENV =='development’研发
跨端兼容：
编译期间判断：// #ifdef xxx // #endif 仅在某平台编译
// #ifndef xxx // #endif 除在某平台编译
运行期判断：uni.getStorageInfoSync().platform

14.uView组件仓储使用

终端加载依赖: npm install uview
官方文档： http://v1.uviewui.com/

15.uniapp瀑布流实现

A.css3样式实现：性能高，缺点用户体验差，删除排列混乱（可以静态页面排列展示）
column-gap：10px --瀑布流容器内元素间隔
column-count：1 --瀑布流容器内排列列数
B.js实现u-view组件u-waterfall控件，拥有移除、新增等api

16.分包subPackge使用注意事项

页面跳转携带参数直接传值无法接收，可使用本地缓存方式进行新页面的数据使用

17.css样式

A.属性
字体
大小
布局：float左右
B.选择器：class类选择器
C.取值与单位
px
color
rpx：自动适配屏幕大小
D.盒子模型
margin：外边距
padding：内边距
border：边框
E.弹性盒子模型
设置水平排列：display:flex

18.项目运行出现回调信息Unhandled promise rejection

需要在相关回调中添加catch方法进行错误信息回调

19.小程序中image标签动态图片

网络图片：：src：‘www.xx.png’ 如果未加载需添加v-if =‘xxx.png’
本地图片：：src：‘img’ --img定义需要使用img ：require(‘/static/a.png’)修饰

20.修改uChart自定义滑动提示框自定义相关内容

https://blog.csdn.net/weixin_43656393/article/details/127367827

21.终端命令加载依赖

  （1）.使用npm   npm install xxx
  （2）.使用yarn    yarn add xxx
     前端运行：yarn run dev

用cmd命令：
npm list -g depth 0 查看全局下的包
然后把yarn 和 vite 下到全局吧下到全局是-g 例如npm i yarn -g

22.view配置background-image加载到小程序

需要使用网络图片或者将图片转换成base64的scss样式加载

23.uni运行到浏览器无法登陆之后response无法获取cookie字段：

需后端配置相关属性：
在这里插入图片描述

24.uniapp小程序发布：

微信: https://blog.csdn.net/m0_50934746/article/details/131718135
支付宝： https://opendocs.alipay.com/mini/ide/upload?pathHash=35e4fc93
https://applet-base-api-t.itheima.net/docs-uni-shop/11.publish.html