Puppeteer简单使用

安装

npm i puppeteer or yarn add puppeteer
默认下载最新版本的 Chromium。
npm i puppeteer-core or yarn add puppeteer-core 这个包不含 Chromium。

基本操作

启动
const browser = await puppeteer.launch();
导航到某个页面
const page = await browser.newPage();
await page.goto("https://bj.meituan.com");
等待加载完毕
await page.waitForSelector('#loginForm');等待某个节点出现
await page.waitFor(3500);等待某个时间

Read more
RN开发GitHub

技巧

  1. 由于组件内返回 html 结构需要一个根节点，所以很多人选择嵌套一层 view，但是这回影响性能。我们可以定义一个数组，将标签 push 到数组里面然后再返回这个数组，这样组件内就能返回同级的两个标签而不用再嵌套一层 view。
Read more
Git的使用|git

Git常用命令

Git使用技巧

一、 使用rebase合并同分支commit提交

一个开发分支可能会有数量极多的commit，这些commit小又多，一旦开发分支合并测试分支或者上线分支，那么这些commit都会被带入对应分支，使得上线分支上显示一串极长且无用的commit，显得非常凌乱无章。如何解决：

git rebase -i HEAD~6 或者 git rebase -i 10b73908

执行命令后进入vi编辑模式，提交的commit倒序排列，最下面的是最近的提交记录。

修改第一行之外的第一个单词为 squash or s , 然后输入 wq or x 保存退出

pick的意思是要执行这个commit

squash的意识是这个commit会被合并到前一个commit

合并到一个commit 然后强制推一下

Read more
vue+ssr开发美团网PC版

使用 nuxt 编写美团 PC 端(vue+ssr+egg)

前置

nuxt 安装

npx create-nuxt-app <projectName> or yarn create nuxt-app <projectName>

nuxt 启动

为了使 node 文件支持 es6 语法和 async，await，需要使用 babel 配置一下。
npm i babel-cli -g，然后在 package.json 里面的 dev 和 start 命令的最后面加上--exec babel-node,根目录新建一个.babelrc文件。

1
2
3
4
5
6
{
  "presets": ["es2015", "stage-0"],
  "plugins": [
    ["transform-runtime"]
  ]
}
Read more
造一个简单的UI轮子(Vue)|vue

造一个简单的 Vue UI 库(移动端)

其实是出于对第一个使用的 vue 框架 mint-ui 的怀念，以及想要打造一个简单的适合自己的移动端 UI 框架的目的做的项目。整体想法和架构基于 mint-ui 但是会参考很多 UI 库例如 vux、vant 等，因为 mint-ui 客观事实上来说还是有很多地方需要修改和优化的。

Read more
npm发包技巧

一点 npm 发包技巧

使用 nrm 管理源

今天发布 npm 包的时候一直提示

1
2
npm ERR! code E403
npm ERR! 403 Forbidden - PUT https://registry.npm.taobao.org/@xaviershi%2fvue-cli-plugin-xaviershi - [no_perms] Private mode enable, only admin can publish this module

经过查找是因为使用 taobao 源的原因导致的。
首先npm i nrm,nrm ls查看源,nrm use使用源

发布带作用域的包

  1. npm init --scope=<作用域名>
  2. npm publish --access public
  3. 好像只能写自己账号名字的作用域，不过可以交钱创建组织
Read more
RN基本开发环境搭建

基础搭建

react-native init AwesomeProject 默认会下载最新的 RN 版本，启动 react-native run-ios or react-native run-android。
iOS 真机启动步骤:

  1. Bundle Identifier改证书名，Version改版本号
  2. 选择 team 选择部署设备系统版本
  3. target 换到 Tests，取消勾选Allow testing Host Application APIs
  4. 选择 team，切换到 Build Settings 版本号切换为设备版本
  5. Info.plist App Transport Security Settings -> Allow Arbitrary Loads勾选为 yes
  6. RCTWebSocket.xcodeproj->RCTWebSocketExecutor.m localhost 替换为本机 IP
  7. Target 选择 Tests Build Phases-> Link Binry with Libraries -> + -> libRCTWebSocket.a->add
  8. cmd+r 真机运行，然后 iPhone 信任证书再运行一遍
    具体步骤及资料
  9. Android 环境下载 gradle 缓慢的问题。黏贴命令行里面的地址使用迅雷下载，然后将包拖到 chome 里面会得到一个 file 地址，这个地址替换项目中 android/gradle/wrapper/gradle-wrapper.properties 里面的 distributionUrl 注意加转义字符
  10. iOS 真机调试以上技巧 0.57.7 版本好使 0.58 不行 报不支持 arm64 的错。真机调试安装到 iPhone 之后 不用改 RCTWebSocketExecutor.m文件的 ip 地址依然能刷新修改后的代码。

RN 开发技巧

  1. React-Native 指定模拟器 RUN-IOS react-native run-ios --simulator "iPhone 7”。
  2. MAC 查看端口号被占用及杀死进程。使用命令 lsof -i:port 查看端口号被哪个应用占用，找到 PID(port 是端口号)，再使用命令 kill PID 结束应用(PID 是该应用的编号) 使用 lsof -i 命令可以查看所有进程.查看 mysql 的版本号:mysql -V
Read more
RN勇者之路

披荆斩棘 勇往直前

Read more
eggjs搭建开发环境
插件的使用Egg 使用 Koa2 中间件 在 config 文件夹 config.default.js中设置 12// add your config hereconfig.middleware = ["jwt"]; 然后在 app/middleware 目录下面(没有则新建) 新建一个上面数组里的同名文件,比如 jwt.js ，然后写入中间件内容即可。 12// jwt.jsmodule.exports = require("koa-jwt"); ☆ 不清楚这种插件是否也是像this.app.**这么使用，并且 config.js 里面配置的插件参数是否可用。 使用插件解决本地开发跨域问题(csrf) npm i egg-security egg-cors -S ```js// plugin.jsexports.security = { enable: true, package: “egg-security”}; exports.cors = { enable: true, package: “egg-cors”}; 1234567891011121314 运行时有黄色警告可能是`npm i`的时候自动将 security 插件一起装了，提示重复配置，注释了就行。3. ```js // config.default.js config.security = { csrf: false, ctoken: false, domainWhiteList: ["http://127.0.0.1:7001", "http://192.168.1.101:7001"] }; config.cors = { origin: "*", allowMethods: "GET,HEAD,PUT,POST,DELETE,PATCH" }; 使用 Sequelize 操作 MySQL 数据库 添加 mysql 路径 export PATH=${PATH}:/usr/local/mysql/bin source ~/.bash_profile 或者 source ~/.zshrc mysql -u root -p 输入密码进入 创建一个数据库create database demo; ```jsconst Sequelize = require(“sequelize”);const sequelize = new Sequelize(“study01”, “root”, “965516531”, { host: “localhost”, dialect: “mysql”, pool: { max: 5, min: 0, acquire: 30000, idle: 10000 }, operatorsAliases: false}); const User = sequelize.define(“user”, { username: Sequelize.STRING, birthday: Sequelize.DATE}); sequelize .sync() .then(() => User.create({ username: "demo" ...
Read more
WEB小技巧

一些平常会用到的小技巧

JS

  1. 限制输入两位小数并且只允许输入数字。
    1. <input v-mdel="a">
    2. 在 watch 里面监听 a：this.a = parseFloat(this.a.replace(/[^\d.]/g,"")).toFixed(2)
    3. <input type="text" onkeyup="this.value=this.value.toString().match(/^\d+(?:\.\d{0,2})?/)"/>
  2. js 取两位小数 不要四舍五入或四舍五入的方法(toFixed)
    1. 四舍五入 var num=123456.789; var num1=num.toFixed(2) // 123456.79
    2. 不四舍五入var num2=num.toFixed(3); num2.substring(0,num2.lastIndexOf('.')+3) // 123456.78
  3. js 导出表格 流转表格
Read more