# uni

**Repository Path**: yefufg/uni

## Basic Information

- **Project Name**: uni
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-08-12
- **Last Updated**: 2024-08-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

文档：https://uniapp.dcloud.net.cn/
微信小程序：https://developers.weixin.qq.com/miniprogram/dev/component/
安装UI框架：https://www.uviewui.com/
    组件、工具箱(http请求、路由跳转、去除空格、时间戳转换)


AppID(小程序ID)	wx715533737a696032
AppSecret(小程序密钥)	ac625e9c4d2ea68637c30956f149b4b1


小程序当中：发出去的请求 必须得是：https的请求 如果不是不允许上线
本地开发是可以用 http接口


$u  <u-> 属于 uViewUI
uni uniapp框架


DClound 公司
    mui UI框架
    uniapp 框架
    hbuilderX 编辑器
    插件市场



UniApp框架 == Vue框架 -> dist html + css + js

UniApp 集成性框架
小程序、Web网页、H5网页、App

App 两种 
    纯原生态：Android IOS 两个不同语言开发出来的App 纯原生态的应用
        优点：拓展性和原生性比较出众
        缺点：需要大量人力和物力 开发周期要长

    混合类：uniapp react-native 
        优点：开发周期短、一套代码打包出多个终端
        缺点：局限性，性能跟原生态是没法比的

我们用一套代码，编译出不同版本的项目


uniapp 这边我们主要掌握的：小程序 App端 H5 不同的兼容问题 组件、Api接口


注册一个小程序
https://mp.weixin.qq.com/


创建Uniapp正式版的命令（Vue2）
vue create -p dcloudio/uni-preset-vue uniapp

build 打包命令
dev 开发模式的命令

H5端
yarn dev:h5
npm run dev:h5

小程序端
yarn dev:mp-weixin
npm run dev:mp-weixin

App端
yarn dev:app-plus
npm run dev:app-plus

运行：
手机直接数据线USB插到电脑上 要让手机 开启 开发者模式 USB传输模式  文件传输
电脑上装模拟器：很卡



在我们的UniApp项目中，我们是不能够去写html的标签

WEB网页 == 微信小程序(纯源代码)
html  == wxml 小程序自己定义的标签
css == wxss 跟css是完全一样
js == js,wxs javascript + vue


UniApp(vue框架) -> build(打包) -> web,h5(html/css/js)
UniApp(vue框架) -> build(打包) -> 微信小程序源代码(wxml/wxss/wxs)
UniApp(vue框架) -> build(打包) -> app(app资源)



应用生命周期(只要在打开应用的第一次才会运行 只运行1次)
onLaunch
onShow
onHide
onError


Uniapp页面生命周期(Vue生命周期一样的)
onLoad -> 加载 -> 接收页面的传参 加载1次 第一次加载的时候
onShow -> 页面显示 可以反复执行的钩子函数
onReady -> 页面渲染完成
onHide -> 页面隐藏
onUnload -> 页面卸载

UniApp路由 === pages.json == vue-router
pages -> 页面路由 当中第一个元素就是默认首页

manifest.json == vite.config.js 脚手架的配置文件


安装UI框架
https://www.uviewui.com/


// 安装sass
npm i sass -D
yarn add sass

// 安装sass-loader，注意需要版本10，否则可能会导致vue与sass的兼容问题而报错
npm i sass-loader@10 -D
yarn add sass-loader@10

// 安装
npm install uview-ui@2.0.36
yarn add uview-ui@2.0.36

uViewUI的配置
https://www.uviewui.com/components/npmSetting.html


页面跳转
uni.navigateTo	保留当前页面，跳转到应用内的某个页面，使用 uni.navigateBack 可以返回到原页面
uni.redirectTo	关闭当前页面，跳转到应用内的某个页面
uni.reLaunch	关闭所有页面，打开到应用内的某个页面
uni.switchTab	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
uni.navigateBack	关闭当前页面，返回上一页面或多级页面


小程序卡的一个原因：如果你打开的界面要是很多的话，就会很卡
页面的层级叠加 最多能够叠加20层


授权登录流程：
    1.调用 uni.login 接口 换取 临时凭证 code 15分钟
    2.发送接口请求 -> 后端 www.fastadmin.com/uniapp
    3.


1个数据库 -> business id: 40 mobile:1388888 openid:''

云课堂 Vue商城 微信小程序(用来表示用户唯一身份标记符 openid UnionID(企业用户))

捆绑的动作 
输入 手机号 和 密码 能找到这个人 就说明这个人 是在我们平台注册过
捆绑动作 update 更新语句  openid = 自己的openid

输入 手机号 和 密码 都找不到这个人 就说明他是新用户 
直接自动 注册一个新用户 insert openid


登录判断的功能

cookie  基于web浏览器 伴随着 http 请求 一并进行发送的
session 基于服务器端

Storage 本地存储(app,小程序) 将数据直接的存入到 app的应用内部
localstorage('key', value)



<scroll-view> uniapp 组件 自带了 下拉刷新 和 上拉加载的自定义的事件
uniapp 页面提供的下拉刷新和上拉加载


onPullDownRefresh 监听用户拉动到页面顶部 一般用于下拉刷新
onReachBottom  监听用户拉动到页面的底部 一般用户上拉加载

小程序上线
后端 -> 我们自己的服务器
小程序的代码 -> 微信公众平台 -> 人工审核
    代码体积：2M
        1、js代码
        2、css代码 也可以放到自己的服务器
        3、图片资源 放到自己的服务器 然后用外链引入到项目中
        <image src="https://fast.dancefunk.com/uploads/123123/1.png" />
        <image src="./assets/1.png" />

    不分包：打开小程序的时候 一次性加载全部的界面进来 时间周期 长


    分包概念：
        主包：(主页面) 首页、底部导航栏 5个界面 2M 时间周期 短
        我的：/pages/business/index


        子包：2M
            subPackage: {
                '/pages/business/index': {
                    pages: [
                        {
                            path: '/pages/business/profile',
                            style: {
                                title: '个人资料'
                            }
                        },
                        {
                            path: '/pages/business/address',
                            style: {
                                title: '收获地址'
                            }
                        },
                    ]
                }
            }



uniapp - 代码 - 小程序请求的接口 强制性 必须是 https的地址
    1、一定要确保你项目中所请求的接口是线上地址
    2、公众平台 -> 开发设置 -> 服务器域名
    3、编译小程序的代码,并进行测试
        yarn dev:mp-weixin 开发代码编译
        yarn build:mp-weixin 运行打包命令
    4、将“打包”的源代码进行上传
    5、小程序的类目设置
    6、提交人为审核。审核通过后，发布上线



后端接口 - 代码 -> 服务器上面 宝塔Linux
    1、系统配置 执行到线上的数据库中
    2、数据库表里面的字段 执行到线上的数据库中
    3、改变成 https的站点


云课堂 直播
Vue （支付 拼团逻辑） 和 直播
Uniapp小程序
React 项目
React + Typescript 酒店预约的项目




------------------------------------------------------------------
推流(直播方): http://push.quickask.net
播流(看直播): http://play.quickask.net

1、开通直播服务
2、购买流量资源包
3、添加推流和播流的域名
4、DNS解析配置CHAME域名加速
5、让推流和播流进行关联
6、生成推流和播流的地址
7、进行直播和播放
8、MP4通过FFmpeg转换为RTMP流协议 推送到推流地址   推流地址在进行解析 解析完成后在转发给 播流地址

直播两种方式：
    1、无人直播 提前录好的视频
    2、在线直播
    ffmpeg
    如果去添加环境变量


推流
ffmpeg -re -stream_loop -1 -i ./demo.mp4 -vcodec copy -acodec copy -f flv -y rtmp://push.quickask.net/QuickaskApp/QuickaskStream

播流
http://play.quickask.net/QuickaskApp/QuickaskStream.m3u8

rtmp://play.quickask.net/QuickaskApp/QuickaskStream