前言

一、entryPagePath

1.入口文件的配置

指定小程序的默认启动路径（首页），常见情景是从微信聊天列表页下拉启动、小程序列表启动等。如果不填，将默认为 pages 列表的第一项。不支持带页面路径参数。

{
  "entryPagePath": "pages/index/index"
}

2.实际页面的四元数

2.1 index.wxml

<!--index.wxml-->
<view class="container">

  <view class="title">快速了解云开发</view>

  <view class="top_tip">免鉴权接口调用 免部署后台 高并发</view>

  <view class="power" wx:key="title" wx:for="{{powerList}}" wx:for-item="power">
    <view class="power_info" data-index="{{index}}" bindtap="onClickPowerInfo">
      <view class="power_info_text">
        <view class="power_info_text_title">{{power.title}}</view>
        <view class="power_info_text_tip">{{power.tip}}</view>
      </view>
      <image wx:if="{{!power.showItem}}" class="power_info_more" src="../../images/arrow.svg"></image>
      <image wx:if="{{power.showItem}}" class="power_info_less" src="../../images/arrow.svg"></image>
    </view>
    <view wx:if="{{power.showItem}}">
      <view wx:key="title" wx:for="{{power.item}}">
        <view class="line"></view>
        <view class="power_item" bindtap="jumpPage" data-page="{{item.page}}">
          <view class="power_item_title">{{item.title}}</view>
          <image class="power_item_icon" src="../../images/arrow.svg"></image>
        </view>
      </view>
    </view>
  </view>

  <view class="environment" bindtap="onChangeShowEnvChoose">当前环境 {{ selectedEnv.alias }}</view>

  <cloud-tip-modal showUploadTipProps="{{showUploadTip}}"></cloud-tip-modal>

</view>

2.1 index.wxss

/**index.wxss**/

page {
  padding-top: 54rpx;
  background-color: #f6f6f6;
  padding-bottom: 60rpx;
}

.title {
  font-family: PingFang SC;
  font-weight: 500;
  color: #000000;
  font-size: 44rpx;
  margin-bottom: 40rpx;
}

.top_tip {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #888888;
  margin-bottom: 28rpx;
}

.power {
  margin-top: 30rpx;
  border-radius: 5px;
  background-color: white;
  width: 93%;
  padding-bottom: 1rpx;
}

.power_info {
  display: flex;
  padding: 30rpx 25rpx;
  align-items: center;
  justify-content: space-between;
}

.power_info_more {
  width: 30rpx;
  height: 30rpx;
  transform: rotate(90deg);
}

.power_info_less {
  width: 30rpx;
  height: 30rpx;
  transform: rotate(270deg);
}

.power_info_text {
  display: flex;
  flex-direction: column;
}

.power_info_text_title {
  margin-bottom: 10rpx;
  font-weight: 400;
  font-size: 35rpx;
}

.power_info_text_tip {
  color: rgba(0, 0, 0, 0.4);
  font-size: 25rpx;
}

.power_item {
  padding: 30rpx 25rpx;
  display: flex;
  justify-content: space-between;
}

.power_item_title {
  font-size: 30rpx;
}

.power_item_icon {
  width: 30rpx;
  height: 30rpx;
}

.line {
  width: 95%;
  margin: 0 auto;
  height: 2rpx;
  background-color: rgba(0, 0, 0, 0.1);
}

.environment {
  color: rgba(0, 0, 0, 0.4);
  font-size: 24rpx;
  margin-top: 25%;
}

2.1 index.json

{
  "usingComponents": {
    "cloud-tip-modal": "/components/cloudTipModal/index"
  }
}

2.1 index.js

// index.js
// const app = getApp()
const { envList } = require('../../envList.js');

Page({
  data: {
    showUploadTip: false,
    powerList: [{
      title: '云函数',
      tip: '安全、免鉴权运行业务代码',
      showItem: false,
      item: [{
        title: '获取OpenId',
        page: 'getOpenId'
      },
      //  {
      //   title: '微信支付'
      // },
       {
        title: '生成小程序码',
        page: 'getMiniProgramCode'
      },
      // {
      //   title: '发送订阅消息',
      // }
    ]
    }, {
      title: '数据库',
      tip: '安全稳定的文档型数据库',
      showItem: false,
      item: [{
        title: '创建集合',
        page: 'createCollection'
      }, {
        title: '更新记录',
        page: 'updateRecord'
      }, {
        title: '查询记录',
        page: 'selectRecord'
      }, {
        title: '聚合操作',
        page: 'sumRecord'
      }]
    }, {
      title: '云存储',
      tip: '自带CDN加速文件存储',
      showItem: false,
      item: [{
        title: '上传文件',
        page: 'uploadFile'
      }]
    }, {
      title: '云托管',
      tip: '不限语言的全托管容器服务',
      showItem: false,
      item: [{
        title: '部署服务',
        page: 'deployService'
      }]
    }],
    envList,
    selectedEnv: envList[0],
    haveCreateCollection: false
  },

  onClickPowerInfo(e) {
    const index = e.currentTarget.dataset.index;
    const powerList = this.data.powerList;
    powerList[index].showItem = !powerList[index].showItem;
    if (powerList[index].title === '数据库' && !this.data.haveCreateCollection) {
      this.onClickDatabase(powerList);
    } else {
      this.setData({
        powerList
      });
    }
  },

  onChangeShowEnvChoose() {
    wx.showActionSheet({
      itemList: this.data.envList.map(i => i.alias),
      success: (res) => {
        this.onChangeSelectedEnv(res.tapIndex);
      },
      fail (res) {
        console.log(res.errMsg);
      }
    });
  },

  onChangeSelectedEnv(index) {
    if (this.data.selectedEnv.envId === this.data.envList[index].envId) {
      return;
    }
    const powerList = this.data.powerList;
    powerList.forEach(i => {
      i.showItem = false;
    });
    this.setData({
      selectedEnv: this.data.envList[index],
      powerList,
      haveCreateCollection: false
    });
  },

  jumpPage(e) {
    wx.navigateTo({
      url: `/pages/${e.currentTarget.dataset.page}/index?envId=${this.data.selectedEnv.envId}`,
    });
  },

  onClickDatabase(powerList) {
    wx.showLoading({
      title: '',
    });
    wx.cloud.callFunction({
      name: 'quickstartFunctions',
      config: {
        env: this.data.selectedEnv.envId
      },
      data: {
        type: 'createCollection'
      }
    }).then((resp) => {
      if (resp.result.success) {
        this.setData({
          haveCreateCollection: true
        });
      }
      this.setData({
        powerList
      });
      wx.hideLoading();
    }).catch((e) => {
      console.log(e);
      this.setData({
        showUploadTip: true
      });
      wx.hideLoading();
    });
  }
});

二、运行效果