zoukankan      html  css  js  c++  java
  • 小程序web开发框架-weweb介绍

    weweb是一个兼容小程序语法的前端框架,你可以用小程序的写法,来写web单面应用。如果你已经有小程序了,通过它你可以将你的小程序运行在浏览器中。在小程序大行其道的今天,它可以让你的小程序代码得到最大限度的发挥,他具有以下优点:

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

    本文转载于:猿2048→https://www.mk2048.com/blog/blog.php?id=h00bbc2abaa

  • 相关阅读:
    poj 2528 Mayor's posters (线段树+离散化)
    poj 1201 Intervals (差分约束)
    hdu 4109 Instrction Arrangement (差分约束)
    poj 1195 Mobile phones (二维 树状数组)
    poj 2983 Is the Information Reliable? (差分约束)
    树状数组 讲解
    poj 2828 Buy Tickets (线段树)
    hdu 1166 敌兵布阵 (树状数组)
    Ubuntu网络配置
    Button控制窗体变量(开关控制灯的状态)
  • 原文地址:https://www.cnblogs.com/10manongit/p/12727543.html
Copyright © 2011-2022 走看看