本项目使用腾讯wepy作为小程序开发基础框架, 并基于此框架进行了业务的深度定制
本项目代码将同步生成一个h5版本
├── dist 小程序运行代码目录（该目录由WePY的build指令自动编译生成，请不要直接修改该目录下的文件）
├── node_modules
├── src 代码编写的目录（该目录为使用WePY后的开发目录）
| ├── actions 页面/组件Action目录
| ├── components WePY组件目录（组件不属于完整页面，仅供完整页面或其他组件引用）
| | ├── ComponentA 可复用的WePY组件A
| | | ├── index.js WePY组件A的行为
| | | ├── index.scss WePY组件A的样式
| | | ├── index.wpy 整合其他三个文件内容至WePY组件A
| | | └── index.wxml WePY组件A的页面结构
| | └── ComponentB 可复用的WePY组件A
| ├── constants WePY常量目录, 常量已全部同步至该目录下index文件, 可直接引入constants来取得
| ├── middlewares WePY的redux中间件目录
| ├── mixins WePY的mixin目录, 用于抽取公共的js内容
| ├── pages WePY页面目录（属于完整页面）
| | ├── PageA 页面A
| | | ├── index.js 页面A的行为
| | | ├── index.scss 页面A的样式
| | | ├── index.wpy 整合其他三个文件内容至页面A（经build后，会在dist目录下的pages目录生成index.js、index.json、index.wxml和index.wxss文件）
| | | └── index.wxml 页面A的页面结构
| | └── PageB 页面B
| ├── public WePY的静态资源目录
| | ├── images 所有的图片静态资源
| | └── styles 存储sass全局样式变量
| ├── reducers 页面reducer目录
| ├── store 页面redux初始化, 中间件配置
| ├── utils 页面公共方法
| ├── app.js 小程序配置项（行为）
| ├── app.wxss 小程序配置项（全局样式）
| └── app.wpy 小程序配置项（全局数据、样式、声明钩子等；经build后，会在dist目录下生成app.js、app.json和app.wxss文件）
├── package.json 项目的package配置
└── wepy.config.js 项目的打包等配置, 类似于webpack配置
npm run dev
// 或者
yarn dev
注: 因当我们删除文件后, wepy不会删除掉之前编译的已删除文件, 因此每次项目启动前均会清除一次编译文件后, 再重新进行编译
npm run build
// 或者
yarn build
注: 目前打包结果将输出于dist_release文件夹
npm run dev:web
// 或者
yarn dev: web
注: 因wepy中没有直接安装h5的依赖, 所以我们首次运行时, wepy将会为我们自动安装web相关依赖, 但是首次运行会报错提示找不到模块: redux, 此时退出进程, 重新安装依赖即可.
-
在Atom里先安装Vue的语法高亮 - language-vue，如果装过了就忽略这一步。
-
打开Atom -> Config菜单。在core键下添加：
customFileTypes:
"text.html.vue": [
"wpy"
]
- 对于页面中不识别的其他文件, 如
.wxml后缀文件, 我们将页面自动识别的plain text, 改为vue component即可实现代码高亮
-
在 Code 里先安装 Vue 的语法高亮插件 Vetur。
-
打开任意 .wpy 文件。
-
点击右下角的选择语言模式，默认为纯文本。
-
在弹出的窗口中选择 .wpy 的配置文件关联...。
-
在选择要与 .wpy 关联的语言模式 中选择 Vue。
-
对于页面中不识别的其他文件, 如
.wxml后缀文件, 我们将页面自动识别的纯文本, 改为vue-html即可实现代码高亮
-
打开项目
-
点击右上角详情按钮
-
关闭
ES6转ES5上传代码时自动补全上传代码时自动压缩功能 -
开启
不校验合法域名功能(小程序正式环境请求接口必须使用https)
-
开发严格遵循
airbnb编码规范, 未遵循将在控制台中报错, 因此我们将结构/样式/行为, 拆分成了三个文件, 并由.wpy文件进行整合, 便于进行code maintenance -
变量与方法使用驼峰式命名，并且避免使用$开头。 以$开头的标识符为WePY框架的内建属性和方法，可在JavaScript脚本中以this.的方式直接使用。
-
使用
Promise。 框架默认对小程序提供的API全都进行了Promise处理，甚至可以直接使用async/await等新特性进行开发。代码开发可使用最新的ES语法进行开发, 并对原有的callback函数进行了promisify, 同样的, 我们可以直接使用acync/await等ES7特性进行开发 -
事件绑定语法使用优化语法代替。
- 原
bindtap="click"替换为@tap="click"，原catchtap="click"替换为@tap.stop="click"。 - 原
capture-bind:tap="click"替换为@tap.capture="click"，原capture-catch:tap="click"替换为@tap.capture.stop="click"。 - 事件传参使用优化后语法代替。 原
bindtap="click" data-index={{index}}替换为@tap="click({{index}})"。 - 自定义组件命名应避开微信原生组件名称以及功能标签
<repeat>。 不可以使用input、button、view、repeat等微信小程序原生组件名称命名自定义组件；另外也不要使用WePY框架定义的辅助标签repeat命名。
- 具体语法规则, 详见
- 1. 优化wepy打包, 开发环境的依赖包避免打包进正式环境
- 2. sass全局注入变量参数, 省去每个页面引入的步骤
- 3. 增加NavigationBar组件, 替代之前的小程序默认导航条
- 4. 项目工程增加处理多个小程序打包的支持(多入口打包)
组件用于页面的导航功能, 替代掉原来的页面导航组件
主要用于实现更加精细化的导航控制, 处理一些之前无法完成的交互效果, 如
- 点击页面导航按钮, 弹出modal后, 点击确定才返回上一层
- 用户通过扫码直接进入内页, 没有直观的提示来方便用户返回到主页
- 在页面组件中引入该组件, 并在
components中声明
import NavigationBar from 'components/NavigationBar/index';
// ...
components = {
// ....
'navigation-bar': NavigationBar,
}
- 在页面结构中使用这个组件
<navigation-bar
:navigationBarTitle="navigationBarTitle"
:isNavigationBarNeedBack="isNavigationBarNeedBack"
:isNavigationBarFixed="isNavigationBarFixed"
:navigationBarBackground="navigationBarBackground"
:navigationBarFontSize="navigationBarFontSize"
:navigationBarColor="navigationBarColor"
:navigationPlaceholderBg="navigationPlaceholderBg"
:navigateParam="navigateParam"
></navigation-bar>
上面列明了所有支持的参数, 但是以上的所有参数均为可选项, 需要时可以自行传入来操作控制
| 参数名称 | 参数定义 |
|---|---|
| navigationBarTitle | 页面导航条标题 |
| isNavigationBarNeedBack | 是否显示返回按钮(主页默认不显示, 非主页默认显示, 扫码进入内页默认显示, 并在旁边显示首页两个字) |
| isNavigationBarFixed | 导航条是否固定于顶部, 为false时将跟随页面滑动 |
| navigationBarBackground | 导航条背景色 |
| navigationBarFontSize | 导航条字体大小 |
| navigationBarColor | 导航条字体颜色(修改此选项将同步影响返回按钮) |
| navigationPlaceholderBg | 导航条的占位块背景色(一般建议与主体背景相同, 否则容易出现ios上下拉出现其他颜色的情况) |
| navigateParam | 跳转参数, 用于控制点击跳转时的行为(可用参数: navigateBackType:1/2/3,title,content) |