开发笔记 第61页

来源： 最强开源低代码平台 – Appsmith 功能介绍与使用体验 – 知乎

Appsmith 背景介绍

Appsmith 成立于 2019 年，是一款开源低代码框架。这两年发展迅猛，是现在 GitHub 上最火的低代码开发平台（18k star），目前处于正式发行阶段。Appsmith 主要用于构建管理面板、内部工具和仪表板等，允许拖放 UI 组件来构建页面，通过连接到任何 API、数据库或 GraphQL 源，并使用 JavaScript 语言编写逻辑，可以在短时间内创建内部应用程序。这种开发模式仅需了解一些基本的 JavaScript，在代码方面没有抽象层或术语需要学习，因而广受开发人员的好评。

Appsmith 背后的理念来自创始人 Mohan 和 Nayak，他们意识到这是一个可行项目后，协力把它推向了市场。在这个过程中，他们决定不会将其授权为专有服务并出售服务订阅，而是开源该工具，以便任何人都可以使用它。

开发人员的时间是非常宝贵的，Nayak 说：Appsmith 将开发人员时间减少了 90%，框架本身为您承担了很多没必要的繁重工作。因此，它不仅减少了您需要的团队规模，还使规模较小的开发人员团队更有效率。 (“Low-code platforms like Appsmith reduce the amount of developer time that you need by like 90% because the framework itself is doing a lot of heavy lifting. So not only does it reduce the size of a team you need, it makes even a smaller team of developers more efficient.”)

Appsmith 具体介绍

组件

Appsmith 使用现成的组件构建工作流，将表格、图表、表单等常见元素直接拖入应用程序，包括文本、表单、输入、按钮、表格、图像、复选框、开关、单选按钮、日期选择器、下拉列表、文件选择器、容器、地图、模式、富文本编辑器、选项卡和视频等。

数据源

Appsmith 可以使用 15+ 种 DB、REST API 或 GraphQL 作为数据源，同时支持 OAuth 2.0 等多种鉴权协议。通过配置数据源以及编写该数据源所对应的查询语句，可以做到对与底层数据的增、删、改、查工作。

JavaScript

许多平台在需要添加更高级功能时创建了自己的 DSL（领域特定语言）或抽象层，这种方法很难学习上手且功能有限。Appsmith 巧妙的解决了这个困难，操作者能够直接在应用程序的任何地方插入 JavaScript，可以实现多个查询的编排以及数据之间的 ETL (Extract-Transform-Load) 操作。

托管与免费

由于 Appsmith 是一个开源项目，因此代码可以免费使用，但它必须托管在某个地方。Appsmith 提供了免费的社区版自托管服务，同时他们在今年年初推出了部分免费的商业云托管服务，此外一个企业版正在制定中，即将推出。

关于如何在 Docker 上部署自己的 Appsmith 服务器，可以参考 Docker Setup

应用发布与分享

您可以进行多次编辑和保存，并在编辑器中查看结果，应用程序更改后会自动保存，并实时反映在编辑器中，单击「DEPLOY」后 Appsmith 会将这些更新推送到应用程序的实时版本。

Appsmith 按组织对应用程序进行分组，并通过这些组与其他用户共享创建的应用程序。当您与某人共享应用程序时，实际上是在共享该组织中的所有应用程序 —— 因此务必将确认当前组织下的所有应用程序以及新用户所分配的角色。

安全与加密

Appsmith 应用程序默认是安全的，所有连接都经过 TLS 加密，凭据使用 AES-256 加密，防止数据泄露，具有可靠安全的加密传输。

开源与社区

Appsmith 不采用寻常低代码解决方案——它是完全开源的，这意味着任何人都可以在 GitHub 上下载源代码，在本地（或第三方云主机上）安装、部署，以及后续的二次开发。Appsmith 的开发团队也非常欢迎对社区做出贡献的使用者，感兴趣的话，您也可以创建自定义小组件，通过 GitHub 提交自己的功能和错误修复，或者是在 Discord 中与他们讨论新的想法和建议。

Appsmith 团队主要通过几个渠道与社区进行交流：

• Github 的 Issues 与 PR：https://github.com/appsmithorg/appsmith
• Discord：https://discord.com/invite/rBTTVJp
• 官方论坛：https://community.appsmith.com
• Intercom：编辑器和文档中的聊天弹出窗口

Discord 非常活跃，Appsmith 非常积极地联系社区寻求反馈，每周四都会举行现场社区电话会议，演示新的或即将推出的功能并且回答社区的问题。

Appsmith 总体评价

在之前的文章里提到过（「为什么说低代码是内部系统开发的未来趋势？」「深度解读：2021 海外企业内部系统现状」），低代码的基本理念是将日常活动中的艰巨工作从中抽身出来，以便开发人员可以专注于高阶业务逻辑，提高公司和开发者的效率。Appsmith 凭借低代码 UI 开发器、大量数据源连接器、自定义 JavaScript、开源许可证和蓬勃发展的社区，在低代码开发市场领域占据独特的地位。

Appsmith 使用预构建的 UI 组件创建页面，再连接到数据源与 Appsmith 集成，包括 REST API、MySQL、Postgres、MongoDB 和其他数据库，然后创建和执行查询，在 SQL 或 JS 编辑器中编写查询和业务逻辑，将 UI 绑定到您的查询响应或业务逻辑中，最后单击便可部署您的应用并邀请组织中的其他用户一起合作。通过这些步骤，您可以为复杂的多步骤工作流创建简单的 CRUD 应用程序，使开发与任何数据源连接的 UI 变得非常容易，也可以通过在任何地方编写 JS 来自定义应用程序。

不过我们在亲身体验了 Appsmith 一段时间，也利用它开发了一些内部系统后，也发现该平台的一些局限性：

1. 当前的开源代码在可读性、可维护性等方面还有待加强，二次开发门槛很高。
2. 系统稳定性方面仍有欠缺，部分组件或者整个应用可能会无响应。
3. 关于企业功能部分还有很多需要完善的地方，例如当前权限系统设计过于简单，无法适配复杂业务场景。

码匠与 Appsmith 的比较

码匠在充分参考了 Appsmith、Retool、JetAdmin 等多款海外知名低代码平台的设计理念同时，针对国内用户使用习惯做了大量优化，UI 界面设计更加适合国内场景，并整合了多款国内数据源，包括 飞书、企业微信、钉钉、阿里云 OSS 等，不仅如此，码匠还提供了国内业务场景下常见的租户管理、更加细粒度的权限控制、审计日志等功能，为您的企业信息安全保驾护航。在系统稳定性方面，码匠在系统快速迭代的同时高度重视系统的健壮性与可靠性，设计与开发过程中充分考虑各种异常场景，力求面对各种异常与突发情况仍然能够提供持续、可靠的服务能力。

码匠目前提供了云端在线版本和私有化部署方案，欢迎您去官网（https://majiang.co/）亲自体验，如果希望进一步与我们讨论码匠的方方面面，欢迎与我们联系～

玩转WordPress上的数据库缓存插件Redis Object Cache

来源： 玩转WordPress上的数据库缓存插件Redis Object Cache – 知乎

为了提升网站速度，降低MySQL的负载，通常都需要将数据缓存到内存中，常用的就是memcached、redis，但是相对来说Redis更符合需求，可以支持非常复杂的数据类型，而且也更通用。于是我就选择了Redis，而WordPress上最好的redis缓存插件就是Redis Object Cache了，直接在“插件>安装插件”搜索名称安装即可。

Redis如何通过命令行搭建我暂且不谈，因为宝塔可以直接安装redis，如果你Redis都是一台机子的话，安装之后可以到php那里装redis插件，这个php的redis插件是给你缓存session用的。

一般来讲，安装插件后，直接点那个Enable Object Cach，就可以跑了。

那么问题来了，假如有的小伙伴有钱，有多台服务器怎么办呢？

啊这…虽然我穷的一批，买服务器都只能天天蹭优惠，每台服务器都不在一个机房，但是我测试了一下，还是可以使用的。

虽然Redis Object Cache的控制页面没给我们出选择题和填空题，但是我们可以直接把卷子改了。

有两种方法：

第一种：爷直接去wp-config.php改

在这个PHP文件的最后，添加如下代码：

// Redis Object Cache真麻烦嘤嘤嘤
define('WP_REDIS_HOST',['127.0.0.1','192.168.0.6']);
define('WP_REDIS_SERVERS', [
'tcp://127.0.0.1:6379?database=6&alias=master',
'tcp://192.168.0.6:6379?database=6&alias=slave-01',
]);

当然，这个可以连多个redis主机，不过这里需要注意WP_REDIS_SERVERS的alias的两个名词必须是master和slave-01这种形式。

第二种：玄学问题的究极解决方法

第一种方法我是真没搞懂为什么在我常用的服务器上不行，但是拿到我闲置得沾灰的服务器上却可以，估计是php本身的redis扩展的问题，也有可能是别的问题。

由于Enable Object Cach的时候，系统会将
/wp-content/plugins/redis-cache/includes/ 插件目录下的 object-cache.php 文件复制到/wp-content/目录下，所以启用之前在这个php文件改下代码，大概这段代码长这样：

$parameters = array(
'scheme' => 'tcp',
'host' => '127.0.0.1', 
'port' => 6379,
'database' => 0,
'password' => '123',
'timeout' => 1,
'read_timeout' => 1,
'retry_interval' => null,
);

请注意了，这个插件的文件夹根目录有一个叫object-cache.php的玩意，眼睛别看错了，然后傻乎乎的跑过来跟我说我配置失败了你能帮帮我吗？我只帮老奶奶过马路，你要是问这种问题就给我一边凉快去。

关于host那里的多值的php写法应该是支持的，但是我忘了怎么写了（实际上是懒得测试），另外如果要改object-cache.php里面的东西，记得把插件先关了，把wp-content目录下的副本删了，再在原插件里面改，再去启用。

另外，为了防止某些二货的插件自动升级了，配置失效了，找到我对我说你能帮帮我吗，所以我建议最后记得在wp里面把插件自动更新关了，关闭自动更新关闭代码如下：

function remove_update_notifications( $value ) {
if ( isset( $value ) && is_object( $value ) ) {
	unset( $value->response[ 'redis-cache/object-cache.php' ] );
}
return $value;
}

这里的redis-cache是插件目录名，object-cache.php是主文件名，如果有这几行代码，如果要禁用其他的插件自动更新，直接用unset那行代码复制并改一下往下面加。

总结

wp配置redis还是很简单的，不过如果redis没password就留空或者直接把代码删了。

来源： ChatGPT 怎么用最新详细教程-新手小白一看就会 – 掘金

来源： (1条消息) 苹果cms如何开启Redis高速缓存提升访问速度_苹果cms播放器缓冲设置_wanyizhilu的博客-CSDN博客

由于采集的影片数据过多,如果不设置缓存,可能会造成网站访问缓慢,或者CPU消耗过高。随着用户访问量的上升，添加缓存设置是有这个必要的，众所周知，redis作为一款非常优秀的缓存工具，非常适合苹果cmsv10。

redis的优点：

redis支持简单的k/v类型的数据，还支持list，set，zset，hash等类型

redis支持主从模式应用

redis支持数据持久化，可以将内存中的数据保持在磁盘中，重启的时候可以再次加载进行使用

redis单个value的最大限制是1GB，memcached是1MB

下面的教程适合在宝塔面板下设置完成：

1，来到宝塔面板>>软件商店：安装Redis,安装好即可 其余不用管。

2，然后再找到你的网站环境所使用的php版本点击设置。

3，进入你所使用的php版本设置,安装扩展,安装redis缓存器

4，进入苹果CMS后台,网站参数设置-性能优化,缓存方式设置为Redis,IP：127.0.0.1端口：6379然后测试连接 连接成功代表能正常使用该缓存,然后开启：数据缓存/页面缓存（如下图）

5，最后一步非常重要，那就是重载php配置，重启网站才能生效，小伙伴们别忘啦！
————————————————
版权声明：本文为CSDN博主「wanyizhilu」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/wanyizhilu/article/details/104573761

来源： (1条消息) 最新获取ip地址方法，搜狐的已经不能用了_weixin_47411869的博客-CSDN博客

最近开发过程中，搜狐获取ip地址的方法被禁用了，百度了一波，最终找到下面这个，有需要的朋友拿走不谢哦

//获取IP
fetch(‘https://api.ipify.org?format=json’)
.then(res => res.json())
.then(data => {
console.log(data, “dataip”)
var Ip = data.ip
localStorage.setItem(‘Ip’, Ip)
console.log(localStorage.getItem(‘Ip’, Ip))
})`
————————————————
版权声明：本文为CSDN博主「weixin_47411869」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_47411869/article/details/128289914

来源： SQL Server中使用msdb数据库的存储过程sp_delete_backuphistory和sp_delete_database_backuphistory来删除备份和恢复历史数据 – PowerCoder – 博客园

根据微软文档对sp_delete_backuphistory存储过程的介绍，SQL Server在每次备份和恢复数据库后，会向msdb系统数据库的备份和恢复历史表写入数据，如果SQL Server经常要做频繁的备份和恢复操作，会造成msdb系统数据库逐渐变大，所以微软建议定期调用msdb数据库的存储过程sp_delete_backuphistory来删除msdb系统数据库中备份和恢复历史表的内容：

EXEC msdb.dbo.sp_delete_backuphistory @oldest_date = '12/20/2019'--删除msdb系统数据库中，2019年12月20日之前的备份和恢复历史表内容

详情可以查看：sp_delete_backuphistory

sp_delete_backuphistory存储过程是根据时间来删除备份和恢复历史表数据，我们还可以调用sp_delete_database_backuphistory存储过程来删除某一个数据库的备份和恢复历史表内容：

EXEC msdb.dbo.sp_delete_database_backuphistory @database_name = N'TestDB'--删除msdb系统数据库中，TestDB数据库的所有备份和恢复历史表内容

参考文献：

sp_delete_backuphistory
sp_delete_database_backuphistory

来源： (1条消息) SQL Server日志文件过大 大日志文件清理方法 不分离数据库_slimboy123的博客-CSDN博客

SQL Server日志文件过大 大日志文件清理方法 ，网上提供了很多分离数据库——〉删除日志文件-〉附加数据库 的方法，此方法风险太大，过程也比较久，有时候也会出现分离不成功的现象。下面的方式是不需要做数据库分离和附加操作的。

SQL 2008收缩清空日志方法：

1.在SQL2008中清除日志就必须在简单模式下进行，等清除动作完毕再调回到完整模式，一定必务要再改回完整模式，不然数据库就不支持时间点备份了。
1).选择数据库–属性—选项—恢复模式–选择简单。
2).收缩数据库后，再调回完整。
2.可以用命令直接操作

USE[master]
GO
ALTER DATABASE 要清理的数据库名称 SET RECOVERY SIMPLE WITH NO_WAIT
GO
ALTER DATABASE 要清理的数据库名称 SET RECOVERY SIMPLE –简单模式
GO
USE 要清理的数据库名称
GO
DBCC SHRINKFILE (N‘要清理的数据库名称_log‘ , 2, TRUNCATEONLY) –设置压缩后的日志大小为2M，可以自行指定
GO
USE[master]
GO
ALTER DATABASE 要清理的数据库名称 SET RECOVERY FULL WITH NO_WAIT
GO
ALTER DATABASE 要清理的数据库名称 SET RECOVERY FULL –还原为完全模式
GO

90多G的日志文件打开3分多钟清理完毕

注意：要清理的数据库名称_log为数据设置的逻辑名

————————————————
版权声明：本文为CSDN博主「slimboy123」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/slimboy123/article/details/54575592

来源： 封装一套几乎通用的WebSocket代码 – 简书

// 在Vue中使用，不需要可以去除以下引用
import Vue from 'vue'
import storage from 'store'

// 导出socket对象
export {
  socket
}

// socket主要对象
var socket = {
  websock: null,
  // 固定的WebSocket地址：此处是从env文件中读取socket地址，可以自行从其他config文件中读取或直接写死
  // 如需使用动态WebSocket地址，请自行作ajax通讯后扩展
  ws_url: process.env.VUE_APP_API_SOCKET_URL,
  // 开启标识
  socket_open: false,
  // 心跳timer
  hearbeat_timer: null,
  // 心跳发送频率
  hearbeat_interval: 5000,

  // 是否自动重连
  is_reonnect: true,
  // 重连次数
  reconnect_count: 3,
  // 已发起重连次数
  reconnect_current: 1,
  // 重连timer
  reconnect_timer: null,
  // 重连频率
  reconnect_interval: 3000,

  /**
   * 初始化连接
   */
  init: () => {
    if (!("WebSocket" in window)) {
      console.log('浏览器不支持WebSocket')
      return null
    }

    // 已经创建过连接不再重复创建
    if (socket.websock) {
      return socket.websock
    }

    socket.websock = new WebSocket(socket.ws_url)
    socket.websock.onmessage = function (e) {
      socket.receive(e)
    }

    // 关闭连接
    socket.websock.onclose = function (e) {
      console.log('连接已断开')
      console.log('connection closed (' + e.code + ')')
      clearInterval(socket.hearbeat_interval)
      socket.socket_open = false

      // 需要重新连接
      if (socket.is_reonnect) {
        socket.reconnect_timer = setTimeout(() => {
          // 超过重连次数
          if (socket.reconnect_current > socket.reconnect_count) {
            clearTimeout(socket.reconnect_timer)
            return
          }

          // 记录重连次数
          socket.reconnect_current++
          socket.reconnect()
        }, socket.reconnect_interval)
      }
    }

    // 连接成功
    socket.websock.onopen = function () {
      console.log('连接成功')
      socket.socket_open = true
      socket.is_reonnect = true
      // 开启心跳
      socket.heartbeat()
    }

    // 连接发生错误
    socket.websock.onerror = function () {
      console.log('WebSocket连接发生错误')
    }
  },

  /**
   * 发送消息
   * @param {*} data 发送数据
   * @param {*} callback 发送后的自定义回调函数
   */
  send: (data, callback = null) => {
    // 开启状态直接发送
    if (socket.websock.readyState === socket.websock.OPEN) {
      socket.websock.send(JSON.stringify(data))

      if (callback) {
        callback()
      }

      // 正在开启状态，则等待1s后重新调用
    } else if (socket.websock.readyState === socket.websock.CONNECTING) {
      setTimeout(function () {
        socket.send(data, callback)
      }, 1000)

      // 未开启，则等待1s后重新调用
    } else {
      socket.init()
      setTimeout(function () {
        socket.send(data, callback)
      }, 1000)
    }
  },

  /**
   * 接收消息
   * @param {*} message 接收到的消息
   */
  receive: (message) => {
    var params = JSON.parse(message.data)

    if (params.kind != 0) {
      console.log('收到服务器内容：', message.data)
    }

    if (params == undefined) {
      console.log("收到服务器空内容")
      return false
    }
    
      // 以下是接收消息后的业务处理，仅供参考

    // 被服务器强制断开
    if (params.kind != undefined && params.kind == 110) {
      socket.socket_open = false
      socket.is_reonnect = true

      // 被服务器踢掉
    } else if (params.kind == 99) {
      socket.socket_open = true
      socket.is_reonnect = false
      console.log("被挤下线 不做处理")
      return false
    } else if (params.kind == 'order_new') {
      console.log('有新的订单通知')
      var time = Date.parse(new Date()) / 1000
      params.timestamp = parseInt(params.timestamp)

      console.log(time - params.timestamp)

      // 测试环境不限制推送时间
      if (process.env.NODE_ENV == 'development') {
        // 小于半小时push和播放  大于半小时并且小于3天只push  大于3天不处理
        if ((time - params.timestamp) > 3600 * 24 * 3) {
          console.log('超过三天')
          return false
        }

        if ((time - params.timestamp) > 30 * 60 && (time - params.timestamp) < 3600 * 24 * 3) {
          console.log('超过半小时')
          return false
        }
      }

      // uniapp中可以使用$on和$emit来实现对应的业务处理

    } else if (params.kind == 'refund_created') {
      console.log('有新的退款订单')
      
    }

    if (params.kind == 'order_new' || params.kind == 'refund_created') {
      console.log('订单列表刷新')

    }
    
      // 自行扩展其他业务处理...
  },

  /**
   * 心跳
   */
  heartbeat: () => {
    console.log('socket', 'ping')
    if (socket.hearbeat_timer) {
      clearInterval(socket.hearbeat_timer)
    }

    socket.hearbeat_timer = setInterval(() => {
      const token = storage.get('Access-Token')
      var data = {
        kind: 0, //请求类型 kind 0 心跳包
        shop_id: Vue.prototype.$shop_id(false), //如果是商家 传当前店铺ID 否则可不传
        'API-Token': token, //用户的token
        'API-Source': 'MERCHANT', // MERCHANT  商家  CUSTOMER  顾客
      }
      socket.send(data)
    }, socket.hearbeat_interval)
  },

  /**
   * 主动关闭连接
   */
  close: () => {
    console.log('主动断开连接')
    clearInterval(socket.hearbeat_interval)
    socket.is_reonnect = false
    socket.websock.close()
  },

  /**
   * 重新连接
   */
  reconnect: () => {
    console.log('发起重新连接', socket.reconnect_current)

    if (socket.websock && socket.socket_open) {
      socket.websock.close()
    }

    socket.init()
  },
}

// 引入socket.js
import { socket } from '@/utils/socket'

// 发起连接
socket.init()

// 发送数据
socket.send({test:123}, () => {console.log('这是回调函数，发送test 123后执行')})

// 断开连接
socket.close()

// 重新连接
socket.reconnect()

来源： uni-app使用websocket（封装、心跳检测）_howcoder的博客-CSDN博客_uniapp websocket

前言：
最近想在uni-app的小程序中使用websocket进行双通讯的，而uni-app的插件市场中对websocket也做了很好的封装，例如：socket.io，但由于后端使用java的websocket，导致我在socket的url总是对应不上那边，所以无奈只能改成原生websocket，而uni-app中websocket很多文章都有介绍，然而直接使用时总是有或多或少的问题，所以对其进行了封装和修改，并且在项目中能正常使用，下面就直接上代码

封装websocket
class websocketUtil {
constructor(url, time) {
this.is_open_socket = false //避免重复连接
this.url = url //地址
this.data = null
//心跳检测
this.timeout= time //多少秒执行检测
this.heartbeatInterval= null //检测服务器端是否还活着
this.reconnectTimeOut= null //重连之后多久再次重连

try {
return this.connectSocketInit()
} catch (e) {
console.log(‘catch’);
this.is_open_socket = false
this.reconnect();
}
}

// 进入这个页面的时候创建websocket连接【整个页面随时使用】
connectSocketInit() {
this.socketTask = uni.connectSocket({
url: this.url,
success:()=>{
console.log(“正准备建立websocket中…”);
// 返回实例
return this.socketTask
},
});
this.socketTask.onOpen((res) => {
console.log(“WebSocket连接正常！”);
clearTimeout(this.reconnectTimeOut)
clearTimeout(this.heartbeatInterval)
this.is_open_socket = true;
this.start();
// 注：只有连接正常打开中 ，才能正常收到消息
this.socketTask.onMessage((res) => {
console.log(res.data)
});
})
// 监听连接失败，这里代码我注释掉的原因是因为如果服务器关闭后，和下面的onclose方法一起发起重连操作，这样会导致重复连接
// uni.onSocketError((res) => {
// console.log(‘WebSocket连接打开失败，请检查！’);
// this.is_open_socket = false;
// this.reconnect();
// });
// 这里仅是事件监听【如果socket关闭了会执行】
this.socketTask.onClose(() => {
console.log(“已经被关闭了”)
this.is_open_socket = false;
this.reconnect();
})
}

//发送消息
send(value){
// 注：只有连接正常打开中 ，才能正常成功发送消息
this.socketTask.send({
data: value,
async success() {
console.log(“消息发送成功”);
},
});
}
//开启心跳检测
start(){
this.heartbeatInterval = setTimeout(()=>{
this.data={value:”传输内容”,method:”方法名称”}
console.log(this.data)
this.send(JSON.stringify(this.data));
},this.timeout)
}
//重新连接
reconnect(){
//停止发送心跳
clearInterval(this.heartbeatInterval)
//如果不是人为关闭的话，进行重连
if(!this.is_open_socket){
this.reconnectTimeOut = setTimeout(()=>{
this.connectSocketInit();
},3000)
}
}
}

module.exports = websocketUtil
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
调用方式
1.单页面调用
引入
import wsRequest from ‘./static/js/websocket.js’
1
使用
new wsRequest(“ws://xxx:3100/connect/websocket”,5000)
1
2.全局调用
在main.vue页面中
//引入websocket文件
import wsRequest from ‘./static/js/websocket.js’
//开启websocket
let websocket = new wsRequest(“ws://xxx:3100/connect/websocket”,5000)
//挂载到全局
Vue.prototype.$socket = websocket
1
2
3
4
5
6
页面中调用
let data={value:”传输内容”,method:”方法名称”}
this.$socket.send(JSON.stringify(data));
1
2
注意事项
//在测试环境时url可以写成 ws://xxx:3100/connect/websocket
new wsRequest(“ws://xxx:3100/connect/websocket”,5000)

//发布体验版或正式版，url一定要写成 wss://xxx:3100/connect/websocket
new wsRequest(“wss://xxx:3100/connect/websocket”,5000)
1
2
3
4
5
除此之外，还需要在微信管理平台中对小程序的开发–>开发管理–>开发设置–>服务器域名 加入以下配置

————————————————
版权声明：本文为CSDN博主「howcoder」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42000816/article/details/113307548

来源： (1条消息) 报错from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/templateLoader.js_科技小栈的博客-CSDN博客_templateloader.js

今天在做uni-app的时候，遇到一个坑，自己说实话也太水了，

编译的时候一直出问题：

一直报错：

出现这个问题的原因是：

因为你在编写页面的时候，没有闭合view:

正确的写法：

最后就可以成功了的编译出来了：

关注我的公众号：