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

cppowboy 发布于2019-08-05 17:56 / 1642人阅读

摘要：我们将尽快修正切换成微信开发者工具自带的编译器使用环境变量如下转换成后，会存在跨域访问接口及脱离微信环境带来的一些无法支持的问题。

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 指定服务端口，默认 2000

-d, --dist

指定生成的路径

-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配置项来解决一些常见的问题：

/**
 * 此处的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。

私有云专线服务小程序后端开发框架如何介绍小程序微信小程序框架 web开发框架

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/60210.html

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

摘要：我们将尽快修正切换成微信开发者工具自带的编译器使用环境变量如下转换成后，会存在跨域访问接口及脱离微信环境带来的一些无法支持的问题。 weweb是一个兼容小程序语法的前端框架，你可以用小程序的写法，来写web单面应用。如果你已经有小程序了，通过它你可以将你的小程序运行在浏览器中。在小程序大行其道的今天，它可以让你的小程序代码得到最大限度的发挥，他具有以下优点：跨平台，一套代码多端运行...

codercao 2019-08-21 17:04 评论0 收藏0
开源中国专访：Chameleon原理首发，其它跨多端统一框架都是假的？

摘要：中国互联网络信息中心发布的中国互联网络发展状况统计报告显示，截至年月，我国网民规模达亿人，微信月活亿支付宝月活亿百度月活亿另一方面，中国手机占智能手机整体的比例超过，月活约亿。在年末正式发布了面向未来的跨端的。开源中国专访：Chameleon原理首发，其它跨多端统一框架都是假的？原创：嘉宾-张楠开源中国以往我们说某一功能跨多端，往往是指在诸如 PC、移动等不同类型的设备之...

GraphQuery 2019-08-23 15:29 评论0 收藏0
wepy框架开发小程序文档

摘要：目录项目构建文件使用优化之处组件通信的使用注意事项报错记录踩坑记录项目构建官方文档地址链接项目源码地址链接项目资料地址链接简单介绍是一个微信小程序框架，支持模块化开发，开发风格类似。使用的方式请求小程序原生都将化。目录 wepy项目构建 wepy文件使用 wepy优化之处 wepy组件通信 wepy的API使用 wepy注意事项 wepy报错记录 wepy踩坑记录 1. wep...

Luosunce 2019-08-23 12:27 评论0 收藏0
前端每周清单第 54 期: SwiftNIO, 自定义 vue-router, Web 缓存与 Gr

摘要：新闻热点国内国外，前端最新动态苹果开源了版近日，苹果开源了一款基于事件驱动的跨平台网络应用程序开发框架，它有点类似，但开发语言使用的是。苹果称的目标是帮助开发者快速开发出高性能且易于维护的服务器端和客户端应用协议。 showImg(https://segmentfault.com/img/remote/1460000013677379); 前端每周清单专注大前端领域内容，以对外文资料的...

刘东 2019-08-22 15:20 评论0 收藏0
我的大前端- 收藏集 - 掘金

摘要：下面围绕的这样的目的，即左右知乎网页上屏幕截图功能的实现前端掘金背景最近注意到知乎的屏幕截图反馈功能，感觉非常不错。正如你期望的，文中的闯关记之垃圾回收和内存管理前端掘金题图来源，授权基于协议。微信小程序实战学习起手式 DEMO 仿肯德基 - 前端 - 掘金小程序？大场景? 微信小程序本质上来说就是一个 HTML 5（移动网页）应用，用view、scoll-view代替了div标...

LdhAndroid 2019-08-20 18:17 评论0 收藏0