前言
前段时间大火的微信小程序'羊了个羊'，让我对微信小程序充满了好奇，萌发自学微信小程序的冲动。YY一下自己是不是也可以做出一个啥子小程序呢。
经过两个星期的努力，终于完成了个初版的可配置转盘小程序，也算完成了一次学习闭环。这里记录一下学习过程，分享给同样对小程序感兴趣的萌新们。
代码已在github开源：https://github.com/Spute/fun-turntable/tree/main
-
可扫码试用小程序，查看效果：
image.png
准备
- 先看官方文档，简单了解一下微信小程序的开发流程。依葫芦画瓢地注册了个小程序账号，下载微信开发者工具。
- 为了更好了解小程序开发的特点，可以将其与网页开发对比。
小程序与网页开发对比
- 网页前端开发有三剑客：HTML、CSS、JavaScript。通过三种技术的融合产生了各式各样的网站。对应的小程序也有'三剑客'。
| 功能 | 小程序 | 网页 |
|---|---|---|
| 页面结构 | wxml | html |
| 页面样式 | wxss | css |
| 页面逻辑 | js和wxs | js |
- 微信小程序是没有普通网页的DOM API和BOM API，因此为了实现页面结构的动态渲染，只能通过wxml的列表渲染和条件渲染等功能。
需求
- 先确认好需要实现的功能，以及每个功能的入口，所属哪个页面。以下简单列举了三个页面下对应的功能。
| 页面 | 功能点 |
|---|---|
| 转盘页 | 1. 转盘；2.查看&清除结果；3.分享功能 |
| 选择转盘页 | 1. 热门转盘，支持新增、编辑选项；2. 个人转盘，保存自定义的转盘； |
| 设置页 | 1. 可配置功能（开关音乐，是否重复，设置旋转时间） |
项目结构
- 创建一个项目，查看项目结构，了解每个文件的作用后，对项目就会有个整体的认知，知道将代码写到哪合适比知道怎么写代码更重要。
│ .eslintrc.js # eslint规范配置文件
│ .gitignore # 告诉Git要忽略项目中的哪些文件
│ app.js # 小程序逻辑文件
│ app.json # 小程序公共配置
│ app.wxss # 小程序公共样式
│ project.config.json # 项目公共配置文件
│ project.private.config.json # 项目私有配置文件
│ sitemap.json # 用来配置小程序及其页面是否允许被微信索引
│
├─image # 用于放置资源图片
│ drop.png
│ icon-HL.png
│ icon.png
│
├─pages # page页目录
│ ├─config # 配置page页
│ │ config.js # 页面逻辑
│ │ config.json # 页面配置
│ │ config.wxml # 页面结构
│ │ config.wxss # 页面样式
│ │
│ ├─index # 首页page（转盘页）
│ │ index.js
│ │ index.json
│ │ index.wxml
│ │ index.wxss
│ │
│ ├─logs # 日志page
│ │ logs.js
│ │ logs.json
│ │ logs.wxml
│ │ logs.wxss
│ │
│ ├─select # 转盘选择page
│ │ select.js
│ │ select.json
│ │ select.wxml
│ │ select.wxss
│ │
│ └─select-edit # 转盘编辑page（二级页面）
│ select-edit.js
│ select-edit.json
│ select-edit.wxml
│ select-edit.wxss
│
└─utils # 工具文件夹，存放一些通用的脚手架
util.js
功能分析
- 确定好项目结构后，接下来就是根据需求制定好实施方案。
转盘实现
-
参照效果图，可以拆分成可旋转的盘和固定的指针盘两部分组成。
- 转盘是由9个选项文字和9条分隔线组成，选项文字和分隔线都经过一定角度的旋转
- 中间的指针盘，是由一个圆形上面叠一个等腰三角形构成
-
每次加载转盘页时（在onLoad方法中实现），通过奖项列表计算各选项文字和分隔线的旋转值，然后通过setData方法渲染出转盘。
image.png 以下是页面结构定义代码
# pages/index/index.wxml
<view class="canvas-container">
<view animation="{{animationData}}" class="canvas-content">
<view class="canvas-line">
<view class="canvas-litem" wx:for="{{awardsList}}" wx:key="unique" style="-webkit-transform: rotate({{item.lineTurn}});transform: rotate({{item.lineTurn}})"></view>
</view>
<view class="canvas-list">
<view class="canvas-item" wx:for="{{awardsList}}" wx:key="unique">
<view class="canvas-item-text" style="-webkit-transform: rotate({{item.turn}});transform: rotate({{item.turn}})">{{item.award}}</view>
</view>
</view>
</view>
<view bindtap="getLottery" class="canvas-btn {{btnDisabled}}">开始</view>
</view>
- 渲染转盘方法
# pages/index/index.js
drawTruntable() {
var awardsConfig = app.awardsConfig.awards,
len = awardsConfig.length,
awardsList = [],
turnNum = 1 / len
for (var i = 0; i < len; i++) {
// 奖项列表
awardsList.push({
turn: i * turnNum + 'turn', // 文字旋转turn 值
lineTurn: i * turnNum + turnNum / 2 + 'turn', // 线条旋转turn 值
award: awardsConfig[i].name // 文字
});
}
this.setData({
awardsList: awardsList
});
},
结束语
- 由于篇幅问题，这里只介绍了转盘页的部分功能。编辑页等的实现会在后续介绍。
- 目前也在尝试其他技术，完善转盘项目。如接入海报插件用于朋友圈分享；完善服务端功能实现热门转盘点赞、评论等功能。
