【愚公系列】2022 年 11 月 微信小程序 -app.json 配置属性之 entryPagePath
作者：愚公搬代码
- 2022-11-07 福建
本文字数：3063 字
阅读完需：约 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(); }); }});
复制代码
二、运行效果
划线
评论
复制
发布于: 刚刚阅读数: 3
版权声明: 本文为 InfoQ 作者【愚公搬代码】的原创文章。
原文链接:【http://xie.infoq.cn/article/f894bdd796eb059535b155cfa】。文章转载请联系作者。
愚公搬代码
关注
还未添加个人签名 2022-03-01 加入
该博客包括：.NET、Java、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、python、大数据等相关使用及进阶知识。查看博客过程中，如有任何问题，皆可随时沟通。
评论