action-hong/kkopite-template-mini-program

小程序模板

介绍

小程序的模板, 集成了scss, i18n, computed, mobx等相关功能

采用了小程序提供的i18拓展, 故需要对src目录下的文件进行编译才可以使用

该项目的目录结构参见该项目

前提

• 安装微信开发者工具
• 安装node

开始

# 根目录
npm install

cd src

npm install

cd ..

# 编译src文件, 生成dist文件
npm run build

cd dist

npm install

注意生成的/dist目录即为真正交付的小程序代码, 使用微信开发者工具打开/dist目录, 选择工具-->构建npm, 参见小程序文档关于npm的支持

构成成功后, 开发者工具既可以运行了

开发

注意:请不要直接去修改dist下目录的文件, 而是应该通过修改src下的文件, 然后进行编译输出到dist

# 根目录
# 该指令会实时监听对 src目录下文件的修改, 然后实时编译到 dist目录下
npm run watch

然后像往常开发小程序一样对src下的目录编辑就行了

---

当前仅支持对src下这几类文件进行实时监听并进行编译复制到dist目录下对应位置:

• *.js
• *.scss
• *.wxml
• *.json
• *.wxs
• assets/xx

PS: 当前并不支持监听src目录下删除文件, 自动同步到dist目录下

关于样式

当前使用scss来做样式开发, 可参见官方文档

通过npm run watch或npm run sass指令 会将scss文件编译成小程序需要的wxss文件

PS: 你也可以完全不使用scss所提供的所有功能, 而是像过去写wxss文件一样写scss就行

样式文件中使用url引入图片

由于无法在wxss文件中直接使用本地图片, 故需要对源文件中的本地图片进行处理(gulp-css-base64), 转换成base64形式(或者直接传到服务器上引入也可以)

快速生成Page 和 component

# 根目录下
npm run new

# 选择page / component

# 输入名称 如 foo

# 即会生成 page/foo/[index.js, index.scss, index.wxml, index.json] 四个文件, 方便快速开发

注意点:

• 这里生成的page页面并未添加在app.json上, 需要手动添加
• 这里生成的page采用Component函数, 并默认添加好了computed、miniprogram-i18n这两个behavior, 方便开发
• 使用了微信提供的mobx相关的扩展库, 统一管理所有相关状态(可以查看相关文档了解更多关于mobx的知识)

关于分包

由于用了几个gif图导致超过2m的限制, 故单独创建一个分包放置home页面相关的组件, 页面, gif, 起始如果有台服务器放这些图片就没这么麻烦了

测试

该项目使用了jest来做为单元测试的工具, 根据test/utils/command.test.js的格式编写相关的单元测试

运行npm run test来单元测试

TODO

• 支持对删除文件的同步
• npm run new生成页面后自动在app.json下添加对应目录