方案：使用微信提供的url link方法 生成短链接 发送给用户 用户点击短链接会跳转到微信提供默认的默认页面 进而打开小程序
场景假设：经理人发布一条运输任务 司机收到短信点击打开小程序接单

实现：

• 经理人发布时点击发布按钮 h5调用服务端接口 传参服务端要跳转的小程序页面 所需要参数

• 服务端拿access_token和前端传的参数 加链接失效时间 调用微信api

api.weixin.qq.com/wxa/generat… 得到链接 如wxaurl.cn/ow7ctZP4n8v 将此链接发送短信给司机

• 司机点击此链接 效果如下图所示：打开小程序 h5写逻辑跳转指定页面
  

自己调postman调微信api post方式 接口： api.weixin.qq.com/wxa/generat…

传参

{ 
        "path": "pages/index/index",\
    "query": "?fromType=4&transportBulkLineId=111&isLinkUrlCome=1&SCANFROMTYPE=143&lineAssignRelId=111",\
      "env_version": "trial",\
      "is_expire": true,\
    "expire_time": "1638855772"\
}

返参

{
      "errcode": 0,
    "errmsg": "ok",
    "url_link": "https://wxaurl.cn/GAxGcil2Bbp"
}

url link说明文档： developers.weixin.qq.com/miniprogram…
url link方法需要服务端调用 调用接口方式参考： developers.weixin.qq.com/miniprogram…

作者：懿小诺
来源：https://juejin.cn/post/7037356611031007239

收起阅读 »

🛫 前端自动化部署：借助Gitlab CI/CD实现

🌏 概论

传统的前端部署往往都要经历：本地代码更新 => 本地打包项目 => 清空服务器相应目录 => 上传项目包至相应目录几个阶段，这些都是机械重复的步骤。对于这一过程我们往往可以通过CI/CD方法进行优化。所谓CI/CD，即持续集成/持续部署，以上我们所说的步骤便可以看作是持续部署的一种形态，其更详细的解释大家可以自行了解。

Jenkins、Travis CI这些都是可以完成持续部署的工具。除此之外，Gitlab CI/CD也能很好的完成这一需求。下面就来详细介绍下。

🌏 核心工具

GitLab Runner

GitLab Runner是配合GitLab CI/CD完成工作的核心程序，出于性能考虑，GitLab Runner应该与Gitlab部署在不同的服务器上（Gitlab在单独的仓库服务器上，GitLab Runner在部署web应用的服务器上）。GitLab Runner在与GitLab关联后，可以在服务器上完成诸如项目拉取、文件打包、资源复制等各种命令操作。

Git

web服务器上需要安装Git来进行远程仓库的获取工作。

Node

用于在web服务器上完成打包工作。

NPM or Yarn or pnpm

用于在web服务器上完成依赖下载等工作（用yarn,pnpm亦可）。

🌏 流程

这里我自己用的是centOS环境：

1. 在web服务器上安装所需工具

（1）安装Node

# 下载node包

wget https://nodejs.org/dist/v16.13.0/node-v16.13.0-linux-x64.tar.xz



# 解压Node包

tar -xf node-v16.13.0-linux-x64.tar.xz



# 在配置文件（位置多在/etc/profile）末尾添加：

export PATH=$PATH:/root/node-v16.13.0-linux-x64/bin



# 刷新shell环境：

source /etc/profile



# 查看版本（输出版本号则安装成功）：

node -v



#后续安装操作，都可通过-v或者--version来查看是否成功

npm已内置在node中，如要使用yarn或，则可通过npm进行全局安装，命令与我们本地环境下的使用命令是一样的：

npm i yarn -g

#or

npm i pnpm -g

（2）安装Git

# 利用yum安装git

yum -y install git



# 查看git版本

git --version

（3）安装Gitlab Runner

# 安装程序

wget -O /usr/local/bin/gitlab-runner https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-linux-amd64



# 等待下载完成后分配权限

chmod +x /usr/local/bin/gitlab-runner



# 创建runner用户

useradd --comment 'test' --create-home gitlab-runner --shell /bin/bash



# 安装程序

gitlab-runner install --user=gitlab-runner --working-directory=/home/gitlab-runner



# 启动程序

gitlab-runner start



# 安装完成后可使用gitlab-runner --version查看是否成功

2. 配置Runner及CI/CD

基本的安装操作完成后，就是最核心的阶段：Runner与CI/CD的配置。

（1）配置Gitlab Runner

首先打开待添加自动部署功能的gitlab仓库，在其中设置 > CI/CD > Runner中找到runner配置信息备用：

在web服务器中配置runner：

gitlab-runner register



>> Enter the GitLab instance URL (for example, https://gitlab.com/):

# 输入刚才获取到的gitlab仓库地址

>> Enter the registration token:

# 输入刚才获取到的token

>> Enter a description for the runner:

# 自定runner描述

>> Enter tags for the runner (comma-separated):

# 自定runner标签

>> Enter an executor: docker-ssh, docker+machine, docker-ssh+machine, docker, parallels, shell, ssh, virtualbox, kubernetes, custom:

# 选择执行器，此处我们输入shell

完整示例：

（2）配置.gitlab-ci.yml

.gitlab-ci.yml文件是流水线执行的流程文件，Runner会据此完成规定的一系列流程。

我们在项目根目录中创建.gitlab-ci.yml文件，然后在其中编写内容：

# 阶段

stages:

  - install

  - build

  - deploy



cache:

  paths:

    - node_modules/



# 安装依赖

install:

  stage: install

  # 此处的tags必须填入之前注册时自定的tag

  tags: 

    - deploy

  # 规定仅在package.json提交时才触发此阶段

  only:

    changes:

      - package.json

  # 执行脚本

  script:

    yarn



# 打包项目

build:

  stage: build 

  tags: 

    - deploy

  script: 

    - yarn build

  # 将此阶段产物传递至下一阶段 

  artifacts: 

    paths:

        - dist/



# 部署项目

deploy:

  stage: deploy

  tags: 

    - deploy

  script: 

    # 清空网站根目录，目录请根据服务器实际情况填写

    - rm -rf /www/wwwroot/stjerne/salary/*

    # 复制打包后的文件至网站根目录，目录请根据服务器实际情况填写

    - cp -rf ${CI_PROJECT_DIR}/dist/* /www/wwwroot/stjerne/salary/

保存并推送至gitlab后即可自动开始构建部署。

构建中可在gitlab CI/CD面板查看构建进程：

待流水线JOB完成后可前往页面查看🛫🛫🛫🛫🛫

作者：星始流年
来源：https://juejin.cn/post/7037022688493338661

收起阅读 »

近期，首届HarmonyOS开发者创新大赛正式落下帷幕。大赛共历时5个月，超过3000支队伍的10000多名选手参赛，25000多位开发者参与了大赛学习，最终23支参赛队伍斩获奖项，产出了多款有创新、有创意、有价值的优秀作品。其中由“Labo Lado儿童艺术创想”团队打造的《Labo涂鸦鸿蒙亲子版》就是其中之一，其创造性地通过HarmonyOS分布式技术，实现了多设备下的亲子互动涂鸦功能，最终摘得大赛一等奖。

在很早以前，“Labo Lado儿童艺术创想”团队就做过一款涂鸦游戏的应用，该应用可以让孩子和父母在一个平板或者手机上进行绘画比赛，比赛的方式就是屏幕一分为二，两人各在设备的一边进行涂鸦。这种方式虽然有趣，但是对于绘画而言，屏幕尺寸限制了用户的发挥和操作。因此团队希望这类玩法能通过多个设备完成，于是他们研究了ZeroConf、iOS的Multipeer Connectivity、Google Nearby等近距离互联的技术, 结果发现这些技术在设备发现和应用拉起方面实现的都不理想，尤其是当目标用户是儿童的情况下，操作起来不够简便也不易上手。

HarmonyOS的出现给团队带来了希望。他们发现HarmonyOS的分布式技术有着很大的应用潜力，这项技术让设备的发现和应用拉起变的非常的简单自然，互联的过程也很流畅，很好地解决了单机操作的限制，让跨设备联机功能能够非常容易地实现。此外，HarmonyOS的开发也给团队留下了很深刻的印象，以往繁琐的开发步骤，在 HarmonyOS 中仅需几个配置、几行代码即可完成，无需花费太多精力。在《Labo涂鸦鸿蒙亲子版》里面的5个分布式玩法的开发只用了团队一名开发者不到两个月的时间，其中还包括了学习上手、解决文档不全和各种疑难问题的过程。

以下是“Labo Lado儿童艺术创想”团队基于HarmonyOS的分布式开发关键技术的简单分享：

一、分布式技术实践

HarmonyOS的分布式能力是在系统层面实现的，在设备双方同属一个局域网的情况下，设备都可以快速的发现和进行流畅的通讯。下面将从HarmonyOS设备的发现、应用的拉起、应用通讯和双向通讯几个部分来进行分享。

1、设备的发现

假设设备A想要邀请另外一个设备B加入，AB任何一方都无需启动特别的广播服务，只要发起方设备A在应用内调用设备发现代码，就可以列出附近符合条件可用的的设备。

以下是获取设备列表的示例代码：

public static List<DeviceInfo> getRemoteDevice() {

List<DeviceInfo> deviceInfoList = DeviceManager.getDeviceList(DeviceInfo.FLAG_GET_ONLINE_DEVICE);

return deviceInfoList;

}

列出设备之后，用户就可以通过设备名选择想要邀请的设备了。

（左侧设备A发现右侧名为“ye”的设备B的界面展示）

2、应用的拉起

设备A邀请了设备B之后，如果设备B上应用没启动,设备A可直接通过调用startAbility方法来拉起设备B上的应用。双方应用都启动了之后，就可以进行RPC通讯了。如果需要事先检查设备B上的应用是否已经启动或者是否在后台，可通过在应用中增加一个PA来实现。在拉起之前，设备A先连接设备B的应用中的PA可以实现更复杂精准的远程应用启动控制。

3、应用通讯

在应用中启动一个PA，专门用作通讯的服务器端。当设备B的应用被拉起之后，设备A就会通过connectAbility与设备B的PA进行连接，通讯采用RPC方式实现，并使用IDL定义通讯接口。

4、双向通讯

RPC的通讯方式使用简单，但是只能支持单向通讯。为了实现双向通讯，可在设备A与设备B发起建立连接成功之后，再让设备B与设备A发起建立一个连接，用两个连接实现了双向通讯。下面是这两个连接建立过程的示意时序图：

在设备A与设备B建立连接的时候，设备A必须将自己的DeviceId发送给设备B,然后设备B才可以主动发起一个与设备A的连接，获取当前设备的DeviceId方法如下：

KvManagerFactory.getInstance().createKvManager(new KvManagerConfig(this)).getLocalDeviceInfo().getId()

应用中,FA主要实现了界面层逻辑，PA部分用做数据通讯的服务端。为了防止拉起应用导致用户当前面的操作被中断，可通过PA来查询当前FA的状态，如果FA已经启动了，就跳过拉起，直接进行下一步操作即可。

二、数据接口与数据结构定义

使用了IDL定义了两个通用的接口，分别用来进行异步和同步调用：

int sendSyncCommand([in] int command, [in] String params);

void sendAsyncCommand([in] int command, [in] String params, [in] byte[] content);

大部分情况下，远程调用大部分都通过同步的方式进行，用户之间的绘画数据通过异步接口传输，数据在用户绘制的时候采集，每50ms左右发送一次，这个频率可以大概保证用户视觉上没有卡顿，而又不至于因为接口过度调用导致卡顿或者耗电量过大。采集的绘画数据的数据结构大致如下：

enum action //动作，表示落笔、移动、提笔等动作

int tagId //多点触摸识别标记

int x //x坐标

int y //y坐标

enum brushType //笔刷类型

int brushSize //笔刷大小

enum brushColor //笔刷颜色

int layer //图层

这款应用是支持多点触摸的，所以每个触摸点在落笔的的时候，都使用了tagId进行标记。这些数据除了通讯外，还会完整地保存在文件中，这样用户就可以通过应用内的播放功能播放该数据，回看绘画的整个过程。

三、教程录制与曲线平滑

1、教程制作

这款产品的特色之一是教程是动态的，用户可以自己拼装或者通过游戏生成教程角色。目前应用内置六种教程。这些教程预先由设计师在photoshop中画好并标记各个部位，然后再通过专门的photoshop脚本导出到教程录制应用中，再由设计师按部位逐个进行临摹绘制，绘制完成，应用会将设计师的绘制过程数据保存为json文件，通过将这些json的文件里的部位互换，我们就实现了用户自己拼装教程的功能了。

2、曲线平滑

绘制过程，为了让用户绘制的曲线更加平滑，采用二次贝塞尔曲线算法进行差值（Quadratic Bezier Curve），该算法简单效率也非常不错：

public Point quadraticBezier(Point p0, Point p1, Point p2, float t) {

Point pFinal = new Point();

pFinal.x = (float) (Math.pow(1 - t, 2) * p0.x + (1 - t) * 2 * t * p1.x + t * t * p2.x);

pFinal.y = (float) (Math.pow(1 - t, 2) * p0.y + (1 - t) * 2 * t * p1.y + t * t * p2.y);

return pFinal;

}

基于HarmonyOS的分布式特性，《Labo涂鸦鸿蒙亲子版》完成了一次已有应用的自我尝试和突破，大大的增加了用户在使用过程中的乐趣，为用户带来了全新的跨设备亲子交互体验，“Labo Lado儿童艺术创想”团队在未来将与更多的HarmonyOS开发者一起，为用户创作出更多更有趣的儿童创造类应用。

近一段时间以来，HarmonyOS 2的发布吸引了广大开发者的关注。作为一款面向万物互联时代的智能终端操作系统，HarmonyOS 2带来了诸多新特性、新功能和新玩法，等待开发者去探索、去学习、去实践。也欢迎广大开发者继续发挥创造力和想象力，基于HarmonyOS开发出更多有创新、有创意、有价值的作品，打造出专属于万物互联时代的创新产品。

收起阅读 »

前段时间下载了环信uni-app Demo，启动HBuilderX,运行到了小程序,但是死活打不开页面不知道什么原因。开发者工具打开了但是页面进不去。
不是什么大问题，但是也很耽误时间，Hello world，连Hello都Hello不出来，最后研究了半天才解决了这个问题下面是解决方法：
除了查看对应版本和开启端口外还需注意，因为微信开发者工具是和对应的微信账号绑定的，所以需要设置对应账号的AppID才行，如果使用的是别人的需要用自己的AppID，但是启动别人的项目只用在，mainifest.json下的微信小程序配置，找到微信小程序APPID 删除掉然后再重新启动运行就可以了。




由于大小限制上传的图片是个压缩包，大家不清楚位置的可以下载下来瞜一眼。
  收起阅读 »