Skip to content

jd-ftf/vapp-demo

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

41 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

京东小程序微信小程序互转

文档介绍

  • 京东小程序IDE目前功能暂不完善,此脚手架可将example下的代码转换成微信小程序,通过微信小程序IDE进行调试。也可将example下的代码转换成京东小程序(此处主要是转scss类预编译语言),通过京东小程序IDE进行调试。
  • 最低兼容到小程序基础库 v1.9.91

目录结构

.__
├── build
│   ├── gulpfile.js                  // 使用gulp构建组件
│   ├── plugins
│   │   ├── gulp-js-replace.js       // 将js中的字符串jd替换为wx
│   │   └── gulp-replace.js          // 将html中的字符串jd替换为wx
├── .eslintrc                        // eslint配置文件
├── mock                             // mock配置
├── example                          // 编码源码
├── dist-wx                          // 转换成的微信小程序
├── dist-jd                          // 转换成的京东小程序
├── package-lock.json
├── package.json

支持

  • gulp ☑️
  • scss预处理语言 ☑️️
  • eslint ☑️️
  • commitlint ☑️️
  • Mock ☑️
  • babel ES6转ES5 ☑️
  • 热更新 ☑️

Mock

使用 Mock 功能,在/build/gulpfile.js 中的 devServer函数进行配置。

devServer 中引入 /mock/mock.js 中会拦截mock的请求将对应的请求打到对应目录或地址下,对返回数组的每个成员 的 route 进行拦截,将请求打到 /mock 同请求路径的 js 文件或者 json 文件上。请求的地址后缀名依旧可以是.action 等。

其中mock对应的 data 支持 mockjs的语法。

'list|1-10': [{
  'id|+1': 1
}]

wx.request 拦截

模板 example/utils/request.jswx.request 进行简单的拦截操作,实现host抽取,用户可根据自己的需要进行修改。

注意:使用 http 本地服务器时,编译器报错:不合法域名,可关闭开发者工具不合法域名菜单检测进行开发。

开发流程

npm install

开发模式,生成京东小程序开发代码,生成/dist-jd/

npm run dev

开发模式,生成微信小程序开发代码,生成/dist-wx/

npm run dev:wx

生产模式,生成京东小程序代码,生成/dist-jd/

npm run build

生产模式,生成微信小程序代码,生成/dist-wx/

npm run build:wx

mock数据

mock 数据可直接

npm run mock(:wx)

Q&A

  • 打包状态下不支持自闭合的自定义元素

打包状态下项目使用 gulp-htmlmin 进行html压缩,gulp-htmlmin 属性 collapseWhitespace 开启的状态下会把空元素 <slot /> 中的斜杠当做空格删除掉,转成 <slot>

因此,推荐使用<slot></slot>这种闭合方式。

About

京东小程序 + wot design demo

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published