uni-app之picker选择器、打包、ucharts

11月4日

1、选择器

• 用到uniapp里的picker内置组件

2、选择时间功能

2.1、

2.2、需求

• 在11点前下单，显示明天上下午，11点后下单显示后天上下午

  • 判断这个小时数是否大于11,如果大于了要怎么样,小于了又怎么样

• 页面简单布局

  • html

    • 
                  配送时间:
                  
                      {{array[index]}}
                  
                  
              

  • 再data中定义

    • 
      export default{
          data(){
              return{
                  array:['明天上午(8:00-10:00)','明天下午(13:00-21:00)','后天上午(8:00-10:00)','后天下午(13:00-21:00)']
                  index：0  // 默认显示索引为0的时间
                  disabled:false
              }
          },
          methods:{
             bindPickerChange: function(e) {
                      console.log('picker发送选择改变，携带值为',e.detail.value)
                      this.index = e.detail.value
                  },
          }
      }
      

  • css

    • .freight {
              position: relative;
              // margin-top: 20rpx;
              font-size: 24rpx;
              display: flex;
              justify-content: space-between;
              align-items: center;
              height: 102rpx;
              background-color: #fff;
              padding: 0 20rpx;
      ​
              // border-bottom: 1px solid #eee;
              .dev {
                  font-size: 24rpx;
              }
      ​
              .text {
                  color: #ff8400;
                  font-size: 26rpx;
                  margin-left: 200rpx;
                  // margin-left: 50rpx;
              }
      ​
              .img {
                  position: absolute;
                  right: 0;
                  bottom: 20px;
                  width: 20rpx;
                  height: 30rpx;
                  margin-right: 10rpx;
              }
          }

2.1.1、步骤

• 这里由于接口里没有返回下单时间的字段

  • 通过拿到今天的小时数进行判断

    • 由于刚进页面会触发 getList()

    • 在getList()中 拿到今天的小时数

      • getList(){
            var day = new Date(); //获取系统当前时间 
            console.log(day);
            var hour = day.getHours(); //得到小时数
            console.log(hour);
        }

      • 这里就要做判断啦

        • 如果hour 小于等于11 就把后天上下午的时间禁用掉,

          • getList(){
                var day = new Date(); //获取系统当前时间 
                console.log(day);
                var hour = day.getHours(); //得到小时数
                console.log(hour);
                if(hour <= 11){
                    this.disabled = false
                }else{
                    this.disabled = true
                }
            }

3、uniapp之打包

• 先在manifest.json中配置你需要的东西，这里就不说啦

• 其次在发行中找到云打包

  • 

     

• 安卓打包

  • 

     

  • 有自有证书选择自有，无自有证书用共用

  • 选择自有证书

    • 证书别名，私钥，证书文件不可缺少，都要写上

  • 最后勾上传统打包

• ios打包

  • 

     

  • 跟安卓的步骤一样

• 在这里注意: 安卓跟苹果的包名 千万别混淆 各是各的

11月5日

1、App中使用uCharts

这里我用的插件秋云 ucharts

• 官方网站：https://www.ucharts.cn

2、插件地址

• 秋云 ucharts echarts 高性能跨全端图表组件 - DCloud 插件市场

3、测试

• 这里我简单的做了一个测试

3.1、组件的引用方式

• uni_modules 版：通过 uni-app 插件市场 uCharts发布页面点击使用 HBuilderX导入插件按钮导入到您的项目中

• 非uni_modules版、非 uniCloud 版：通过码云或 npm 下载至本地后，将 static 目录下文件复制到您项目根目录的 static 文件夹下，其他文件复制至 components 目录后即可使用。

3.2、组件目录说明

├── components
│ └── qiun-data-chatrs──────────# 组件主入口模块
│ └── qiun-error──────────────# 错误提示组件文件目录（可以修改错误提示图标以减少包体积）
│ └── qiun-loading────────────# 加载动画组件文件目录（可以删除您不需要的动画效果以减少包体积）
├── js_skd
│ └── u-charts
│ ── └──config-echarts.js ───────# ECharts默认配置文件（非APP端内可作为实例公用中转）
│ ── └──config-ucharts.js ───────# uCharts默认配置文件（非APP端内可作为实例公用中转）
│ ── └──u-charts.js───────────# uCharts基础库（组件内引用该文件）
│ ── └──u-charts.min.js────────# 压缩后的uCharts基础库（如小程序包过大，请修改引用为此文件）
├── static
│ └── app-plus───────────────# 条件编译目录，仅编译到APP端
│ ── └──echarts.min.js──────────# Echarts基础库v4.2.1
│ └── h5───────────────────# 条件编译目录，仅编译到H5端
│ ── └──echarts.min.js──────────# Echarts基础库v4.2.1

3.3、代码实例

• 
  ​
  
  ​
  

• 效果

  •