Giter Club home page Giter Club logo

weweb's Introduction

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

weweb's People

Contributors

fantasydai avatar ioriens avatar pgfxm avatar treadpit avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

weweb's Issues

Error parsing statement => this <= : Unknown Type: ThisExpression

遇到如下错误
Using wxss-transpiler to transpile wxss: Using wxml-compiler to transpile wxml: 发生了未知错误 Error parsing statement => this <= : Unknown Type: ThisExpression at walk (C:\Users\JavaScript\AppData\Roaming\npm\node_modules\weweb-cli\node_modules\wxml-transpiler\build.js:1:9655) at walk (C:\Users\JavaScript\AppData\Roaming\npm\node_modules\weweb-cli\node_modules\wxml-transpiler\build.js:1:7916) at walk (C:\Users\JavaScript\AppData\Roaming\npm\node_modules\weweb-cli\node_modules\wxml-transpiler\build.js:1:7856) at walk (C:\Users\JavaScript\AppData\Roaming\npm\node_modules\weweb-cli\node_modules\wxml-transpiler\build.js:1:7720) at walkExp (C:\Users\JavaScript\AppData\Roaming\npm\node_modules\weweb-cli\node_modules\wxml-transpiler\build.js:1:9764) at parseExp (C:\Users\JavaScript\AppData\Roaming\npm\node_modules\weweb-cli\node_modules\wxml-transpiler\build.js:1:9960) at parseText (C:\Users\JavaScript\AppData\Roaming\npm\node_modules\weweb-cli\node_modules\wxml-transpiler\build.js:1:7416) at pushProp (C:\Users\JavaScript\AppData\Roaming\npm\node_modules\weweb-cli\node_modules\wxml-transpiler\build.js:1:23531) at processFor (C:\Users\JavaScript\AppData\Roaming\npm\node_modules\weweb-cli\node_modules\wxml-transpiler\build.js:1:20916) at Object.start (C:\Users\JavaScript\AppData\Roaming\npm\node_modules\weweb-cli\node_modules\wxml-transpiler\build.js:1:18584)

Error: ENOENT: no such file or directory, stat 'pages/index/index.json'

页面内没有 json 配置文件的时候,生成文件报错:

Unhandled Rejection at: Promise {
  <rejected> { Error: ENOENT: no such file or directory, stat 'pages/index/index.json'
  errno: -2,
  code: 'ENOENT',
  syscall: 'stat',
  path: 'pages/index/index.json' } } reason: { Error: ENOENT: no such file or directory, stat 'pages/index/index.json'
  errno: -2,
  code: 'ENOENT',
  syscall: 'stat',
  path: 'pages/index/index.json' }

底部tab文字颜色切换问题

只要点击过tab某个按钮,该按钮文字的颜色始终是active状态
浏览器:Chrome 61.0.3163.100
node: v8.1.3
weweb: v0.4.4

image

运行报错 : weweb-cli/bin/weweb:218

执行:weweb ./ShareLoverBak

报错:


/usr/local/lib/node_modules/weweb-cli/bin/weweb:218
  let execBuild = async function (err, out) {
                        ^^^^^^^^
SyntaxError: Unexpected token function
    at createScript (vm.js:56:10)
    at Object.runInThisContext (vm.js:97:10)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:389:7)
    at startup (bootstrap_node.js:149:9)

求助:为何在onShow调用setData会重复渲染?

大神,求助,如题,我在小程序的onShow里面加载数据,并调用setData;第一次进入正常的,点击进去其他页面,再返回,就发现数据重复了。
用之前不是chunk的版本转换出来是没问题的,但是最新这个转换之后发现了此问题。
qq20180122-155644

Promise 还未支持么

用wepy写的,用了promise 发现报错

weweb.js?v=0.4.4:1 TypeError: Cannot set property 'Promise' of undefined
    at app-service.js?v=0.4.4:2391
    at u (weweb.js?v=0.4.4:1)
    at weweb.js?v=0.4.4:1
    at app-service.js?v=0.4.4:4603
    at u (weweb.js?v=0.4.4:1)
    at app-service.js?v=0.4.4:4710
window.onerror @ weweb.js?v=0.4.4:1

weweb.js?v=0.4.4:1 Uncaught TypeError: Cannot set property 'Promise' of undefined
    at app-service.js?v=0.4.4:2391
    at u (weweb.js?v=0.4.4:1)
    at weweb.js?v=0.4.4:1
    at app-service.js?v=0.4.4:4603
    at u (weweb.js?v=0.4.4:1)
    at app-service.js?v=0.4.4:4710
weweb.js?v=0.4.4:1 Invalid route: page/component/index, redirect to root
onLaunch @ weweb.js?v=0.4.4:1

weweb.js?v=0.4.4:1 ReferenceError: regeneratorRuntime is not defined
    at eval (home.js:128)
    at eval (home.js:157)
    at eval (home.js:161)
    at u (weweb.js?v=0.4.4:1)
    at eval (home.js:164)
    at weweb.js?v=0.4.4:1
    at <anonymous>
(anonymous) @ weweb.js?v=0.4.4:1

weweb.js?v=0.4.4:1 Tue Oct 10 2017 16:12:56 GMT+0800 (CST) Page route 错误
weweb.js?v=0.4.4:1 Page[pages/home] not found. May be caused by: 1. Forgot to add page route in app.json. 2. Invoking Page() in async task.
error @ weweb.js?v=0.4.4:1

项目对小程序兼容问题

目前我看了咱们的项目,我发现如果用了分包加载的开发方式,进行打包的时候不会把分包的页面打包进dist文件夹,只会加载app.json》pages下配置的页面路由。所以我觉得这么好的项目应该兼容一下分包加载开发模式。
第二,就是我打包完之后,页面接口请求全部失效,不知道是什么原因造成的,咱们的文档有说这个问题解决方案,但是我试了还是不行,或者能不能完善一下文档,对于接口这块多加一些说明和解决方法呢!

谢谢您的付出!!!

Error: Cannot find module 'koa-better-body'

localhost:~ xiaoxiao$ weweb /Users/xiaoxiao/Documents/GIGOA
/Users/xiaoxiao/Documents/GIGOA
文件将生成到:
/Users/xiaoxiao/wewebTmp/dist
Using wxss-transpiler to transpile wxss:
Using wxml-compiler to transpile wxml:
Export login.js Success!
Export selectpeople.js Success!
Export mainpage.js Success!
Export selectdepartment.js Success!
Export operatingprogress.js Success!
Export index.js Success!
Export newcome.js Success!
Export index.js Success!
Export index.js Success!
Export index.js Success!
发生了未知错误
Error: Cannot find module 'koa-better-body'
at Function.Module._resolveFilename (module.js:470:15)
at Function.Module._load (module.js:418:25)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
at Object. (/usr/local/lib/node_modules/weweb-cli/lib/router.js:12:14)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
Export index.html Success!
Export app-service.js Success!
Export app.css Success!

无法在electron下使用

根源是在获取页面.js时使用了fetch,当electron环境下,fetch无法load file:///,导致错误

转h5之后,保留当前页面进行跳转到新页面会加载错误。

我遇到的问题主要是
1.直接访问页面是可以正常运行的比如 http://localhost:2000/#!pages/index/index 首页其他页面等等,使用微信小程序的跳转且关闭当前页面都可以正常渲染,如只跳转保留当前页面就会报错 直接不请求接口。

2.如果是已经打开了两级页面在渲染错误的时候再尝试刷新的话接口也获取不到参数
如从首页http://localhost:2000/#!pages/index/index 跳转进入http://localhost:2000/#!pages/index/index?page_id=18后渲染会如问题1里描述一样会加载失败并且不会请求接口,尝试刷新同样页面也会报错但是会请求接口参数page_id就会是undefined。

当然遇到问题之后我也想通过自己的努力找到解决办法,尝试了很多打印输出。发现的问题是第一次页面正常是进入onload方法了的。。第二次错误的时候就不会进入onload方法

存在语法错误

C:\Users>weweb
C:\Users\creux\AppData\Roaming\npm\node_modules\weweb-cli\bin\weweb:218
let execBuild = async function (err, out) {
^^^^^^^^
SyntaxError: Unexpected token function
at createScript (vm.js:56:10)
at Object.runInThisContext (vm.js:97:10)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.runMain (module.js:604:10)
at run (bootstrap_node.js:393:7)
at startup (bootstrap_node.js:150:9)

讨论:小程序Web运行环境独立维护

非常感谢作者提供如此方便的插件!

对于此框架,最需要的功能是Web服务与编译器模块,但整个项目将webpack,virtual-dom, wx-component 等功能集合打包在一个项目里。

请问是否考虑将编译环境独立维护呢?例如:

yarn add weweb -D
DFT_CMP=true weweb path/to/examples/

也就是说,将 lib/ 部分的 proxy, server 等单独发布、维护,您看这方面是否可行?

Error

TypeError: Cannot read property 'findIndex' of undefined
at /usr/local/lib/node_modules/weweb-cli/bin/weweb:191:30
TypeError: Cannot read property 'findIndex' of undefined
at /usr/local/lib/node_modules/weweb-cli/bin/weweb:191:30
TypeError: Cannot read property 'findIndex' of undefined
at /usr/local/lib/node_modules/weweb-cli/bin/weweb:191:30
TypeError: Cannot read property 'findIndex' of undefined
at /usr/local/lib/node_modules/weweb-cli/bin/weweb:191:30
TypeError: Cannot read property 'findIndex' of undefined
at /usr/local/lib/node_modules/weweb-cli/bin/weweb:191:30
TypeError: Cannot read property 'findIndex' of undefined
at /usr/local/lib/node_modules/weweb-cli/bin/weweb:191:30
at process._tickCallback (internal/process/next_tick.js:103:7)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.