小程序web开发框架－weweb介绍

weweb是一个兼容小程序语法的前端框架，你能够用小程序的写法，来写web单面应用。若是你已经有小程序了，经过它你能够将你的小程序运行在浏览器中。在小程序大行其道的今天，它可让你的小程序代码获得最大限度的发挥，他具备如下优势：

• 跨平台，一套代码多端运行（小程序、h五、将来直接打包成安卓、ios app也不是梦)
• 自带经常使用组件，完美继承了小程序内置组件
• 兼容小程序rpx语法，使页面更容易适配各类机型

该项目基于小程序开发者工具内置的小程序运行框架来实现的，咱们在仔细研究了小程序官方的底层框架后，实现了小程序运行在web端的service和view引擎，为了使[weweb]能适应web端的性能要求，相较小程序原生框架，主要有如下调整：

• 框架核心库进行了大量精减，剔除web不相关的部分,使核心库体积大大减少
• 将原有的三层架构精简为Service和View两层架构
• 页面资源、框架不经常使用内置组件均使用异步加载，减小核心库体积，提高加载速度
• 支持自定义登陆页面，代替微信登陆功能
• 去除了小程序对页面层级的限制
• 实现了js版的wxml和wxss编译器以适应跨平台编译需求并没有缝整合至weweb

适用场景

• 喜欢小程序的开发方式，或者只懂小程序开发，想经过小程序的开发方式来写web应用
• 开发出小程序后，同时想拥有一样功能的h5应用，并但愿能复用小程序的代码
• 代替小程序开发者工具对小程序部分功能在浏览器端进行调试

开发

开发方式能够直接套用你之前开发小程序的方式，不须要另外的学习成本，只是在小程序开发完后，经过下面介绍的二种运行方式，把小程序编译转换成相应的h5应用，而后把编译后的代码扔到服务器上就好了

运行

请先在系统中安装node，官方的安装包会同时为您装上依赖管理工具npm

方法一：使用cli命令行工具对小程序直接转换

安装：

npm install weweb-cli -g

运行示例：

#./demos/demo20170111/这是小程序的存放路径
weweb ./demos/demo20170111/

Options:

• -h, --help 输出帮助信息
• -V, --version 输出版本信息
• -o, --open 使用 Chrome 打开小程序，仅对 Mac 有效
• -l, --list 使用默认浏览器打开更新历史
• -p, --port <port> 指定服务端口，默认 2000
• -d, --dist <dir> 指定生成的路径
• -t, --transform 只转换小程序,不起web服务

方法二：手动构建并运行：

# clone [weweb]项目后安装依赖
npm i

# 构建核心库：
npm run build

# 运行示例：
./bin/weweb ./demos/demo20170111/

# 压缩app代码：使用环境变量 NODE_ENV=production
NODE_ENV=production ./bin/weweb demos/demo20170111

# 替换编译器：当默认编译出错时使用环境变量 DFT_CMP=true 可切换为微信开发者工具自带的编译器
DFT_CMP=true ./bin/weweb demos/demo20170111

# 环境变量能够组合使用
NODE_ENV=production DFT_CMP=true ./bin/weweb demos/demo20170111

在线演示demo

demo小程序二维码以下：

点此查看weweb编译后的h5在线演示
能够比较一下小程序和转换后生成的h5应用的差别
[demo源码]

注意事项

weweb默认使用咱们本身写的编译器对wxml和wxss进行编译，但目前编译器还处于试用阶段，有些case可能没测全，使用weweb过程当中若是发现一些异常状况，能够尝试切换成微信官方编译器，看看是不否能解决问题。出现相似问题欢迎你们给咱们提[issue]。咱们将尽快修正

# 切换成微信开发者工具自带的编译器：使用环境变量 DFT_CMP=true 以下：

DFT_CMP=true ./bin/weweb demos/demo20170111

转换成H5后，会存在跨域访问接口及脱离微信环境带来的一些api没法支持的问题。咱们能够经过在小程序的app.json文件中增长weweb配置项来解决一些常见的问题：

• 登陆：转换成H5后将不支持小程序原生的登陆方式，可经过loginUrl项来设置调用wx.login时跳转到的登陆页面

/**
 * 此处的loginUrl地址必须是在app.json里注册了的小程序地址
 */

"weweb":{
  "loginUrl":"/page/H5login"
}

当登陆成功后调用
wx.loginSuccess();
这个api能够自动返回到来源页面
示例代码：
success : function(rt){
if(rt.result){
  var login = require("../../modules/login/index.js");
  app.globalData.userInfo = rt.result;
  login.setLoginInfo(rt.result);
  wx.loginSuccess();
}else{
  toast.show(self,rt.status.status_reason||'登陆失败');
}
}

• 跨域请求：当后端接口不支持JSONP时，能够增长requestProxy配置项来设置服务器端代理地址，以实现跨域请求

/**
 * 此处/remoteProxy是weweb自带server实现的一个代理接口
 * 实际项目中请改为本身的真实代理地址。若是接口支持返回jsonp格式，则无需作此配置
 */

"weweb":{
  "requestProxy":"/remoteProxy"
}

小程序转换成h5效果说明

• 转换成H5后，依赖微信环境的相关接口将没法支持，好比：登陆等，须要自行改造为H5兼容方式
• 小程序转换为H5后，特殊状况下，个别样式可能会有些异常，得自行调整兼容

最后放上咱们github地址

https://github.com/wdfe/weweb。