小程序自学之路--可配置转盘（1）

最新推荐文章于 2023-12-07 15:46:08 发布

程序猿非鱼

最新推荐文章于 2023-12-07 15:46:08 发布

阅读量455

点赞数

文章标签：小程序微信小程序学习

本文链接：https://blog.csdn.net/qq_16856917/article/details/128497543

版权

前言

前段时间大火的微信小程序’羊了个羊’，让我对微信小程序充满了好奇，萌发自学微信小程序的冲动。YY一下自己是不是也可以做出一个啥子小程序呢。
经过两个星期的努力，终于完成了个初版的可配置转盘小程序，也算完成了一次学习闭环。这里记录一下学习过程，分享给同样对小程序感兴趣的萌新们。
代码已在github开源：https://github.com/Spute/fun-turntable/tree/main
可扫码试用小程序，查看效果：

准备

先看官方文档，简单了解一下微信小程序的开发流程。依葫芦画瓢地注册了个小程序账号，下载微信开发者工具。
为了更好了解小程序开发的特点，可以将其与网页开发对比。

小程序与网页开发对比

网页前端开发有三剑客：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方法渲染出转盘。
以下是页面结构定义代码

# 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
    });

},