js处理微信分享配置

一、js处理微信分享配置

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

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

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

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

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

在配置完前面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，如果非必要则不在前端获取保存或者由后端加密后传给前端使用。

在需要调用JS接口的页面引入如下JS文件：

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

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

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

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

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

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

例如我们要分享到朋友圈，配置则如下：

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

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

二、Dva.js 入门级教学文档

1、Dva.js是一个简化了 React应用开发的框架，整合了 React-Router、Redux和 Redux-saga，旨在提供更方便、快捷的 React应用构建体验。以下是 Dva.js入门级教学文档的主要内容，以帮助开发者快速上手：

2、-**定义**：Dva.js是一个应用级框架，通过结合 React-Router、Redux和 Redux-saga，简化了 API的使用，使 React应用开发更为便利。

3、-**核心作用**：封装了三个核心库，简化了 API调用，提供了统一的管理状态、路由和异步操作的解决方案。

4、-**环境搭建**：通过安装 Dva.js和相关依赖，如 npm或 yarn。

5、-**创建项目**：使用命令 `cd `进入项目目录，启动 `npm start`或 `yarn start`运行项目。

6、-**集成 antd**：通过安装 `antd`和 `babel-plugin-import`，并确保在 `.webpackrc`文件中添加特定配置，以按需加载样式和脚本。

7、-**index.js**：概述了 Dva的关键 API，包括实例创建、插件装载、Model注册、路由配置和应用启动。

8、-**router.js**：配置路由逻辑，为页面创建路由规则。

9、-**components、routes、services、utils、models**：分别存放公共组件、页面、后台调用服务、工具方法和模型文件，形成完整的应用架构。

10、-**namespace**：每个 Model的唯一标识，用于组织应用状态。

11、-**state**：存储 Model的当前状态，通过组件的 `this.props`显示。

12、-**reducers**：处理同步操作，直接在 Model中修改 state。

13、-**effects**：处理异步操作，通过调用 API后同步 state。

14、-**subscription**：监听器，用于响应应用状态的变化。

15、###五、connect连接 Model和 Route

16、-**connect**：Dva提供的连接方法，用于将 Model与页面组件关联，实现数据的双向绑定。

17、-**初始化数据**：在 `index.js`中设置 initialState，定义页面加载时的初始状态。

18、-**数据传输流程**：从 Model层出发，通过 dispatch触发 action，然后在 reducers中处理同步数据，最后在组件中显示数据。

19、-**多次调用**：在 effects中可以进行多次调用 `put`和 `call`，以实现复杂的异步逻辑。

20、-**并行任务**：通过恰当的 `put`和 `call`组合，实现多个任务并行执行，增强应用的并发能力。

21、以上内容为 Dva.js入门级教学文档的核心要点，旨在为开发者提供快速入门和应用开发的基础框架。

三、...中访问带有用户名和密码的网站 即用url.connect的方法。

需要知道这个页面表单中的代码，

浏览器页面上右键，source就可以看到，找到类似

<input type="text" name="xxxx">需要找到的是用户名，密码所对应的表单的name属性，即这里所写的“xxxx”

在页面提交这样一个请求的时候，其实是网url地址里面加参数

假如地址是123.123.123.12/login.jsp

通过页面取到的用户名对应表单字段为UserName

通过页面取到的密码对应表单字段为Passwd

你的用户名为test，密码为123456

123.123.123.12/login.jsp?UserName=test&Passwd=123456

在浏览器输入这样的地址，其实相当于填写了表单

通过url.connect访问的地址变成这样就可以实现登录了

1，访问这个网站之后，一般会跳转到登录成功的页面。因为一般登录成功都是这样做的

2，访问其他页面的时候，又是一个另外的url连接请求，如果其他页面没有登录的表单，你就无法访问

3，就算是这个登录界面，也可以很容易的拦截掉这样的登录方式

比如，设置一个验证码（因为无法获取得到，除非另外的技术）

比如，提交表单用js实现，然后在提交的时候把表单里面的名字换掉