学习记录：微信原生小程序

注册账号

https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/ 详情查看微信开放文档

新建项目

登录微信公众平台找到开发管理下的开发设置，找到AppID填入下面输入框中

一般情况下会选择不使用云服务，选择不使用模板，之后确认好文件位置及项目名称选择确定。

文件介绍

项目新建成功之后会自动生成以上几种文件：

• pages文件夹是用来存放小程序各个页面文件的.

       index文件夹代表小程序整个index页面
                index.js用来存放当前页面的js逻辑，内部包含了小程序页面的生命周期
                index.json用来存放当前页面的配置，会覆盖掉冲突的公共配置
                index.wxml用来书写页面代码搭建页面结构，参照html文件
                index.wxss用来书写当前页面样式，参照css文件
  

• app.js是用来书写整个小程序整体逻辑，放在小程序的各个生命周期中.

• app.json用来存放小程序公共配置.

• app.wxss小程序的公共样式表

• 在utils中定义方法、工具等，主要使用common.js暴露接口

tabBar页面

几乎所有小程序都会需要配置tabBar页面，tabBar页面最少配置两项最多配置五项。

1、全局公共配置，放在app.json中

**注意：**新建页面需要在app.json中pages属性中直接添加页面路径，保存后会自动生成页面文件，无需手动新建文件夹

2、自定义tabBar，新建tabbar组件

由于在某些情况下我们需要特定的tabbar按钮样式、动画样式，此时我们就需要自己设计tabBar组件

1. 要在app.json文件中的tabbar属性中添加配置 “custom”: true,同时tabbar中其他的一些基础配置也是必须保留的，否则会报错
2. 在pages文件夹的同级新建"custom-tab-bar"组件文件夹，注意名称必须一致，否则无法识别
   

自定义tabBar案例

app.js

App({
  globalData: {
    selectedIndex: 0
  }
})

index.js
注意：自定义中的pagePath路径必须要以"/pages"开头，公共配置是以“pages”开头，二者要区分开

var app = getApp()
Component({
  
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    selected: 0,
    color: "#7A7E83",
    selectedColor: "#3cc51f",
    list: [
    {
      "pagePath": "/pages/index/index",
      "text": "首页",
      "iconPath": "../img/隐患上报.png",
      "selectedIconPath":"../img/隐患未处置.png"
    },
     {
      "pagePath": "/pages/logs/index",
      "text": "日志",
      "iconPath": "../img/隐患上报.png",
      "selectedIconPath":"../img/隐患未处置.png"
    },
     {
      "pagePath": "/pages/home/index",
      "text": "主页",
      "iconPath": "../img/隐患上报.png",
      "selectedIconPath":"../img/隐患未处置.png"
    }
  ]
  },
  attached() {},
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      app.globalData.selectedIndex = data.index;
      const url = data.path
      wx.switchTab({
        url
      })
    },
  },
  ready(){
    this.setData({
      selected: app.globalData.selectedIndex
    })
  },
})

index.wxml

<view class="tab-bar">
  <view  wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" wx:for-index="index" data-index="{{index}}" bindtap="switchTabbar">
    <image class=" {{selected == index?'active':''}}"  src="{{selected===index?item.selectedIconPath:item.iconPath}}"></image>
    <view  class="{{ item.tuqi }}" wx:if="{{ selected===index }}" class="cover-view"  style="color: {{selected === index ? selectedColor : color}} ">{{item.text}}</view>
  </view>
</view>

index.wxss

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid #ccc;
  border-top-left-radius: 25rpx;
  border-top-right-radius: 25rpx;
}
.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.tab-bar-item image {
  transition: all .25s ease;
  width: 27px;
  height: 27px;
}
.tab-bar-item .cover-view {
  font-size: 20rpx;
  margin-top: 5rpx;
 
  animation-name: wipe-in-up; /*动画的名称 */
  animation-duration: 1000ms; /*动画从开始到结束的时间*/
}
.active {
  transition: property duration timing-function delay;
  transform: scale(1.2);
  border-radius: 50rpx;
 
  margin-top: -50rpx;
  transform: translateY(-10rpx); 
 
  animation-name: wipe-in-up; /*动画的名称 */
  animation-duration: 1000ms; /*动画从开始到结束的时间*/
 
}
 
@keyframes wipe-in-up {
  from {
    clip-path: inset(100% 0 0 0);
  }
 
  to {
    clip-path: inset(0 0 0 0);
  }
}
 
[transition-style="in:wipe:up"] {
  animation: 2.5s cubic-bezier(.25, 1, .30, 1) wipe-in-up both;
}
 
.tq {
  margin-top: -50rpx;
}