在nginx的所有server配置之前,增加:
server {
listen 80 default_server;
listen 443 ssl default_server;
server_name _;
return 403;
}
检查配置,重启即可:
nginx -t
nginx -s reload
在nginx的所有server配置之前,增加:
server {
listen 80 default_server;
listen 443 ssl default_server;
server_name _;
return 403;
}
检查配置,重启即可:
nginx -t
nginx -s reload
示例代码:
var http = require('http')
http.createServer(function(req, res) {
let ip = req.headers['x-forwarded-for'] ||
req.connection.remoteAddress ||
req.socket.remoteAddress ||
req.connection.socket.remoteAddress;
console.log("ip:",ip);
}).listen(3000)
卡是相对默认下拉刷新对比的。
默认下拉刷新,拖动的是webview,拖动和回弹动画是原生view的动画。
而自定义下拉刷新,拖动的是div(对应小程序的〈view〉标签),回弹也是div动画。
原生动画效果要好于div动画,故会感觉自定义下拉刷新更卡。
最简单的方式:
const config = require('./config.json')
console.log("name",config.name)
console.log("age",config.age)
require方法的缺点:
– 内容会被缓存,不适合动态变更的json文件
– 仅支持后缀为json的文件
稍微复杂的方法:
const fs = require('fs');
try {
const data = fs.readFileSync('./config.json', 'utf8');
// parse JSON string to JSON object
const config = JSON.parse(data);
console.log("name",config.name)
console.log("age",config.age)
} catch (err) {
console.log(`Error reading file from disk: ${err}`);
}
如下代码:
const cheerio = require('cheerio')
const $ = cheerio.load('<html><head><title></title><meta charset="utf-8"/></head><body></body></html>')
$('body').append('<div class="content">我是内容</div>')
console.log($.html());
输出内容为:
会发现中文被编码,如果不想被编码,则在load
方法中增加decodeEntities
参数即可,如下:
const $ = cheerio.load('<html><head><title></title><meta charset="utf-8"/></head><body></body></html>',{decodeEntities:false})
输出内容就会变为:
<html><head><title></title><meta charset="utf-8"></head><body><div class="content">我是内容</div></body></html>
cheerio 可以简单理解为node.js服务器端的jquery
安装:
npm i cheerio
使用示例:
const cheerio = require('cheerio')
const $ = cheerio.load('<html><head><title></title></head><body></body></html>')
//设置页面标题
$("title").text('new title')
//新增节点
$('body').append('<div class="content"></div>')
//添加class
$('.content').addClass('main')
//设置style样式
$('.content').css('color','red')
console.log($.html());
输出结果为:
<html><head><title>new title</title></head><body><div class="content main" style="color: red;"></div></body></html>
注意:jsdom 依赖 Node.js 10.x以上版本
jsdom is a pure-JavaScript implementation of many web standards, notably the WHATWG DOM and HTML Standards, for use with Node.js.
官网:https://github.com/jsdom/jsdom
安装:
npm i jsdom
使用示例:
const jsdom = require("jsdom");
const {
JSDOM
} = jsdom;
const dom = new JSDOM(`<html><head></head><body></body></html>`);
const document = dom.window.document;
// 创建一个新的 div 元素
let newDiv = document.createElement("div");
// 给它一些内容
let newContent = document.createTextNode("设置 Text 文本!");
// 添加文本节点 到这个新的 div 元素
newDiv.appendChild(newContent);
//设置属性
newDiv.setAttribute("class","uni-list");
newDiv.setAttribute("style","color: red;");
//插入节点
document.querySelector('body').appendChild(newDiv)
console.log(document.querySelector("html").outerHTML);
安装:
npm install -g pm2
启动:
pm2 start index.js
列举所有pm2管理的程序:
pm2 list
查看启动程序的详细信息:
pm2 describe pid
重启某程序
pm2 restart pid
默认内置的node.js版本过低,执行如下命令安装新版:
curl -sL https://deb.nodesource.com/setup_15.x | bash -
apt-get install -y nodejs
参考https://github.com/nodesource/distributions/blob/master/README.md
天下苦平台碎片化已久。
在移动互联网以前,开发者只需幸福的面对web。进入移动互联网时代,iOS、Android、H5以及各种小程序快应用层出不穷,开发者再也幸福不起来。
– 学习n个技术
– 开发n个版本
– 各版迭代混乱,无法拉齐,用户茫然、内部痛苦
– 开发测试成本n倍暴涨
结果就是工程师不停加班到头秃,但产品的需求仍然做不完、老板的预算一直压不下去,全都痛苦。
uni-app
之前已经实现了手机端全覆盖,支持iOS、Android、H5、微信小程序、阿里小程序、百度小程序、字节跳动小程序、QQ小程序、快应用、360小程序,并且在各端均有优异的运行性能。
从2.9版本起,uni-app
进一步提供了PC等宽屏的适配方案,完成了大统一。
开发者终于可以做到使用一个框架,一把撸掉所有项目。
不说虚的,先来个实际示例,大家直观感受一下:
如下是基于uni-app
的DCloud社区
在mobile端的展示效果,列表、详情分为两个页面,点击列表中的帖子,打开详情页面:
如下是基于uni-app
的DCloud社区
同一套代码,稍作配置后,在pc端的展示效果,列表、详情在同一个页面中左右分栏显示,点击左侧列表中的帖子,刷新右侧详情窗口的内容,这个UI更适合pc宽屏,也更有pc桌面App的体验。
Tips:点击 DCloud社区演示系统,自己感受PC和Mobile的自适应。
怎么样?有没有被酷到?
下面我们具体来讲讲uni-app
的pc宽屏适配方案,总的来说,包括三个方面:
– 窗体级适配:leftwindow、rightwindow、topwindow等分栏
– 组件级适配:match-media组件
– rpx的宽屏响应
手机屏幕和PC显示器的设计不同。为了方便手持及接听电话,大多手机的设备高度大于设备宽度(即为窄屏设计),故mobile App 多为竖屏/窄屏显示的UI。
而pc显示器多为宽屏设计,即设备宽度大于设备高度,在pc上的桌面应用,很多会采用左右分栏的UI设计。
uni-app
以目前手机屏幕为主窗体(window),在左/右/上
三个方向,新扩展 leftWindow
、rightWindow
、topWindow
三个窗体,这三个窗体可设定在屏幕宽度大于某一阀值时自动出现(展现分栏的宽屏设计),屏幕宽度小于某一阀值后自动消失(恢复单窗口的窄屏设计)。
uni-app
主窗体和扩展的三个窗体各自独立,支持互相通信,点击链接、切换页面时支持在相应的窗体内刷新,而不是整屏刷新。
我们以本文开头的DCloud社区
为例,讲解如何在uni-app
中快捷实现宽屏适配。
我们将社区的列表页作为主窗体,将详情内容扩展到rightWindow
中,示意如下:
接下来分步说明,如何在uni-app
项目中完成分栏实现。
step 1: 新建right-window.vue展现帖子详情
当然,rightWindow
无需重写新闻详情页面,是可复用原有代码的,支持把已有详情页面当组件放到 rightWindow
页面中,如下:
<!-- responsive/right-window.vue -->
<template>
<view>
<!-- 将原来的详情页(/pages/detail/detail.vue),作为一个组件(pages-detail-detail)使用 -->
<pages-detail-detail ref="detailPage"></pages-detail-detail>
</view>
</template>
<script>
export default {
created(e) {
//监听自定义事件,该事件由左侧列表页的点击触发
uni.$on('updateDetail', (e) => {
// 执行 detailPage组件,即:/pages/detail/detail.vue 页面的load方法
this.$refs.detailPage.load(e.detail);
})
}
}
</script>
step 2: 在列表页面,处理点击列表后与rightWindow交互通信的逻辑。
// 列表页的改造
goDetail(detail) {
if (this._isWidescreen) {
//若为宽屏,则触发右侧分栏详情页的自定义事件,通知右侧窗体刷新新闻详情
uni.$emit('updateDetail', {
detail: encodeURIComponent(JSON.stringify(detail))
})
} else {
// 若为窄评,则打开新窗体,在新窗体打开详情页面
uni.navigateTo({
url: '/pages/detail/detail?query=' + encodeURIComponent(JSON.stringify(detail))
});
}
},
step 3: 在pages.json
中注册rightWindow
,如下:
{
"rightWindow": {
"path": "responsive/right-window.vue", // 指定 rightWindow 页面文件
"style": {
"width": "calc(100vw - 400px)" // 页面宽度
},
"matchMedia": {
"minWidth": 768 //生效条件,当窗口宽度大于768px时显示
}
}
}
可以看到,无需太多工作量,就可以快速把一个为手机窄屏开发的应用,快速适配为PC宽屏应用。并且以后的代码维护,仍然是同一套,当业务迭代时不需要多处升级。
这套方案的实施,有如下特征:
更多配置细节,详见文档:https://uniapp.dcloud.net.cn/collocation/pages?id=topwindow
leftWindow方案除了适用于将原有的Mobile App适配到大屏显示,也适用于新开发的PC应用,尤其是PC Admin管理控制台。
如下是基于leftwindow
、topwindow
构建的经典pc admin
布局:
leftWindow
等方案是页面窗体级适配方案,适用于多页面的组合分栏显示。
那么在同一个页面中,组件是否可以适配不同屏宽?当然可以,此时可以使用组件级适配方案。
除了传统的css媒体查询外,uni-app
还提供了全平台兼容的 match-media组件 和配套的 uni.createMediaQueryObserver 方法。
match-media
是一个媒体查询适配组件,可以更简单的用于动态屏幕适配。
在match-media
组件中放置内容,并为该组件指定一组 media query 媒体查询规则,如屏幕宽度。运行时,如屏幕宽度满足查询条件,则这个组件就会被展示,反之则隐藏。
match-media
组件的优势包括:
1. 开发者能够更方便、显式地使用 Media Query 能力,而不是耦合在 CSS 文件中,难以复用。
2. 能够在模板中结合数据绑定动态地使用,不仅能做到组件的显示或隐藏,在过程式 API 中可塑性也更高。
3. 能够嵌套式地使用 Media Query 组件,即能够满足局部组件布局样式的改变。
4. 组件化之后,封装性更强,能够隔离样式、模版以及绑定在模版上的交互事件,还能够提供更高的可复用性。
uni-app
推荐采用运行时动态适配的方案,而不是为PC版单独编写条件编译(虽然你也可以通过自定义条件编译来实现单独的PC版)。这样设计的好处是在ipad等设备的浏览器上可以方便的横竖屏切换。
设计Mobile App
时,设计师常会以 iPhone6 作为视觉稿的标准,即按照750px屏幕宽度出图;程序员以750px作为基准,根据设备实际尺寸,动态换算(缩放)出适合当前设备屏幕的元素宽高。
这就是rpx(responsive pixel)的实现思路,只不过rpx由框架引擎动态换算元素尺寸,无需程序员写代码干预。
面向mobile端时,rpx是一种很理想的解决方案,因为各种移动设备的屏幕宽度差异不是很大,相对于750px微调缩放后的效果,可最大化的还原设计师的设计。
但是,一旦脱离移动设备,在pc屏幕,或者pad横屏状态下,因为屏幕宽度远大于750了。此时rpx根据屏幕宽度变化的结果就严重脱离了预期,大的惨不忍睹。
假设一个图文列表的展现,我们针对左侧缩略图定义如下css:
.uni-media-list-logo {
width: 180rpx;
height: 140rpx;411*(180/750)411*(180/750)411*(180/750)
}
在手机端,这个显示效果是比较理想的,如下:
当前选择 pixel 2
作为模拟设备,屏幕宽度为411px,故缩略图的宽度变为:180*(411/750) = 98px
,高度变为:140*(411/750) = 76px
,这个理论计算和实际运行相符,且效果较佳。
同样的代码,如果运行到pc端,假设屏幕宽度为1920px,则缩略图的尺寸将变为:180*(1920/750) = 460px
,高度变为:140*(1920/750) = 358px
,这个惨不忍睹的大就出来了,一个1920*1080
的显示器,只能显示2条记录(主要是缩略图高度放大导致的),效果如下:
为此,在uni-app 2.9+
起,新增了 rpx 按750px做基准屏宽的生效范围控制,即屏幕宽度超过某阀值(默认为960px)后,将不再以屏幕实际宽度换算元素宽高,而改以固定屏幕宽度(默认为375px)计算元素宽高。
以上述图文列表为例,当屏幕宽度为1920px(大于960px)时,将采用固定的屏幕宽度(默认375px)计算缩略图的宽高,即:180*(375/750) = 90px
,高度变为:140*(375/750) = 70px
,按照这个机制,pc端运行效果如下,相比上图的放大变丑,展现更为理想优雅。
Tips:
– 750px生效的屏幕宽度阀值,及宽屏时计算所用的固定屏幕宽度,均支持自定义配置
{
"globalStyle": {
"rpxCalcMaxDeviceWidth": 960, // rpx 计算所支持的最大设备宽度,单位 px,默认值为 960
"rpxCalcBaseDeviceWidth": 375, // 设备实际宽度超出 rpx 计算所支持的最大宽度时,rpx计算所采用的固定屏幕宽度,单位 px,默认值为 375
}
}
有了宽屏适配,uni-app的应用就可以方便的通过electron
打包为电脑客户端应用,windows、mac、linux均支持。
开发者可以随意调用electron
的API,以调用更多操作系统的能力(为方便多端兼容,可以将这些特殊API写在自定义的条件编译里)
uni-app插件市场有已经封装好的一些插件,详见:https://ext.dcloud.net.cn/search?q=electron
如果你的h5版已经开发完毕,还没来得及适配pc,但想在pc上先用起来。那么可以在pc网页里使用iframe,约定好宽度,在里面套用uni-app的窄屏版。
当然还可以在iframe旁边放置二维码,提供手机版扫码地址,如下是一个实现示例:
uni-app团队将keep running,继续完善uni-app在pc、pad等宽屏设备上的更好适配,并会在ssr、serverless方向上重点投入,提供云端一体的更高效率的解决方案(详见uniCloud),帮助企业更高效,帮助开发者更轻松!
欢迎大家到https://github.com/dcloudio/uni-app上给我们star鼓励😄