目录

作者: admin

EasyConnect Mac连接不上终极解决

EasyConnect

我的 Mac OS 从Mojave 升级到 Big Sur 后,EasyConnect 就无法使用了,一直显示“初始化失败,请重新安装”,通过多方面资料查询,得以解决,总结启动不起来的原因无非两种,以下为解决方案:

一、检查 csrutil 状态为 disabled

在终端中输入命令 csrutil status 检查状态是否为 disabled,如下图所示:

如果不为disabled,则需要进行如下操作解决:

进入到恢复模式才能更改 SIP 的开启状态 ,恢复模式需要重启系统,重启后看到苹果 Logo 的时候,按「Command + R」进入到恢复模式。

进入后打开「实用工具」-「终端」。

然后输入如下命令,关闭 「系统完整性保护(SIP)」,如果无误会输入命令运行后回到成功的提示。

csrutil disable

然后重启系统,重启之后你也可以再次输入如下命令确认 SIP 是否关闭

csrutil status

重启电脑后,打开「安全性与隐私」,发现在下面的这个地方点击「允许」后的列表,多出了 EasyConnect 的信息

运行包含关键字的“sangfor”的程序即可,如果没有以上选项,则不用管直接跳到本文第二解决方案。

二、检查 EasyConnect 启动项

可以使用卸载工具(比如:腾讯柠檬清理、App Cleaner & Uninstaller 之类的),本文以 App Cleaner & Uninstaller 为例:

在启动程序中搜索 sangfor 即可找到 EasyConnect 的守护进程,把它勾上,然后重启电脑即可。

微信小程序-上拉触底加载更多

效果

说明

微信小程序当用户滑动到页面的最底部时加载更多数据,可以通过微信小程序官方接口文档提供的 onReachBottom 事件函数来实现,可通过该事件监听用户是否已经拉到最底部,实现相应的界面显示效果、数据加载。

实现

在 Page 页面中的 js 文件中,加入以下代码:

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    wx.showNavigationBarLoading() //在标题栏中显示加载
    wx.showLoading({
      title: '加载中...',
    })
    //模拟加载
    setTimeout(function()
    {
      // complete
      wx.hideNavigationBarLoading() //完成停止加载
      wx.hideLoading(); //完成刷新中的提示
    },1500);
  },

备注:加载数据写法应该如下示例

this.setData({dataList: this.data.dataList.concat(res.datas)});

在我测试中,在 setData 之外写,是无效的。

微信小程序-下拉刷新

效果

实现步骤

一、在 Page 页面中的 json 文件中新增配置:

"enablePullDownRefresh": true,

二、在 Page 页面中的 js 文件中增加代码:

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    wx.showNavigationBarLoading() //在标题栏中显示加载
    wx.showLoading({
      title: '刷新中...',
    })
    //模拟加载
    setTimeout(function()
    {
      // complete
      wx.hideNavigationBarLoading() //完成停止加载
      wx.stopPullDownRefresh() //停止下拉刷新
      wx.hideLoading(); //完成刷新中的提示
    },1500);
  },

以上即可实现微信小程序下拉刷新效果。

Css3 display:flex 布局示例

一、flex-direction: (元素排列方向)

1.1 flex-direction:row (横向从左到右排列==左对齐)
1.2 flex-direction:row-reverse (与row 相反)
1.3 flex-direction:column (从上往下排列==顶对齐)
1.4 flex-direction:column-reverse (与column 相反)

二、flex-wrap: (内容一行容不下的时候才有效)

2.1 flex-wrap:nowrap (超出不换行,很奇怪里面的宽度会变成100%)
2.2 flex-wrap:wrap (超出按父级的高度平分)
2.3 flex-wrap:wrap-reverse(与wrap 相反)

三、justify-content: (水平对齐方式)

3.1 flex-start (水平左对齐)
3.2 justify-content:flex-end; (水平右对齐)
3.3 justify-content:center; (水平居中对齐)
3.4 justify-content:space-between; (两端对齐)
3.5 justify-content:space-around; (两端间距对其)

四、align-items: (垂直对齐方式)

4.1 align-items:stretch; (默认)
4.2 align-items:flex-start; (上对齐,和默认差不多)
4.3 align-items:flex-end; (下对齐)
4.4 align-items:center;(居中对齐)
4.5 align-items:baseline; (基线对齐)

还没搞明白基线对齐是什么意思。


以上是对flex的简单介绍。下面有个小例子,

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box{
                display: flex;
                display: -webkit-flex;
                border: 1px solid #0000FF;
                height: 200px;
                width: 400px;
                align-items:center;
                justify-content:center;
            }
            .item{
                width: 50px;
                height: 40px;
                border: 1px solid #00C1B3;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
        </div>
    </body>
</html>

React 父组件调用子组件的方法(非props方式)

我们都知道在 react中,若要在父组件调用子组件的方法,通常我们会采用在父组件定义一个方法,作为props转给子组件,然后执行该方法,可以获取到子组件传回的参数以得到我们的目的。

显而易见,这个执行是需要去主动触发的。

那有没有一种方式,方法在子组件定义好,可以直接在父组件去调用呢?

答案是必然的。

上代码^ – ^

import React, {Component} from "react";
import { Button } from "antd";

//父组件
export default class Parent extends Component {
    render() {
        return(
            <div>
          <p>这是父组件</p>
                <Child triggerRef={this.bindRef} />
                <Button type="primary" onClick={this.btnClick} >click</Button>
            </div>
        )
    }

    bindRef = ref => { this.child = ref }

    btnClick = () => {
        this.child.getValuefromChild()
    }

}
//子组件
class Child extends Component {
    componentDidMount(){
        this.props.triggerRef(this)
    }
  //这是子组件的方法
    getValuefromChild = () => console.log("this is child value.")

    render() {
        return <div>这是子组件</div>
    }
}

本文转自:一江西流

electron-store 保存应用数据

比如有一些用户数据需要保存、应用的一些个性化配置需要保存到本地等,都可以使用这个组件来保存。

本质上,这个组件是操作了当前应用的配置文件 “config.json” 。
所保存的路径,可参考官方文档,其中 getPath("userData") 得到的路径。

electron-store:GitHub 文档

示例

npm install electron-store --save-dev
const Store = window.require('electron-store')

// 存储
store.set('unicorn', '这是需要存储的内容');

// 获取
store.get('unicorn');

就是这么简单易用。

另外,多个层级的JSON数据,可以使用 store.get('user.depatment.name') 这样的方式来获取。

关于 electron-store ,推荐一篇网友的文章:进入推荐文章

Electron-Builder 减小压缩包大小

electron-builder 默认会将 node_modules 中的所有文件打入安装包内,实际上我们并不需要那么多的安装包,因为我的 Web 程序已经编译,如果没有用到一些 node.js 的包的话,直接忽略 node_modules 即可,如果有用到的话,手动配置下导入相关的包即可。

比如我的 electron-builder 配置如下:

  "build": {
    "files": [
      "build" ,
      "!node_modules",
      "node_modules/electron-is-dev"
    ]
  }

build 目录是我 react 生成出来的 web 文件。

!node_modules 表示打包完全忽略这个文件夹

node_modules/electron-is-dev 表示我需要包含打包进去的文件夹。

创建 Electron + React 项目流程

1. 全局安装 Create-React-App 脚手架

npm isntall -g create-react-app

输入:create-react-app -V (注意 V 是大写)可查看当前脚手架版本号

2. 创建 React 项目

create-react-app project-name

project-name 表示你的项目名称,可以自己取一个。

创建完成后,就可以 cd 到项目目录中,npm start 运行,即可弹出项目的初始默认站点,说明 OK 了。

3. 引入 Electron 包

 npm install electron --save-dev

过程中会下载一个包,如果很慢或无法下载的话,可以用以下命令代替:

ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ npm install electron --save-dev

4. 添加 main.js 文件与 package.json 配置

main.js 直接从官网拷贝:进入官网文档 , 并进行修改

    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true,   // 这行代码必须加进去,不然渲染进程无法访问 nodejs,electron 的资源
    }

然后在 package.json 文件中加入配置

  1. "main":"./src/electron/main.js" 其中的路径为你的 main.js 路径配置。
  2. "homepage": "./" 表示请求资源用相对路径,否则打包之后请求不到js,css资源

继续:引入 electron-is-dev 包

npm install electron-is-dev --save

这个包用于判断当前运行环境是开发环境还是生产环境,在 main.js 中,我们这里加一个判断:

继续:引入 concurrently

npm install concurrently --save

这个包用于同时启动多个服务用

继续:引入 wait-on

npm install wait-on --save

用于启动等待命令

const isDev = require('electron-is-dev')
const path = require('path')


if (isDev) {
  win.loadURL('http://localhost:3000')
} else {
  win.loadFile(path.join(__dirname, '../build/index.html'))
}

路劲为 main.js 相对 build 文件夹(React打出来的包文件夹)的路径。

可选配置(没有也没关系)

修改package.json,添加一个electron-dev脚本命令:
{
  ...
  "scripts": {
    ...
    "dev": "concurrently \"BROWSER=none react-scripts start\" \"wait-on http://localhost:3000 && electron .\"",
    ...
  }
  ...
}

这样就可以直接 npm run dev 开启调试模式,不用单独再运行 React 和 Electron。

以上,即可:npm run dev 运行程序