js打来共享路径

JavaScript019

js打来共享路径,第1张

享文件 - 腾讯云...

2021年5月3日在JavaScript的chrome选项卡中打开网络共享文件夹 javascript、network-security 我有以下html/js代码,可以在点击按钮时打开网络共享文件夹。

1. 用global来保存常量

const.js

global.MY_CONST= 'global const'11

技术上可以,你只需要 require const.js,无需保存返回值

main.js

require('./const')

console.log(global.MY_CONST)

global.MY_CONST = 'changed global const'

console.log(global.MY_CONST)12341234

但是设计原则上来讲,应该将内容封装到文件内,通过exports导出。

而且,这种方式并不能定义常量。

2. 直接export一个包含常量的对象

const.js

const obj = {

MY_CONST:'my const'

}

module.exports = obj

123456123456

这种方式有同样的问题,const并不能定义一个属性无法修改的对象,MY_CONST依然是可以修改的。

3. 用Object.defineProperty来定义常量

上面的方法试图定义一个const对象,但这是不可能的。但是我们可以通过配置将对象属性的设定为不可修改的。

const.js

Object.defineProperty(exports, "PI", {

value:3.14,

enumerable: true,

writable: false,

configurable: false

})123456123456

writable和configurable默认是false,所以可以简化一下

Object.defineProperty(exports, "PI", {

value:3.14,

enumerable:true

})12341234

更好的方式,如果你不想为每一个属性都手写配置的话:

function define(name, value) {

Object.defineProperty(exports, name, {

value: value,

enumerable: true

})

}

define("PI", 3.14)1234567812345678

看起来更舒服了。

4. 通过 Object.freeze 来固定属性值

const.js

module.exports = Object.freeze({

MY_CONSTANT: 'some value',

ANOTHER_CONSTANT: 'another value'

})12341234

freeze的简单介绍,来自 mozilla:

The Object.freeze() method freezes an object: that is, prevents new

properties from being added to itprevents existing properties from

being removedand prevents existing properties, or their enumerability,

configurability, or writability, from being changed. In essence the

object is made effectively immutable. The method returns the object

being frozen.

大概意思是说,freeze能够阻止对象属性的添加,删除,以及属性的enumerable, writable,configurable的修改,也就是将此对象变成一个不可变对象。

想必前一种方案,这种更简单,更安全(因为阻止了对属性writable的修改,所以也不担心某些别有用心的人修改了常量的writable后,再进一步修改属性值)。

后续

关于共享常量,本文中并没有给出方案,事实上nodejs也不建议这样做。所以,需要使用常量的module,必须require一下。其实也不费什么事。而且干净清新。如果未来有多个常量文件,也可以按需导入。

尘埃落定,我已经开始依照第4种方案来编写项目的常量js文件了,但是稍微纠结了一下这个文件的存放目录,下面是我司的项目目录

base-

|-conf

|-routes

|-controllers

|-services

|-models

|-utils

|-views

|-test123456789123456789

常量文件一般是不容易修改的文件,同事建议放到conf目录中,但是目前conf目录存放的都是一些底层配置,比如数据库连接信息,代理信息,文件系统信息。等等。业务使用的常量如果放在conf下,隐隐的觉得有点奇怪。

经过讨论,暂定存放在services中,因为主要也是service来使用这些常量。

整理一下通过h5做微信分享相关配置。

登录微信公众号, 获取AppID , 配置白名单 ,然后 配置JS接口安全域名 。

登录公众号后,左侧菜单栏选择:开发 =>基本配置,直接复制开发者ID(AppID)即可:

注意使用公网IP

左侧菜单栏选择:设置 =>公众号设置:

网页授权主要是获取微信openId使用,如果只是用分享操作,本步可以略过。

网页授权介绍

大致步骤是:

在配置完前面AppId、白名单及安全域名后,开始处理网页授权。

网页授权这一块儿内容主要是后端需要处理的内容较多,前端还是很简单的,仅需要跳入微信链接即可。为什么要走这一步呢因为有些操作,例如微信支付、播放微信录音、获取微信地址、微信卡券、商品、小店等等许多功能必须在微信浏览器汇总打开操作才可以,因此需要跳入微信浏览器及微信链接来处理后续操作。当配置后,链接便只有在微信浏览器中打开才会生效了,不然会提示:

链接如下:

https://open.weixin.qq.com/connect/oauth2/authorize?appid={$appId}&redirect_uri=={$URL}&response_type=code&scope=snsapi_base#wechat_redirect

参数分解

可见,上面需要填入的变量有二,一个是前面回去的AppId,另外一个则是url,需要写的是与配置域名所对应域名下的url,并且要进行urlEncode编码处理使用。

在拿到上述完整链接后,通过 window.location.href = ${url} 进行网页授权即可。在授权成功后,页面会重定向到自己设置的url页面去,然后在该连接上会有code值,取出即可:

将拿到的code值传给后端即可,看具体需求决定是否前端使用openId,如果非必要则不在前端获取保存或者由后端加密后传给前端使用。

大致分为五个步骤:

在步骤 1.3 中已经配置。

在需要调用JS接口的页面引入如下JS文件: https://res.wx.qq.com/open/js/jweixin-1.6.0.js

备注:支持使用 AMD/CMD 标准模块加载方法加载

配置需要如下几个参数:

那这些参数从哪儿来呢?依旧不用担心,依然是交给后端处理,后端返回时间戳、随机串及签名,其他的自己配置即可。

通过后端获取需要进行一个小交互,将此时的链接地址(window.location.href)传给后端即可。

于是就有了上述的除了最后一个以外的所有参数。最后一个 jsApiList 则是写分享接口,如我们想要分享到朋友圈、QQ、腾讯微博这3个,那就写:

可以发现,我们其实多配置了一个 checkJsApi ,这个是一个判断配置,可以判断当前客户端版本是否支持指定JS接口。

签名算法

所有JS接口列表

接下来就可以写分享信息配置了。配置信息一般都是通过 wx.ready 处理的:

例如我们要分享到朋友圈,配置则如下:

注意:不要出现 诱导分享

同样,一般都是通过 wx.error 处理失败相关信息:

其实微信分享(地理位置、扫一扫、卡券等微信各类接口)都是通过上述步骤配置的,可举一反三,在面对不同需求时通过微信开发文档来进行更为复杂的操作。