2020-08-09

Electron踩坑

参照官方文档，用npm init初始化完一个electron项目后，开始安装electron，结果由于某种原因electron的一个zip包一直下载不了，画面卡在如下截图中，：

151

网上很多解决办法基本都是千篇一律，要么手动下载zip文件，然后移动到指定位置，要么是npm配置ELECTRON_MIRROR="https://cdn.npm.taobao.org/dist/electron/"，都不起作用，知道是网络原因，但替换了淘宝的npm源依然解决不了，最后尝试使用cnpm：

1	npm install cnpm -g --registry=https://registry.npm.taobao.org

死马当活马医，最后居然安装成功了：

696

最后，跑个demo试试：

// main.js
const { app, BrowserWindow } = require('electron')

function createWindow () {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // and load the index.html of the app.
  win.loadFile('index.html')

  // Open the DevTools.
  win.webContents.openDevTools()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(createWindow)

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

运行：

npm start

10381

完美👍

2020-05-17

frontend

纯CSS实现轮播图

天天写前端的你，会自己写一个轮播图吗，而且不能用js哦，知道轮播图的原理吗？

今天我们要讲的是如何只用css实现轮播图效果，也叫banner，就是我们经常在APP或网站首页顶部看到的一系列图片切换。就像淘宝官网首页那样：

116

实现原理

一图胜千言，先上图：

2020-05-10

微信

微信jssdk踩坑—invalid signature

最近做公众号网页开发，使用微信jssdk页面签名时IOS中一直报错，这才刚开始就被这只拦路虎拦住了，报错如下：

然而Android和开发者工具中好得很，没有任何问题：

2019-10-03

PHP

如何使用Laravel 和 Vue 构建一个简单的SPA

本教程是作者自己在学习Laravel和Vue时的一些总结，有问题欢迎指正。

Laravel是PHP的一个框架，Vue是前端页面的框架，这两个框架如何结合起来构建一个SPA（Single Page Application）呢？流程大致分为下面三步：

页面请求Laravel的一个路由
路由返回渲染一个包含了Vue的SPA框架
在上面渲染出来的框架中使用Vue来加载不同的页面单元模块

主要会学习使用到三个东西：

laravel
vue.js
Vue-router
axios

343

上面是一个简单的流程图，从图中我们可以看到，当请求3和4的路由时，并不会再次请求后端的Laravel，而是前端渲染了。

说了这么多，我们开始写代码吧～

1. 安装

composer create-project --prefer-dist laravel/laravel laravel-spa "5.6.*"

cd laravel-spa

npm install
npm install vue-router

安装好laravel和vue-router后，我们需要配置前端路由和路由对应的组件

2. 配置Vue Router

在Vue Router中把route和vue组件做了一个映射，在渲染时会把不同的组件渲染到<router-view></router-view>标签中。

首先，我们修改resources/assets/js/app.js这个文件:

window.Vue = require('vue');
// 或者
import Vue from 'vue'

import VueRouter from 'vue-router'
// 引入Vue Router并加载到Vue中
Vue.use(VueRouter)

// 引入我们要使用到的几个组件
import App from './views/App'
import Hello from './views/Hello'
import Home from './views/Home'

// 实例化一个Vue Router
const router = new VueRouter({
    mode: 'history',
    base: '/spa',
    routes: [
        {
            path: '/',	// 这是路径
            name: 'home',	// 这是名称
            component: Home // 这是使用的组件
        },
        {
            path: '/hello',
            name: 'hello',
            component: Hello
        }
    ],
});

// 注入Vue Router 实例，我们就能在vue里面这样使用: this.$router, this.$route
const app = new Vue({
    el: '#app',
    components: { App, },
    router 
});

然后，新建以下几个文件：

mkdir resources/assets/js/views
touch resources/assets/js/views/App.vue
touch resources/assets/js/views/Home.vue
touch resources/assets/js/views/Hello.vue

App.vue是所有组件的父组件，负责渲染其他页面，代码如下:

<template>
    <div>
        <h1>Vue Router Demo App</h1>

        <p>
		<router-link :to="{ name: 'home' }">Home</router-link> |
		<router-link :to="{ name: 'hello' }">Hello World</router-link> |
        </p>

        <div class="container">
            <router-view></router-view>
        </div>
    </div>
</template>
<script>
    export default {}
</script>

注意这个router-view标签，Vue Router会将组件渲染到该标签里面。其他几个页面就是我们需要展示的组件页面了。

Home.vue :

1
2
3

<template>
  <p>This is the homepage</p>
</template>

Hello.vue :

1
2
3

<template>
    <p>Hello World!</p>
</template>

现在的目录结构是把页面的模版和组件模版放在同一个目录里面的，为了方便管理，我们可以把重用的组件单独放一个component目录里。

3. 后端代码

SPA应用主要是以接口的形式请求的，后端在接收到页面请求时不需要做过多的处理，代码也很简单，routes/web.php修改如下，删除了原来的/路由：

1	Route::get('/{any}', 'SpaController@index')->where('any', '.*');

创建一个SpaController：

1	php artisan make:controller SpaController

在SpaConrtoller的index方法中我们直接返回需要渲染的模版：

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class SpaController extends Controller
{
    public function index()
    {
        return view('spa');
    }
}

最后，编辑resources/views/spa.blade.php模版：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Laravel Vue SPA Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>
    <div id="app">
        <app></app>
    </div>
</body>

<script src="{{ mix('js/app.js') }}"></script>
</html>

基本完成，现在来看看效果，因为laravel已经集成了一些前端开发的脚手架，可以说非常友好了，所以在写好前端的组件后，运行如下命令就能打包前端代码了：

1	npm run watch

12451
12507
12562

现在我们简单的SPA静态页面已经搭建完成了，可以看到当切换URL时，整个页面的主题和菜单并没有换，更新的只是下面的内容，接下来我们是这调用后端的API。

4. 编写一个测试API

由于是测试，后端代码很简单，就几行，routes/api.php修改如下：

1
2
3

Route::get('/users', function () {
    return factory('App\User', 10)->make();
});

上面就是我们编写的一个简单接口，我么直接在路由中使用了Laravel现成的User模型mock10条数据，注意，由于Laravel中web和api是单独分开的，所以在访问api接口时需要加上/api前缀，分析App\Providers \RouteServiceProvider文件就能看出来：

/**
 * Define the "api" routes for the application.
 *
 * These routes are typically stateless.
 *
 * @return void
 */
protected function mapApiRoutes()
{
    Route::prefix('api')
         ->middleware('api')
         ->namespace($this->namespace)
         ->group(base_path('routes/api.php'));
}

我们试着访问下接口：

14808

接口写好，现在我们需要在前端用axios调用我们的接口。

5. axios上手

现在回到我们Vue Router的配置中，添加一个组件并定义一个新的路由：

…
import UsersIndex from './views/UsersIndex'
…

const router = new VueRouter({
    mode: 'history',
    base: '/',
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: '/hello',
            name: 'hello',
            component: Hello
        },
        {
            path: '/users',
            name: 'users.index',
            component: UsersIndex
        }
    ],
});

实现UsersIndex组件：

<template>
    <div class="users">
        <div v-if="loading" class="loading">Loading</div>
        <div v-if="error" class="error">
            <p>{{ error }}</p>

            <p><button @click.prevent="fetchData">Try again</button></p>
        </div>

        <ul v-if="users">
            <li v-for="{name, email} in users" @key="name">
                <strong>Name: </strong>{{ name }},
                <strong>Email: </strong>{{ email }}
            </li>
        </ul>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    data() {
        return {
            loading: false,
            users: null,
            error: null,
        };
    },
    created() {
        this.fetchData()
    },
    methods: {
        fetchData() {
            this.error = this.users = null;
            this.loading = true;
            axios.get('/api/users')
                .then(response => {
                    this.loading = false;
                    this.users = response.data;
                })
                .catch(error => {
                    this.loading = false;
                    this.error = error.response.data.message || error.message;
                })
        }
    }
}
</script>

这个Vue的组件很简单，说说fetchData这个方法，使用了axios来get我们写好的后端接口，将得到的数据用Vue在前端渲染出来，看看效果：

22149

我们成功获取到了后端数据，并在前端渲染出来。到此，我们现在已经了解了开发SPA应用的简单流程。

6. 最后再来个总结吧

使用SPA有什么好处呢？第一，不同页面之前切换时不会有明显的变化，至少整个页面框架不会切换，前端再配合一个loading动画，会更加友好，而全部用服务端渲染，页面在切换时会有一段时间的页面空白现象，在网速不理想的情况下空白的时间会更长。第二，职责更加清晰，SPA应用完全是前后端分离，后端只需要认真编写接口，前端只要获取并渲染，开发人员不需要同时看后端代码和前端代码，职责清晰的同时保证了码代码的效率，第三，SPA是无状态的，不需要管理session。

参考：
https://laravel-news.com/using-vue-router-laravel
https://router.vuejs.org/zh/

欢迎阅读本篇文章，如有兴趣可以关注博主公众号哦：

2019-08-25

设计

软件设计复杂性的体现

《A Philosophy of Software Design》读书笔记（2）

软件设计的复杂性到底有哪些表现呢？

一般表现为三种方式，并且每一种方式都会是开发任务更难执行。

1. 当新增特性时，需要修改大量的代码

首先，复杂性会体现在代码修改上，看似很简单的一处代码修改，往往需要涉及到很多地方。比如，一个网站由许多页面组成，每个页面都需要显示一个带背景的导航栏，最糟糕的方式是这个背景颜色分别定义在每一个页面上，如果要改变这个网站的背景颜色，我们就必须针对每一个页面手动修改，如果有数百个页面这就很不现实。解决办法是我们可以将这个背景颜色定义到一个单独的样式文件中，在每个页面引用这个样式文件，这样如果要修改背景颜色就只需要做一次修改。好的设计可以减少受每个设计决策影响的代码量，因此设计更改不需要太多的代码修改。

2. 当需要完成一个功能时，开发人员需要了解许多知识

这种体现在当我们要完成一个任务时，我们要对代码有多深入的理解。理解程度高，就代表我们要花更多的时间来阅读代码，我们都知道读别人写的代码是很艰难的，可能还得骂人。在这过程中，很可能就会产生bug，因为我们会疏忽某些地方的代码。比如有一个C函数用来申请内存空间的，并返回指针，设计这个函数的人想着调用者自己释放内存，这种情况就增加了对代码的理解成本，后面的人如果忘记释放内存，就会导致程序内存溢出。如果这个函数在设计的时候，不需要调用者关心内存的释放，这就可以降低对代码的理解程度。

一般，有多个方法的API、全局变量、代码的不一致和模块间的依赖都会使代码难理解。

系统的设计者通常都会用代码的行数来衡量系统的复杂性，他们认为代码行数越少，系统就越简单，在修改代码时，修改的越少那么这个修改就越简单。但是，这种观点忽视了前期理解代码的成本。相反，行数多的代码事实上才是简单的，因为它不需要花费很多精力理解代码。

3. 当新增/修改功能时，不能明显地知道要修改哪些地方

第三个就是在修改代码时，不能很明显的确认哪一部分代码需要修改或者是在修改时不清楚需要注意的点。比如在一个控制器中，我们给一个Model设置一些筛选条件来获取列表数据，由于这个Model已经有了base条件，后加的条件有可能会和base条件产生冲突，在不清楚的情况下，我们添加筛选后就可能会返回空数据。还是拿上面的背景颜色举例，我们把背景颜色放在了一个单独的样式文件中，只要修改一个地方就能使所有页面更新，但是在某些页面，导航栏还需要一个深色的阴影，更改了导航栏背景色后还需要修改阴影的颜色，如果没有意识到这一点，网站看起来可能就不协调，尽管有人会意识到这个问题，但也需要搜索每一个页面查看是否有这个阴影并修改。

上面三个代码复杂的体现中，第三点是最糟糕的，不知道不知道意味着有些点你应该知道，但是你没有办法发现它，这存在很大的隐患，只有出现bug时你才会发现。修改的复杂也是很恼人的，但只要让需要修改的代码保持干净清晰，系统就会正常工作，同样的，对于第二点，只要保证有清晰的文档就可以使修改正确，第三点因为不知道不知道，最保险的方式就是去阅读每一行代码，当然这也不太现实，项目中往往会有很多依赖，也许某些依赖还没有文档。

对于一个设计良好的软件系统来说，工程师能很快理解现有代码并很快修改它，而不会有任何疑惑。