uni-app项目搭建
我们使用uni-app的官方IDE——HBuilderX来进行开发。
创建项目
【文件】-》【新建】-》【项目】 输入项目名，选择默认模板
运行项目
【运行】-》【运行到内置浏览器】
【运行】-》【运行到手机或者模拟器】-》【运行到Android App基座】
打包APP
目录结构
manifest.json —— 配置应用名称、appid、logo、版本等打包信息。
pages.json —— 配置页面路由、导航条、选项卡等页面信息
uni.scss —— uni-app内置的常用样式变量
main.js —— Vue初始化入口文件
内含vue2和vue3的不同写法
App.vue —— 应用配置，用来配置app全局样式以及监听应用生命周期
static ——存放应用引用的静态资源（所有静态资源都放在这个目录下）
vue转向uni-app的开发经验
-
开发依然使用Vue单文件组件
template,script,style -
组件标签靠近小程序规范
<div>换成view,<span>换成<text>,<a>换成<navigator> -
接口能力（JS API）靠近微信小程序规范，但需要将前缀wx换成uni。
-
使用flex布局进行开发，单位rpx
-
非H5端不支持window、document、navigator等JS API
uni-app生命周期
新建page，tabbar
在pages目录下点击新建页面，选择默认模板即可。同时要在pages.json中注册
来到pages.json，我们可以设置底部的bar。
效果如下：
实现抽奖UI
使用flex布局，v-show控制两个按钮的显示。
抽奖功能实现
有三个方法： start方法使isOver变为false按钮显示结束抽奖，并且开始倒计时抽奖。 stop方法是isOver变为true按钮显示开始抽奖，并且删除计时器，停止抽奖。
设置页面UI
我们使用uni-app的内置组件
效果如下：
设置页面功能实现
设置默认最大值、最小值以及时间间隔。并且给input绑定v-model实现数值改变体现在UI上。
当我们点击保存按钮，调用onSave事件，运用到了uni-app的内置api--uni.setStorageSync()实现本地存储。并且在已进入设置页面就自动提取出存储的setting，如果没有setting就采用默认值。
并且给页面中的max、min和interval进行赋值。
抽奖页面功能完善
现在要做的是在抽奖页面使用我们在设置页面存储的值。
bug：当最小值调为1时，即使最大值设置为1000也会出现1000以上的数字
这是因为我们在存储的时候是以字符串的形式存储，而随机数的方法我们写的是相加，所以会出现这样的问题。
解法：使用parseInt即可
至此数字版卡比抽奖结束
