最近要快速开发个小程序,心想着要是按微信推荐那样开发得累死,所以研究了下如何使用mpvue+Vant+npm快速构建微信小程序。
基础架子
项目地址:mpvue.com
首先用mpvue来拉一个基础的架子,这样方便我们后续集成一些其他的东西。
#安装vue-cli,有可以跳过
npm install -g vue-cli@2.9
#使用vue-cli创建mpvue项目
vue init mpvue/mpvue-quickstart 你的项目名
#安装依赖啥的
cd 你的项目目录
yran
yarn dev
Error:注意:
受微信动态增删改查 wxml 节点信息限制,某些VUE组件用不了。详细可看官方说明~
受微信动态增删改查 wxml 节点信息限制,某些VUE组件用不了。详细可看官方说明~
集成npm
首先在你的项目目录下,新建lib
目录,用处存放第三方npm包。
Electron 实现部分窗体挂代理来方便调试
在需要挂代理的窗体中添加下面的代码:
await OAuth.webContents.session.setProxy({
//代理地址,可用Http/Socks协议
proxyRules:"http://127.0.0.1:1080",
//代理排除的域名/地址
proxyBypassRules:'www.idzd.top'
});
上两篇文章说了,如何在Web端实现Google/Facebook的第三方登录。
这就简单说下 Electron 实现第三方登录。
其实,整个流程中与Web版本最大区别就是,如何获取回调的参数。
Electron 监听回调URL
//注册监听事件
OAuth.webContents.on('did-navigate', (event, url) => {
let raw_code = /access_token=([^&]*)/.exec(url) || null;
let access_token = (raw_code && raw_code.length > 1) ? raw_code[1] : null;
let raw_state = /state=([^&]*)/.exec(url) || null;
let state = (raw_state && raw_state.length > 1) ? raw_state[1] : null;
let raw_time = /data_access_expiration_time=([^&]*)/.exec(url) || null;
let expiration_time = (raw_time && raw_time.length > 1) ? raw_time[1] : null;
// let error = /\?error=(.+)$/.exec(url);
//获取到三个参数,即视为登录成功
//PS:其实还应该验证回调域名是否匹配
if (access_token && state && expiration_time) {
//向登录窗体发消息,通知器第三方登录成功,继续走原来的流程
AuthUI.webContents.send('oauth.success', {
access_token: access_token,
state: state,
expiration_time: expiration_time,
type: 'facebook'
});
//登录成功后销毁窗体
OAuth.destroy();
}
});
Electron 注册全局过滤器
当然也可以通过注册全局过滤器,来实现~