#yyds干货盘点#愚公系列2022年10月 微信小程序-全局配置属性之入口页面

Posted 2022-10-10

前言

一、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();
    );
  
);

二、运行效果