草庐IT

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

愚公搬代码 2023-03-28 原文

前言

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

二、运行效果

有关#yyds干货盘点#【愚公系列】2022年10月 微信小程序-全局配置属性之入口页面的更多相关文章

  1. ruby-on-rails - 如果为空或不验证数值,则使属性默认为 0 - 2

    我希望我的UserPrice模型的属性在它们为空或不验证数值时默认为0。这些属性是tax_rate、shipping_cost和price。classCreateUserPrices8,:scale=>2t.decimal:tax_rate,:precision=>8,:scale=>2t.decimal:shipping_cost,:precision=>8,:scale=>2endendend起初,我将所有3列的:default=>0放在表格中,但我不想要这样,因为它已经填充了字段,我想使用占位符。这是我的UserPrice模型:classUserPrice回答before_val

  2. ruby-on-rails - 在混合/模块中覆盖模型的属性访问器 - 2

    我有一个包含模块的模型。我想在模块中覆盖模型的访问器方法。例如:classBlah这显然行不通。有什么想法可以实现吗? 最佳答案 您的代码看起来是正确的。我们正在毫无困难地使用这个确切的模式。如果我没记错的话,Rails使用#method_missing作为属性setter,因此您的模块将优先,阻止ActiveRecord的setter。如果您正在使用ActiveSupport::Concern(参见thisblogpost),那么您的实例方法需要进入一个特殊的模块:classBlah

  3. ruby - 多个属性的 update_column 方法 - 2

    我有一个具有一些属性的模型:attr1、attr2和attr3。我需要在不执行回调和验证的情况下更新此属性。我找到了update_column方法,但我想同时更新三个属性。我需要这样的东西:update_columns({attr1:val1,attr2:val2,attr3:val3})代替update_column(attr1,val1)update_column(attr2,val2)update_column(attr3,val3) 最佳答案 您可以使用update_columns(attr1:val1,attr2:val2

  4. ruby - Nokogiri 剥离所有属性 - 2

    我有这个html标记:我想得到这个:我如何使用Nokogiri做到这一点? 最佳答案 require'nokogiri'doc=Nokogiri::HTML('')您可以通过xpath删除所有属性:doc.xpath('//@*').remove或者,如果您需要做一些更复杂的事情,有时使用以下方法遍历所有元素会更容易:doc.traversedo|node|node.keys.eachdo|attribute|node.deleteattributeendend 关于ruby-Nokog

  5. ruby-on-rails - Rails 模型——非持久类成员或属性? - 2

    对于Rails模型,是否可以/建议让一个类的成员不持久保存到数据库中?我想将用户最后选择的类型存储在session变量中。由于我无法从我的模型中设置session变量,我想将值存储在一个“虚拟”类成员中,该成员只是将值传递回Controller。你能有这样的类(class)成员吗? 最佳答案 将非持久属性添加到Rails模型就像任何其他Ruby类一样:classUser扩展解释:在Ruby中,所有实例变量都是私有(private)的,不需要在赋值前定义。attr_accessor创建一个setter和getter方法:classUs

  6. 微信小程序通过字典表匹配对应数据 - 2

    前言一般来说,前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可,但要是匹配的code码比较多或者多个页面用到时,为了便于后期维护,后台就会使用字典表让前端匹配,下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs?{{method(a,b)}}可以看到,上述代码是一个调用方法传值的操作,在vue中很常见,多用于数据之间的转换,但由于微信小程序诸多限制的原因,你并不能优雅的这样操作,可能有人会说,为什么不用if判断实现呢?但是if判断的局限性在于如果存在数据量过大时,大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立

  7. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  8. 微信小程序开发入门与实战(Behaviors使用) - 2

    @作者:SYFStrive @博客首页:HomePage📜:微信小程序📌:个人社区(欢迎大佬们加入)👉:社区链接🔗📌:觉得文章不错可以点点关注👉:专栏连接🔗💃:感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序(🔥)目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中,用于实现

  9. ruby - Chef Ruby 遍历 .erb 模板文件中的属性 - 2

    所以这可能有点令人困惑,但请耐心等待。简而言之,我想遍历具有特定键值的所有属性,然后如果值不为空,则将它们插入到模板中。这是我的代码:属性:#===DefaultfileConfigurations#default['elasticsearch']['default']['ES_USER']=''default['elasticsearch']['default']['ES_GROUP']=''default['elasticsearch']['default']['ES_HEAP_SIZE']=''default['elasticsearch']['default']['MAX_OP

  10. ruby - 获取数组中的值并最小化某个类属性的最优雅的方法是什么? - 2

    假设我有以下类(class):classPersondefinitialize(name,age)@name=name@age=ageenddefget_agereturn@ageendend我有一组Person对象。是否有一种简洁的、类似于Ruby的方法来获取最小(或最大)年龄的人?如何根据它对它们进行排序? 最佳答案 这样做会:people_array.min_by(&:get_age)people_array.max_by(&:get_age)people_array.sort_by(&:get_age)

随机推荐