基于Vue + 阿里直播实战开发直播APP，涉及直播一系列完整的流程，从主播开播到阿里直播自动生成推流地址和播（拉）流地址，用户在APP上点击进行观看直播。

课程地址：
https://study.163.com/course/introduction.htm?share=2&shareId=400000000301017&courseId=1212826801&_trace_c_pk2=a05433ad56494c2f8adb8a4e5c671dc4

或：
https://www.studyfox.cn/487.html

课程目录：

第1讲_项目介绍

第2讲_uniapp前端项目搭建

第3讲_引入全局样式和图标库

第4讲_引入全局样式和图标库

第5讲_底部导航设计

第6讲_底部导航设计

第7讲_底部导航切换

第8讲_创建直播列表模拟数据

第9讲_首页直播列表显示

第10讲_阿里云视频直播设置

第11讲_阿里云视频直播推流播流地址说明

第12讲_管理后台搭建

第13讲_vscode远程连接服务器

第14讲_阿里云视频直播SDK在线安装

第15讲_阿里云视频直播调用API设计

第16讲_阿里云视频直播调用API设计

第17讲_阿里云直播创建签名方法

第18讲_阿里云直播创建推流地址

第19讲_阿里云直播创建拉流地址

第20讲_创建直播数据表

第21讲_通过API接口将推流拉流地址写入数据库

第22讲_管理后台直播列表显示

第23讲_管理后台直播列表显示

第24讲_管理后台直播列表显示

第25讲_uniapp前端公共方法封装

第26讲_uniapp前端公共方法封装

第27讲_API接口获取直播列表

第28讲_uniapp首页获取直播列表

第29讲_uniapp直播功能

第30讲_uniapp直播功能

第31讲_uniapp直播调试

第32讲_uniapp直播页面添加顶部导航

第33讲_uniapp直播页面顶部导航完善

第34讲_uniapp直播真机调试

第35讲_uniapp直播真机调试

第36讲_uniapp观看直播页面设计

第37讲_uniapp观看直播页面设计

第38讲_获取直播在线人数

第39讲_定时检测直播状态

第40讲_uniapp首页直播状态显示

name 参数必须填'file'

发帖背景：项目需要在用户登录后如果出现数据未加载的情况允许用户下拉刷新，重新获取数据。

官方文档对下拉刷新的说明：https://uniapp.dcloud.io/api/ui/pulldown.html#onpulldownrefresh

踩坑1：（个人问题）

可以看到用户需要开启下拉刷新，但是由于我需要刷新的是tabbar页面，所以我非常愚钝的设置在了（均为pages.json文件内）tabBar列表而不是pages（忘记了）从而导致无法开启下拉刷新

踩坑2：Error: [xxx]: :require(...).main is not a function

这种情况大家参加这篇文章：https://bobbyhadz.com/blog/javascript-typeerror-require-is-not-a-function

我会触发这个报错的原因是我在vue页面使用下拉刷新调用了云端函数重新拉取数据，也就是在云函数引用 const path = require('path');时结尾没有加 ；分号，补上重新运行就好了

最后附上完整函数，写在 script 即可

async onPullDownRefresh () {
console.log('触发下拉刷新了');
await userService.afterLogin(); //这里是我用于登录后拉取数据的函数，没有异步函数的话不需要写 async 和 await
setTimeout(()=>{
uni.stopPullDownRefresh(); //停止刷新
},2000)
}

　　网络约会业务是互联网的未来。互联网已经极大地改变了我们的互动方式，如今超过 85% 的人口正在使用约会网络应用程序与朋友保持联系或结识新朋友。现在，人们甚至在去酒吧与其他人会面之前首先使用互联网。使用互联网与某人约会的人数每年都在增加。约会业务已成为网络上第二大最赚钱的市场。 所有领先的约会业务每年都在增加越来越多的收入，而您可能是下一个！
　　交友盲盒演示：m.ymzan.top

input 什么时候可以添加readonly属性，我看到19年就有人提这个需求了，现在还是没有添加

https://github.com/kytrun/webdav-client-uniapp

Fork 自 webdav-client，添加了 uni.request 作为 axios adaper，目前基本可用，没有测试全部功能。需要注意的是坚果云提供的 WebDAV 并非标准的 WebDAV，部分接口有问题可能在其他服务上表现正常。

下载 https://github.com/kytrun/webdav-client-uniapp/blob/master/dist/uniapp/webdav.js 文件在 uni-app 项目中以 ES module 导入使用。

坚果云 WebDAV 示例:

import {  
    AuthType,  
    createClient  
} from "@/deps/webdav"  

const client = createClient(  
    "https://dav.jianguoyun.com/dav/test/", {  
        authType: AuthType.Password,  
        username: `${username}`,  
        password: `${password}`  
    })  

client.getFileContents("test.txt", {  
        format: "text"  
    })  
    .then(data => console.log(data))  
    .catch(e => console.log(e))

更多接口见项目文档。

语音播报-前台后台离线推送语音播报、到账xx元、收款播报、自定义推送铃(ios)：https://ext.dcloud.net.cn/plugin?id=8452

更新用户信息后，为什么发布的插件作者那里没有变，点击之后还提示找不到此用户

希望可以在js里面输入未导入的变量时可以自动导入,像webstorm一样,,不然第一次写的都只能去复制,这样可以省去更多的时间;
并且希望可以在scss文件里面也可以使用格式化功能,现在无法使用格式化功能,只能自己手动排版,非常麻烦!

迫于新版HX诸多问题，看到有不少同学在找历史版本，在这放一个现在一直在用的3.3.13版本吧

HX3.3.13版本自取

先实现如下效果，图片可自由缩放旋转删除移动。通过两个点控制。

<template>  
    <view class="page-body">  
        <view class="move-area">  
            <view v-if="!isHide" class="move-box" style="transform-origin:center;"  
                @touchmove="itemMove" @touchstart="itemtouch" @touchend="itemend"   
                :style="{transform: 'translate(' + itemX + 'px, ' + itemY +'px) rotate('+tmpRotate+'deg) scale('+tmpScale+')'}">  
                <view class="opt-icon del-icon" :style="{transform: 'scale(' + (1 / tmpScale) + ')'}" @touchstart="startMode(2)"></view>  
                <view class="opt-icon edit-icon" :style="{transform: 'scale(' + (1 / tmpScale) + ')'}" @touchstart="startMode(1)"></view>  
                <view class="move-body" @touchstart="startMode(0)">这是内容</view>  
            </view>  
        </view>  
    </view>  
</template>  

<script>  
    const nearDg = 7; // 用于控制当近似垂直或水平时，视为垂直或水平的容差。  
    let lastX = 0, lastY = 0;  
    export default {  
        data() {  
            return {  
                itemX: 0,  
                itemY: 0,  
                realCenterX: 0,  
                realCenterY: 0,  
                halfWidth: 75, // px  
                halfHeight: 75, // px  
                realWidth: 0,  
                realHeight: 0,  
                offset: 12.5, // px  
                touchMode: 0, // 0移动 1缩放旋转  2删除  
                startX: 0,  
                startY: 0,  
                startAngle: 0,  
                startDist: 0,  
                tmpRotate: 0,  
                initRotate: 0,  
                tmpScale: 1,  
                initScale: 1,  
                isHide: false,  
            }  
        },  
        onLoad:function(){  
            this.itemX = 70;  
            this.itemY = 100;  
        },  
        mounted:function(){  
            let view = uni.createSelectorQuery().in(this).select(".move-box");  
            view.boundingClientRect(data => {  
                this.realWidth = data.width;  
                this.realHeight = data.height;  
                this.realCenterX = data.right - data.width / 2;  
                this.realCenterY = data.bottom - data.height / 2;  
            }).exec();  
        },  
        methods: {  
            itemMove: function(e){  
                let curX = e.touches[0].clientX;  
                let curY = e.touches[0].clientY;  
                if(this.touchMode === 0){  
                    this.itemX += curX - lastX;  
                    this.itemY += curY - lastY;  
                    this.realCenterX += curX - lastX;  
                    this.realCenterY += curY - lastY;  
                    lastX = curX;  
                    lastY = curY;  
                }  
                if(this.touchMode !== 1)return;  
                let angle = this.angle(this.realCenterX, this.realCenterY, curX, curY);  
                if(this.startAngle === 0){  
                    this.startX = curX;  
                    this.startY = curY;  
                    this.startAngle = angle;  
                    this.startDist = Math.hypot(this.startX - this.realCenterX, this.startY - this.realCenterY);  
                }  
                else{  
                    let rotate = this.initRotate + Math.round(angle - this.startAngle);  
                    let leftDg = Math.abs(rotate % 90);  
                    if(leftDg < nearDg || 90 - leftDg < nearDg){  
                        rotate = Math.round(rotate / 90) * 90;  
                    }  
                    this.tmpRotate = rotate;  
                    let curDist = Math.hypot(curX - this.realCenterX, curY - this.realCenterY);  
                    this.tmpScale = this.initScale * curDist / this.startDist;  
                }  
            },  
            itemtouch: function(e){  
                lastX = e.touches[0].clientX;  
                lastY = e.touches[0].clientY;  
            },  
            itemend: function(e){  
                this.startAngle = 0;  
                this.initRotate = this.tmpRotate;  
                this.initScale = this.tmpScale;  
            },  
            startMode: function(mode){  
                this.touchMode = mode;  
                if(this.touchMode === 2){  
                    this.isHide = true;  
                }  
            },  
            angle: function(cx, cy, ex, ey){  
                var dy = ey - cy;  
                var dx = ex - cx;  
                var theta = Math.atan2(dy, dx); // range (-PI, PI]  
                theta *= 180 / Math.PI; // rads to degs, range (-180, 180]  
                if (theta < 0) theta = 360 + theta; // range [0, 360)  
                return theta;  
            }  
        }  
    }  
</script>  

<style lang="scss">  
.page-body{  
    padding: 5px;  
}  
.move-area{  
    width: 365px;  
    height: 500px;  
}  
.move-box{  
    position: relative;  
    width: 175px;  
    height: 175px;  
    padding: 1px;  
}  
.opt-icon{  
    position: absolute;  
    width: 25px;  
    height: 25px;  
    border-radius: 50%;  
}  
.del-icon{  
    background-color: red;  
    left: 0;  
    top: 0;  
}  
.edit-icon{  
    background-color: green;  
    right: 0;  
    bottom: 0;  
}  
.move-body{  
    margin: 12.5px;  
    width: 150px;  
    height: 150px;  
    border: 2px solid green;  
}  
</style>