【捷映】是一款专业的短视频制作工具，提供海量的创意模板，丰富的音乐资源、酷炫的特效，以及简单易操作的特性，让每一位用户在手机上就能轻松制作出喜欢的短视频。

应用前端采用uniapp开发，后端采用PHP开发，使用8核16G服务器渲染视频，速度飞快。
欢迎各位程序猿扫码体验，如能报告BUG联系客服有奖励哦。

官方我没有看到监听的方法，大家可以参考下面的方法，可以自己修改50的大小。

<template>  
    <view @touchstart="touchStart" @touchend="touchEnd" style="height:2000px;">  
        测试  
    </view>  
</template>  
<script>  
    export default {  
        data() {  
            return {  
                touchStartX: 0,  // 触屏起始点x  
                touchStartY: 0,  // 触屏起始点y  
            };  
        },  
        methods: {  
            /**  
            * 触摸开始  
            **/  
            touchStart(e) {  
                console.log("触摸开始")  
                this.touchStartX = e.touches[0].clientX;  
                this.touchStartY = e.touches[0].clientY;  
            },  

            /**  
            * 触摸结束  
            **/  
            touchEnd(e) {  
                console.log("触摸结束")  
                let deltaX = e.changedTouches[0].clientX - this.touchStartX;  
                let deltaY = e.changedTouches[0].clientY - this.touchStartY;  
                if (Math.abs(deltaX) > 50 && Math.abs(deltaX) > Math.abs(deltaY)) {  
                    if (deltaX >= 0) {  
                        console.log("左滑")  
                    } else {  
                        console.log("右滑")  
                    }  
                } else if(Math.abs(deltaY) > 50&& Math.abs(deltaX) < Math.abs(deltaY)) {  
                    if (deltaY < 0) {  
                        console.log("上滑")  
                    } else {  
                        console.log("下滑")  
                    }  
                } else {  
                    console.log("可能是误触！")  
                }  
            },            
        }  
    };  
</script>

使用hbuilder打包人人app商城

APP制作介绍

人人商城是很好的一个商城系统 所以我写了一个基于hbuilderX的htmlplus接口的前后端文件，让人人使用hbuilder打包时，具有了原生的支付能力，以及优化了打包的代码，优化了很多无限刷新和卡死的BUG，达到了媲美原生app的流畅度。

APP和支付截图

软件架构

在WXPAY和alipay的官方php demo上进行改造，调用htmlplus接口，让人人打包app商城 支持安卓微信支付宝支付，同时支持ios的支付宝支付。（IOS微信支付也支持 但需要你上架IOS。）

打包前提

想实现wxpay功能，必须在开通微信商户功能，接入wxpa，如果想接入支付宝同理，需要签约支付宝app支付。

以及最重要的 在人人后台 把pay参数配置和填写正确。

替换后端和前端文件

下载完整的前后端代码 ：https://gitee.com/lionjoy/renrenapppay
将整个pay文件夹拷贝至 ：你的微擎目录/addons/ewei_shopv2/core/mobile 文件夹下。确保路径正确。
将static文件夹，拷贝至 ：你的微擎目录/addons/ewei_shopv2 确保路径正确，应该是会替换掉 你的微擎目录/addons/ewei_shopv2/static/js/app/biz 下面的原有的H5app.js
仔细阅读下载的源码包中的说明，按照说明修改指定的参数

app打包教程-开始打包

在拷贝安装之前，你应该首先申请微信支付宝 appID和 微信支付的一些账号，并在微擎后台配置好参数。

我们需要使用hbuilder X打包

下载并安装HBuilderX后，打开编辑器，点击右上角选择：文件 -> 新建 -> 项目选择wap2app，

填入项目名称，wap站首页地址，选择项目文件路径，创建。项目创建成功，软件左侧会出现你刚创建的项目。然后粘贴示列项目的文件进去。

打开hbuilder后选择文件，新建 ，项目 ，项目类型选择 wap2app

然后输入你的移动端网站网址即可。 应该是这样的格式 XXXXX.com/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile ，xxx替换成你的网站域名。如果不会请参考hbuilder官方文档

接下来对manifest.json 进行配置，参考下载资源里的说明。

manifest.json文件就配置完成了，你可以参考hbuilder官网文档对 sitemap.json 继续优化，优化加载速度等。也可以使用下载资源里我配置好的mainfest.json

接下来，打包app，安卓请使用安卓自有证书，苹果请使用苹果证书。点击HBuilder： 发行 -> 原生App-云端打包

注意打包时 一定要选择 使用自有证书， 按钮旁边有链接 可以去看怎么生成。 以及一定要设定一个应用包名 记下来，这对微信支付很重要！

点击打包按钮，你的app就被打包完毕，enjoy

支持安卓和苹果，参数时传入对象类型，如： openTM({url:''})
苹果6s plus ios12
安卓10，测试均没问题

function openTB(data){//已经支持安卓和ios  
        plus.runtime.openURL('taobao://' +data.url.replace("https://",""),function(error){  
            alert(JSON.stringify(error))  
        },'com.taobao.taobao');  
    }  
    function openTM(data){//已经支持安卓和ios  
        plus.runtime.openURL('tmall://page.tm/appLink?h5Url='+encodeURIComponent(data.url),function(error){  
            alert(JSON.stringify(error))  
        },'com.tmall.wireless');  
    }  
    function openJD(data){//已经支持安卓和ios  
        plus.runtime.openURL('openApp.jdMobile://virtual?params=' + encodeURIComponent('{"des":"m","url":"' +data.url+ '","category":"jump"}'),function(error){  
            alert(JSON.stringify(error))  
        },'com.jingdong.app.mall');  
    }  
    function openPDD(data){//已经支持安卓和ios  
        if(isAndroid){  
            plus.runtime.openURL("pinduoduo://"+data.url.replace("https://",""),function(res){  
                alert(JSON.stringify(res));  
            },'com.xunmeng.pinduoduo');  
        }else{  
            plus.runtime.launchApplication({action:"pinduoduo://com.xunmeng.pinduoduo/"+data.url.replace(/https:\/\/.*\//,"")},function(ret){  
                alert(JSON.stringify(ret));  
            });  
        }  
    }

【建议】建议HBuilderX左侧项目管理能增加项目分类文件夹功能，不然项目太多看着乱，有测试的，有正式的。

<button type="primary" open-type="getAuthorize" scope="userInfo" class="grace-button my-border-radius" @getAuthorize="alyuserinfodata" @error="onAuthError" >
支付宝一键登录
</button>

因为事件大小写问题导致不回调请注意
onGetAuthorize="alyuserinfodata" onError="onAuthError" 改为

@getAuthorize="alyuserinfodata" @error="onAuthError"

任意浏览器打开网址栏输入chrome://inspect 点击inspect fallback即可

其实CSS远比我们想象的复杂，有可能CSS的任何一点都可以拿出来写一篇很大篇幅的文章，这一点经常可以看到。所以CSS并不局限于他的名字，级联样式表，更像是一个世界，一个网页不可缺少的重要组成部分。
围绕着上面的CSS系统，当然上图可能不够全面，但也可以说明CSS的主要组成部分。先简单说一下一些未知的隐藏属性，先留下一个大概的印象，扩展一下我们的CSS学习体系，然后再慢慢深入。
本文也是作者结合《CSS世界》《CSS权威指南》《CSS秘密》第一、二卷对一些自己平时忽略或者根本不知道的地方的总结，来源于在浏览器中轻敲代码的实践。
本文也是前端知识体系建设的一部分。详见github:https://github.com/qiugu/the-road-to-front-end-learning。
文字排版。

先说字体。声明字体很简单，font-family语句就完成了，但有时我们可能会看到这样的语句:
h1{
font-family:-apple-system，system-ui，SegoeUI，Roboto，Ubuntu，Cantarell，NotoSans，sans-serif，BlinkMacSystemFont，HelveticaNeue，PingFangSC，HiraginoSansGB，MicrosoftYaHei，Arial
{}
这么大的弦有什么含义？事实上，只有知道这个font-faimly属性中有两种类型的值，一种是字体名称，另一种称为字体系列，您才能理解它。顾名思义，字体族是所有字体的分类。在CSS世界中，一般有以下字体系列:
衬线字体。意思是笔画的开始和结束都有额外的修饰，笔画粗细不同。
无衬线字体。就是没装修，笔画粗细都一样。
等宽字体。字形的宽度相等。
草书字体。模仿人类笔迹的字体。
幻想字体。没有属于以上四种字体的其他字体。
因此，上述声明中的无衬线和Helvetica指的是字体系列，前者是衬线字体，后者是无衬线字体。然后意思就很清楚了。如果系统中有前置字体，使用前置字体；如果没有，尽量使用背面衬线字体；如果没有，继续在back语句中搜索可用的字体。
继承。
一般文本类的属性是可以继承的，比如颜色、字号、字体系列等等。
有些属性是不能继承的，比如边框、填充、边距、背景等。其实很容易理解为什么这些属性不能继承，因为一旦这些属性可以继承，整个布局都会受到影响。例如，我们在父元素上添加了边框，但是它的子元素和子元素都继承了边框，所以我们必须编写更多的代码来消除继承的影响。这个结果肯定不是CSS设计的初衷。
行高.
首先，需要明确的是行高适用于内联元素或内联块级元素。我们声明块级框上的行高实际上适用于块级框的内容，因此通常可以看到它是这样使用的:
本文来源:标梵互动(https://www.biaofun.com/)

这三种类型中，简单选择排序、树型选择排序和堆排序是其中最简单的一种，也是最容易理解的一种。
观念。
SelectionSort:SelectionSort是一个简单而直观的排序算法。正如你所想的那样，直接从待排序的数组中选择一个最小(或最大)的数，每次取一个最小的数，然后将数组的次序放到新数组中，直到全部取完。
步。
最小(大)元素位于未排序的序列中，存放在已排序序列的开始位置。
继续从未排序的元素中查找最小(大)元素，然后将其放置到已排序的序列的结尾。
如此等等，直到所有的元素都被排序。

实现
方式一
> <?php

class SelectionSort
{
/**

• 主运行方法
• @return void
  */
  public static function main(): void
  {
  $random = self::random();
  $array = self::sort($random);
  print_r($array);
  }
  /**
• 选择排序
• @param array $array

• @return array
  */
  public static function sort(array &$array): array
  {
  $count = count($array);
  for ($i = 0; $i < $count; $i++) {
  $position = $i;
  for ($j = $i + 1; $j < $count; $j++) {
  if (self::compare($array[$position], $array[$j]) > 0) {
  $position = $j;
  }
  }

      if ($position !== $i) {  
          self::swap($array[$position], $array[$i]);  
      }  
  }  
  
  return $array;  

  }

  /**

• 比较大小
• @param int $x
• @param int $y

• @return int
  */
  private static function compare(int $x, int $y): int
  {
  return $x <=> $y;
  }

  /**

• 互换位置
• @param int $x
• @param int $y

• @return void
  */
  private static function swap(int &$x, int &$y): void
  {
  if ($x !== $y) {
  $t = $x;
  $x = $y;
  $y = $t;
  }
  }

  /**

• 生成随机数组
• @param int $low
• @param int $high
• @param int $num

• @return array
  */
  private static function random(int $low = 1, int $high = 9999, int $num = 10): array
  {
  $num = $num > $high ? $high : $num;
  $range = range($low, $high);
  $array = array_rand(array_flip($range), $num);
  shuffle($array);

  return $array;  

  }
  }

SelectionSort::main();

// 结果
Array
(
[0] => 312
[1] => 1124
[2] => 1267
[3] => 1884
[4] => 2609
[5] => 4177
[6] => 4773
[7] => 7728
[8] => 8237
[9] => 8963
)
方式二
树形选择排序 - Tree Selection Sort：又名锦标赛排序，是一种按照锦标赛的思想进行选择排序的方法

方式三
堆排序 - Heap Sort：是指利用堆这种数据结构所设计的一种排序算法。它是选择排序的一种。可以利用数组的特点快速定位指定索引的元素。堆分为大根堆和小根堆，是完全二叉树。大根堆的要求是每个节点的值都不大于其父节点的值。在数组的非降序排序中，需要使用的就是大根堆，因为根据大根堆的要求可知，最大的值一定在堆顶

本文来源:标梵互动(https://www.biaofun.com/)

如果授权回调页和redirect_uri都设置成一样的之后还是分享失败，看看imageUrl是不是使用本地路径。如果不是改成本地路径试试。

Q1: MacOSX Big Sur 11，HBuilderX启动后，CPU使用率过高，电脑发热

部分有独显的MacBook，老版HBuilderX启动后，CPU使用率过高，电脑发热、发烫，风扇呼呼转。

解决方法：

更新到HBuilderX最新版本

Q2: 老HBuilder在MacOSX Big sur 11上 启动就退出。

老HBuilder已停止维护数年，建议使用HBuilderX。下载地址：https://dcloud.io/hbuilderx.html

群晖NAS有一个叫Cloud Sync的插件，可以添加百度云账号，将百度云的文件同步到本地NAS。配置好同步后，将官方提供的SDK包保存到相应文件夹，它就会实时同步到你的NAS，不用再去盯着几十KB的下载进度。
前提是，官方出新SDK你及时去保存到自己的百度网盘