<img src="./README_STATIC/login_bg_1.png" width="60%">

## 品牌事件库 for Mini Program

该项目为 `品牌事件库` 的小程序版本，项目使用 `wepy` 框架开发，如果没有使用过，建议去[github.com](https://github.com/Tencent/wepy)看看，并且还需要一定vue基础。

---

## 启动项目

* clone 下来项目后先装好相关依赖
  * `npm install`

* 然后运行下面方法，会自动生成 dist文件(编译后小程序可解析的代码)
  * `npm run dev`
  * 或者 `wepy build --watch`

* 除此之外还需要下载 `微信web开发者工具` 配合成熟的IDE进行开发。
  * 我用的是 `Atom` 编辑器，如果不习惯也可以用别的代替。

---

## 注意事项

* **团队开发**
  * 请规范代码风格与原项目一致
  * 请在分支上进行开发测试，最后并入 `master`

* **新增页面**
  * `src/pages/temp.wpy` 文件为页面模板文件，新建页面直接复制这个然后修改就可以了。(一般情况下，改成如下形式就可以自由添加内容了)
  * 新增的页面必须在 `src/app.wpy` 中配置路径，否则会报错。
  * 需要注意 `页面` 和 `组件` 的声明方式有所不同：
  * 页面声明 `export default class pageName extends wepy.page`
  * 组件声明 `export default class componentName extends wepy.component`
  * `pageName`、`componentName` 是自定义的

```html
  <!-- 假如文件名是 test.wpy 则改成如下形式 -->
  <template>
    <view class="testWpy">
      test
    </view>
  </template>

  <script>
  import wepy from 'wepy'

  export default class test extends wepy.page {
    onLoad () {
      console.log('test')
    }
  }
  </script>

  <style lang="scss" scoped>
  .testWpy{}
  </style>
```

* **代码高亮**
  * 安装 `vue` 语法高亮插件，将 `.wpy` 文件打开后设置语言为 `Vue Component`
  ![prtsc_001.png](./README_STATIC/prtsc_001.png)

* **编译坑点**
  * 只有 `src` 中的内容会被编译进 `dist`
  * `src` 中文件被**删除**、**重命名**，`dist` 中文件不会发生改变，而是生成新文件(这种情况经常导致修改的东西不生效，因为它使用的是旧文件)
  * 例子： `src` 下放入图片 `a.jpg` , 编译后 `dist` 目录下拷贝(生成) `a.jpg`，将 `src/a.jpg` 改为 `src/b.jpg` 后， `dist` 目录下同时有 `a.jpg` 和 `b.jpg`
  * 这个坑点常常会导致一些莫名其妙的bug，解决方法： 先 `npmr run clean` 删除 `dist` (也可以手动删除，但是需要关闭开发工具)，然后重新 `npm run dev` 生成新的 `dist`。
  * 提交代码之前需要 `npm run build` 一次。
  * 有时候运行时没报错， `npm run build` 完反而报错了，这种情况，再次执行 `npm run build` 就行了。

* **真机调试坑点**
  * 如果发现某一个元素内文字一直是首行缩进(非 `text-indent` 情况)可以尝试把元素内的内容写成一行：
  ![prtsc_001.png](./README_STATIC/prtsc_002.png)
  ![prtsc_001.png](./README_STATIC/prtsc_003.png)

* **公共样式 `_public.scss` 问题**
  * 直接改好是不会生效的，这里比较麻烦
  * 需要先 `npm run clean` 再 `npm run build` 或者 `npm run dev` 重新编译
  * 推荐在 `app.wpy` 中测试好样式，再把样式拷进 `_public.scss` 中
  * 不推荐直接写在 `app.wpy` ，因为这样显得很 **ugly** 且 **low**

---

## 参考文档

* [wepy 官网](https://tencent.github.io/wepy/)
* [github 项目](https://github.com/Tencent/wepy)
* [微信小程序组件化开发框架WePY官方文档](https://tencent.github.io/wepy/document.html#/)
* [在wepy框架中使用echarts](https://blog.csdn.net/juzipidemimi/article/details/81807110)

## 开发者

* QQ：1072907338 (林)
* Vx：lcb961212 (林)
