前言
一、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(); }); } });
二、运行效果
