0%

因业务需要开了新坑,选型为Electron-Vue,发展到现在比较成熟了,但是没想到项目初始化都启动不了,把一些小坑记录下来。

Get Started

安装vue-cli

1
npm install -g vue-cli

通过vue-cli初始化项目模版

1
vue init simulatedgreg/electron-vue my-project

安装依赖并运行开发模式

1
2
3
cd my-project
yarn # or npm install
yarn run dev # or npm run dev

ReferenceError: process is not defined

进行到这里,跑不起来就对了,会报ReferenceError: process is not defined,原因是webpack配置有问题,我们修改项目目录下的 ./electron-vue 下的webpack.renderer.config.js和webpack.web.config.jsHtmlWebpackPlugin配置为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.resolve(__dirname, '../src/index.ejs'),
templateParameters(compilation, assets, options) {
return {
compilation: compilation,
webpack: compilation.getStats().toJson(),
webpackConfig: compilation.options,
htmlWebpackPlugin: {
files: assets,
options: options
},
process,
};
},
minify: {
collapseWhitespace: true,
removeAttributeQuotes: true,
removeComments: true
},
nodeModules: false
}),

axios is not defined

改毕再yarn dev一下就可以解锁第二关axios is not defined,这里很容易联想到依赖安装不完整的问题,如果你尝试安装依赖的话会发现错误没有变化,后经过搜索发现插件白名单没有配置。

接着修改webpack.renderer.config.js

1
let whiteListedModules = ['vue','axios','vue-electron','vue-router','element-ui','vuex-electron','vuex']

把所需要的依赖加上即可,进行到这里项目终于可以跑起来了,文章写到这里不忍结束,接着我们迎来第三关:eslint

eslint vscode代码格式化

在使用vue-cli进行项目初始化的时候,我选择了Javascript Standard Style作为代码风格校验,很多人会不堪其扰选择关闭,但其实一个合适的代码风格在团队协作中是很有必要的,至于烦人的红波浪提醒,我们大可交给code formatter去帮我们格式化代码。
首先安装vscode拓展 Prettier-Standard - JavaScript formatter,并于vscode首选项中打开editor.formatOnSave即可愉快地匹配项目代码风格。

后记

以上是我花了一天时间踩的坑,后续伴随项目发展,本系列文章将会同步更新,感谢观看~

因为macbook空间不足卸载了没怎么用的Xcode,导致下班前提交代码时发现git报以下错误:

1
xcrun: error: invalid active developer path (/Applications/Xcode.app/Contents/Developer), missing xcrun at: /Applications/Xcode.app/Contents/Developer/usr/bin/xcrun

经过一番尝试,发现git依赖的CommandLineTools命令行工具路径指向的是Xcode。我们可以通过xcode-select -p查看。那么此时我们先把它装回来,执行:

1
xcode-select --install

看下安装成功了没:

1
2
xcode-select --version
-> xcode-select version 2354.

然后把系统命令行路径重新指向到刚安装的xcode-select目录:

1
sudo /usr/bin/xcode-select  --switch /Library/Developer/CommandLineTools

好了,试试git回来了没:

1
2
git --version
-> git version 2.20.1 (Apple Git-117)

Done.

定义

贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋,我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。

用途

以上介绍摘自百度百科,看起来有点晦涩难懂,一年多以前我第一次接触到这个名词便心生抗拒之意。然而在前端开发中,我们在实现抛物线动画时,贝塞尔曲线绝对是个好帮手。今天我们通过在微信小程序实现一个常见的加入购物车动画,来进一步理解它。

Read more »

最近的一个改版需求设计师在设计稿中使用了苹方字体,在网上找了一下解决方案,无外乎两种方式:

第一种方式,base64 encode

如果字体比较小,如各种英文字体,可以把字体上传到 https://transfonter.org/ 转换成base64格式,然后直接在样式中使用。具体使用可参考 【微信小程序】如何引入外部字体样式一文。

第二种方式,官方API

如果字体比较大,如各种中文字体动辄超过10mb,用base64显然是不合适的,小程序超过2m还要分包处理,为了一个字体实在不值当,那么可以用官方的API wx.loadFontFace加载外部字体,像这样:

1
2
3
4
5
wx.loadFontFace({
family: 'PingFangSC-Medium',
source: 'url("https://www.your-server.com/PingFangSC-Medium.ttf")',
success: function(){console.log('load font success')}
})

这里需要注意的一点是,family处的名称就是使用时font-family的名称,举个例子,上方加载的字体这样使用:

1
2
3
.foo{
font-family:PingFangSC-Medium;
}

建议

由于字体可能会比较大,所以不建议在一个小程序中使用多种字体,这样会影响用户体验。为了保证界面效果,可以在onLoad周期加载字体,在success回调中执行后续操作,必要时加上Loading,让程序更加友好。

2018.12.28日更新:

结合实践,决定写得更详细一点,希望可以帮助到更多道友。

遇到的问题是下载字体时界面已经渲染完毕,导致字体显示不正确。解决方法的总体思路是在使用到该字体的容器中增加一个loading属性,当字体加载完毕后再显示布局,这样可以确保字体渲染正确。

注:下方代码使用了 wxPromise 以支援小程序API Promise化

1
2
3
<!-- mall.wxml -->
<view wx:if="{{loading}}" class="mall-root">
</view>

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
<!-- mall.js -->
Page({
data:{
loading:false
},
onLoad(){
this.loadFonts().then(()=>{
this.setData({
loading: true
})
})
},
methods:{
loadFonts(){
let PingFangMedium = wx.pro.loadFontFace({
family: 'PingFangSC-medium',
source: 'url("https://img2.misssixty.com.cn/rs/lib/fonts/PingFangSC-medium.ttf")'
})

let PingFangRegular = wx.pro.loadFontFace({
family: 'PingFangSC-regular',
source: 'url("https://img2.misssixty.com.cn/rs/lib/fonts/PingFangSC-regular.ttf")'
})
return Promise.all([PingFangMedium, PingFangRegular]).then((res) => {
console.log(res)
}
}
})

今年的首发新车数量比往年多了不少,由于精力问题只去了部分展馆,大众、奥迪全系都换完了代,给人焕然一新的感觉。A6、新A class、新X5、新卡罗拉、ES是本届的超人气车型。连续五年去看车展,不容易啊~

Read more »

在最近的项目开发中,用Webpack做了一套脚手架,用jQuery作为主要工具库,一顿操作猛如虎,一看代码2w5。😅今天在这里记一下无法给Dom绑定监听的小问题。

谈起jQuery绑定事件,这里以最常用的点击事件为例,常见的两种写法有:

1
2
3
4
5
6
7
8
9
10
method one:

$('.selector').on('click',()=>{
//do something here
})

method two:
$('.selector').click(()=>{
//do something here
})

这两种写法大多数旁友都非常熟悉,平时用起来一点问题也没有,但在我的项目中,却愣是绑定不起来,经过一番查找,原因出在我要绑定事件的Dom是循环后append的,所以,点击事件就失效了,查了下jQuery的API:

1
on(eve,[sel],[data],fn)

发现on存在可选的第二个selector参数,官方说明:「一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略,当它到达选定的元素,事件总是触发。」OK,那么要解决这个问题,必须在append html element之后,去on要绑定事件元素的父元素。写成表达式即为:

1
$('.parentSelector').on('click','.childSelector',()=>{})

好了,事情解决了,可以开启开心星期四了。🤪

界面

写在开始

今天在这里介绍下如何使用koa框架,结合js,实现k歌作品的『批量/单曲/试听』功能。

需求分析

当用户输入uid时,获取到全部的作品列表,并在页面上展示,包含歌曲名称、歌曲试听、单曲保存的功能, 并以弹窗的形式,给予用户明确的提示:是否下载全部歌曲。当用户点击『下载全部』按钮时,开始下载,并在控制台显示相关进度。当用户点击『取消』时,不影响作品列表的相关操作,点击『分析并下载』时,仍然可以下载全部作品。

相关数据获取

第一步的目的是获取到所有作品的列表,自然而然地从个人页开始分析,首先观察url,为以下形式:

个人中心

https://node.kg.qq.com/personal?uid=18位uid

接着发现页面默认加载八首歌,点击『查看更多』按钮会多加载八首歌,在Chrome-Nerwork中查看请求,多请求几页发现规律,用postman模拟请求,发现接口的每页返回数量做了限制,num最大值为15,start为页数,share_uid可从个人中心url获得。至此,我们可以循环请求,获取所有歌曲列表。

获取作品列表

https://node.kg.qq.com/cgi/fcgi-bin/kg_ugc_get_homepage?type=get_ugc&start=页数&num=8&share_uid=18位uid

最后是获取歌曲播放(下载)的url,在歌曲的播放页的script标签里,我们可以直接获取到一串加密的地址,如果使用这个地址,显然无法与我们之前所做的努力结合,所以我找到了其他网友分享的url,通过share_uid,我们可以获取下载url。

获取歌曲url

http://node.kg.qq.com/cgi/fcgi-bin/fcg_get_play_url?shareid=shareid

技术选型

本次项目选择了koa2框架,使用koa-generator生成带ejs模板项目,方便后续功能拓展。加上axios、jquery、sweetalert2等辅助库。
sweetalert2

整体流程

程序运行
整体流程如上图,具体的实现还需要考虑uid校验、node的fs文件流操作,测试过程中发现某用户有相同作品名,还需要加上相同文件名的判断,如果有相同文件名,加上随机数字串,不然创建文件时会覆盖之前的文件。



程序运行
程序运行

TODO

  • [X] 单曲试听
  • [X] 单曲下载
  • [X] 作品批量下载
  • 在前端显示下载进度

项目地址

github

写在开始

进入现在的公司快满一年了,记得入职第一天是让我看文档,第二天就正式投入开发了,期间一直想要写点学习心得,但是因为工作量较大,连域名未认证被封了几个月都不知道,趁这次修复blog,大致写一写这一年来积累的东西。

学习方式

学习一门语言最好的方法就是实战,我进入公司的时候恰好碰上技术栈转型,逐渐把老项目过渡到Angular4,所以大家都是边做边摸索,Angular在国内远没有Vue那么火,不少问题的解决都要靠老外,国内的开发者也有几个知名的实践,把我们常用的插件集成在一个demo中,这里贴上几个比较经典的学习资源,有需要可以参考:

官方中文文档

大漠老师的美人鱼

CodeBe插件集成demo

Angular2随便问

理论上实际开发都是专注于业务,所以一般都会使用框架以提高开发速度,这里推荐阿里的NG-ZORRO和PrimeNG,经过多个版本迭代已经比较成熟,可以放心使用:)

强烈推荐的框架:NG-ZORRO

PrimeNG

实用技巧


这里就不再讲什么数据绑定、http请求等基础用法了,说几个在实际项目中比较实用的技巧,官方文档或许有提及但不够详细。

全局变量

或许你在某些教程中已经学习了Angular的组件通讯,知道常用的组件关系是父子关系,用的是@Input和@Output去传参,但是在实际项目中,经常会遇到兄弟关系的组件,这时候我们可以定义一个全局共用的Service进行传值,需要避免的坑是使用EventEmitter发送的值在订阅之前要先new EventEmiiter()一下,不然会造成重复触发。具体的使用方法可以参考 https://segmentfault.com/q/1010000011080965

动态组件

当模版内容较多时,例如一个页面包含了多个弹窗,弹窗的内容、逻辑也非常多的时候,按照默认模式Angular会一次全部渲染,影响性能。这时候我们可以使用动态组件,只有初始化事件触发时,才去生成这个弹窗组件,并且这样做有个好处:抽出来的组件可以进行复用。
具体的使用方法可以参考 https://www.jianshu.com/p/10feab2c3102

作用

最近一直在埋头苦学Node.js,正好手头有个项目需要上线,之前所有项目都是用Apache部署的,接触Node.js后调试都是带端口号的,例如http://localhost:8080 ,但是在生产环境,总不能让用户也访问带端口的地址吧?这个时候就需要用nginx来做端口转发。

安装

官网下载

下载后解压到方便操作的地方,如C:/即可,以下操作以C:/nginx为目录进行演示。

CMD键入:

cd C:/nginx

有两种启动命令,第一种无论是否成功启动都是一闪而过,优点是不会挂起进程,第二种会挂起,但是会抛出错误,在配置阶段方便调试。

start nginx  //第一种启动命令

nginx.exe//第二种启动命令

接着测试服务是否成功启动:

http://127.0.0.1

如果出现nginx的默认网页就算安装成功。测试完了先关闭服务:

nginx.exe -s quit

配置

重点来了,网上搜的博文不利于初学者,这也是著此文的目的所在。我们需要修改nginx的配置文件,位于:

C:\nginx\conf\nginx.conf

编辑该文件,我们的目标是把当前的80端口转发到8080端口。
修改第35行开始的配置为:

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

    location / {
        proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host  $http_host;
    proxy_set_header X-Nginx-Proxy true;
    proxy_set_header Connection "";
    proxy_pass      http://127.0.0.1:8080;
    }

保存文件,再次开启nginx服务。至此,输入localhost便能访问之前8080端口的项目,希望对大家有所帮助。

前言

距离MongoDB课程完结已经过去一年半,随着前端知识的系统学习,难免会再次接触到这个数据库,坦白地说之前上课的时候都是应付实验,并没有好好体会它的优点,毕竟你学一门技术如果不能和实战项目结合学习那都是瞎扯淡。接下来的日子得好好学一下了,安装时遇到一些神坑,总结一下与大家分享。

实验环境

Windows10 x64 1607、MongoDB v3.4 x64

获取MongoDB

MongoDB官网

配置MongoDB相关文件、注册服务

默认安装目录为

C:\Program Files\MongoDB\Server\3.4

新建以下目录和文件,你可以按需修改:

E:\data\db //数据库目录
E:\data\dblog\MongoDB.log //数据库目录

新建完成后我们需要把MongoDB注册为系统服务,这样日后启动会方便非常多。
首先以管理员运行cmd

cd C:\Program Files\MongoDB\Server\3.4\bin
mongod –dbpath “E:\data\db” –logpath “E:\data\dblog\MongoDB.log” –install –serviceName “MongoDB”

接着net start mongodb启动刚注册的服务,再输入mongo启动mongo shell。

issue:Win 10无法注册MongoDB服务

今天要说的重点来了!!!如果到上面为止你还没有出错,那证明你已经安装成功不必往下看,而我的是提示「服务名无效」,这就尴尬了,刚才注册服务也没出错啊,进系统服务一查,好家伙,服务根本没注册成功。ok,接下来要揭晓Win10史上最大的bug了,原来在小娜里右键管理员运行的cmd依旧没获得权限,导致服务注册失败,正确的做法是win+X,里面的「命令提示符(管理员)」才是正品,再注册一次服务,done~

把MongoDB路径注册到系统path

这样做的好处是每次启动都节省掉cd命令,非常方便。只需要在系统变量「path」添加你的MongoDB安装路径,如:C:\Program Files\MongoDB\Server\3.4\bin即可。