Readme.md

    weweb

    node npm package JavaScript Style Guide License: MIT

    点我快速上手

    简介

    weweb是一个兼容小程序语法的前端框架,你可以用小程序的写法,来写web应用。如果你已经有小程序了,通过它你可以将你的小程序运行在浏览器中。如果你熟悉vue的语法,也可以使用wepy编写小程序,再通过weweb转换后将其运行在web端。

    优点

    • 跨平台,一套代码多端运行(小程序、h5、未来还可以直接打包成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

    运行示例:

    # Node 版本需高于 7.6.0, 推荐使用 lts 版本
    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此项目后安装依赖
    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

    开发用命令

    # 自动执行rebuild
    npm run dev
    
    # 自动重启服务器
    npm run autostart

    在线演示demo

    demo源码

    h5版在线demo

    小程序二维码

    注意事项

    weweb默认使用我们自己写的编译器对wxml和wxss进行编译,但目前编译器还处于试用阶段,有些case可能没测全,使用weweb过程中如果发现一些异常情况,可以尝试切换成微信官方编译器,看看是否能解决问题。出现类似问题欢迎大家给我们提issue。我们将尽快修正

    # 切换成微信开发者工具自带的编译器:使用环境变量 DFT_CMP=true 如下:
    
    # linux
    DFT_CMP=true ./bin/weweb demos/demo20170111
    
    # windows
    set 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后,特殊情况下,个别样式可能会有些异常,得自行调整兼容

    感谢

    weweb前期参考了wept项目的实现,目前有部分代码也是沿用了wept的或在这基础上改造而来。在此,特别感谢wept的作者 chemzqm 的无私奉献

    如果你有好的意见或建议,欢迎给我们提 issuePR,为优化 weweb 贡献力量,如果觉得weweb不错,就请star起来吧

    License

    MIT

    项目简介

    🚀 Github 镜像仓库 🚀

    源项目地址

    https://github.com/wdfe/weweb

    发行版本

    当前项目没有发行版本

    贡献者 5

    开发语言

    • JavaScript 85.0 %
    • CSS 14.6 %
    • HTML 0.3 %
    • AppleScript 0.1 %
    • Shell 0.0 %