h666是以h5为主的hybird跨端解决方案。具体包括:组件库、cli工具、项目模版、CI/CD、错误搜集、性能监控。从开发到上线,一站式配齐。
【微信小程序】
【h5】 【hybird】 安卓(基于RN) 【支付宝小程序】todo
【头条小程序】
todo
【其它小程序】
todo
yarn global add @ruiyun/h666-cli
h666 create
按照提示输入项目名称,等待下载模版并初始化,完成后会看到提示。
在项目目录下
yarn & yarn start
之后访问http://{本机ip}:3000就可以看到h5页面。
小程序预览见下面【小程序】
App预览见面【HybirdApp】
修改src/pages/index/app.js,保存后可以看到页面已经自动更新。
在项目根目录下
yarn add-page
会依次提示你输入页面名(英文页面名)和页面默认标题(会显示在标题栏),之后会帮你创建好h5页面和小程序页面。 同时会在package.json中增加pages属性记下页面名和标题的对应关系。
参考首页跳转到list页的路由用法,被WithRouter装饰器装饰后,会在props上多出一个$router属性,$router.push跳转到下一个页面,$router.pop跳回上一个页面,$router.params是路由参数。具体API可以参考路由组件文档。
h666-project
│
├──── src
│ ├── assets(资源文件)
│ │ └──logo.png
│ │
│ ├── libs(工具库)
│ │ └──md5.js
│ │
│ ├── components(公共组件)
│ │ └──Cell(组件名文件夹)
│ │ ├──index.js(组件代码)
│ │ └──index.css(组件样式)
| |
│ ├── constans(常量配置)
│ │ ├──apis.js(接口常量)
│ │ └──other.js(其它常量)
│ │
│ ├── pages(页面)
│ │ └──index(首页)
│ │ ├──app.js
│ │ ├──app.css
│ │ └──entry.js(页面级自定义entry,特殊情况才需要)
│ │
│ ├── services(服务-包装后端接口)
│ │ └──UserServcie.js(首字母大写)
│ │
│ ├── sw.js(自定义serviceworker,特殊情况才需要)
│ │
│ ├── entry.js(自定义entry,特殊情况才需要)
│ │
│ └── template.html(自定义模版,特殊情况才需要)
│
├──── wechat(微信小程序模版代码,一般不需要改动)
│
├──── .gitlab-ci.yml(gitlab环境下配合多阶段构建的CI脚本)
│
├──── Dockerfile(多阶段构建脚本)
│
├──── upload.js(非docker环境下的上传脚本)
│
└──── package.json
启动h666项目后,用微信开发者工具打开wechat目录就预览小程序内的效果。注意本地开发需要勾选不校验安全域名。真机预览需要开启调试。提交小程序审核时需要修改wechat/app.js内host变量为h5的线上域名。并在微信后台配置业务域名和安全域名。
文档待完善
默认只在安卓平台启用ServiceWorker,因为IOS的应用内WkWebview不支持sw,Safari虽然支持但是会导致bfcache失效。如果你想修改默认设置,可以修改package.json中的ServiceWorker字段的正则。
参考demo在packge.json中配置Sentry字段。
在项目根目录下运行
yarn build:pro:analyse
会生成一个profile.json文件。去这里上传这个JSON文件,分析各个页面的组成,提取公共依赖进common.js
为了优雅实现依赖注入,已经默认支持es7+的装饰器用法。用API形式调用的组件都是装饰器实现。比如路由的WithRouter,对话框组件的WithDialog等。
console.log($BUILD_TARGET$)
// 本地开发(yarn start) ==> local
// 测试环境(yarn build:dev) ==> dev
// 生产环境(yarn build:pro) ==> production
可以根据不同值来走不同api的endpoint
默认是按照移动端750px的设计的,如果要修改,可以在package.json里加一个属性p2rBase,值改为设计稿尺寸,比如1080。
可以在项目根目录下放一个自定义的template.html
package.json中有一个commonChunks属性,里面记录了要进common.js的包名。
在/src/下建立一个entry.js,写入
export default function onEntry () {
// 下面的代码每个页面初始化时都会执行
console.log('hhh')
}
这个onEntry函数每个页面初始化都会执行。
在 src/pages/{页面名}/ 下建立entry.js,写入
export default function onEntry () {
// 下面的代码只有该页面初始化时会执行
console.log('dddd')
}
这个onEntry函数只有这个页面初始化时才会执行。 方式二的entry会覆盖方式一。
默认的js和css兼容性是“last 2 versions”。如果不满足你的需要,可以在package.json中加入
{
"browsers": [
"android >= 4.4",
"ios >= 8"
]
}
可以参考browserl.ist来设置你想要的兼容性。
默认只会编译src下面的js文件。但是有些npm包是需要编译后再使用的(个人推荐这种方式),比如@ruiyun/preact-m-router,@ruiyun/preact-layout-suite等。可以在package.json中加入
{
"include": [
"@ruiyun",
"p-to-r",
"h5-indicator"
],
}
来自定义加入需要后编译的包名。
可在在package.json中加入全局常量对象,此配置将被webpack.DefinePlugin接收。请注意属性值需要是一个合法的JSON字符串。
{
"globalConstants": {
"APP_VERSION": "'1.0.0'"
}
}