微信小程序会议OA首页-开发说明创建项目关于flex布局关于尺寸单位（rpx）关于WXS轮播图会议信息

目录

1. 创建项目

2. 关于flex布局

3. 关于尺寸单位（rpx）

4. 关于WXS

4. 轮播图

5. 会议信息

1. 创建项目

  • 基于微信原生开发工具，稳定版 Stable Build (1.06.22010310)

  • 创建项目前，请确定有小程序测试账号

  • 使用向导创建一个项目

  • 将默认生成的组件删除（index，logs），然后重新创建一个index首页

  • 创建投票，会议，设置，用户信息，登录等组件
    在app.json中，加入如下组件

  "pages": ["pages/index/index","pages/meeting/list/list","pages/vote/list/list","pages/ucenter/index/index","pages/ucenter/user/user","pages/auth/login/login"]

 

  • 先将资料中的图标拷入项目，配置tabbar (配置文件： app.json)
 

"list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "/static/tabBar/coding.png","selectedIconPath": "/static/tabBar/coding-active.png"},{"pagePath": "pages/meeting/list/list","iconPath": "/static/tabBar/sdk.png","selectedIconPath": "/static/tabBar/sdk-active.png","text": "会议"},{"pagePath": "pages/vote/list/list","iconPath": "/static/tabBar/template.png","selectedIconPath": "/static/tabBar/template-active.png","text": "投票"},{"pagePath": "pages/ucenter/index/index","iconPath": "/static/tabBar/component.png","selectedIconPath": "/static/tabBar/component-active.png","text": "设置"}]

 

 

项目的搭建已搭建起来， 在布局页面前，需要了解一下 Flex布局，
 

2. 关于flex布局
 

关于flex布局，详细参考：https://www.runoob.com/w3cnote/flex-grammar.html
 

可以在index组件中做些测试，来了解flex布局
 

index.wxml
 


<view class="container"><view><text>flex</text></view><view><text>flex</text></view><view><text>flex</text></view><view><text>flex</text></view><view><text>flex</text></view><view><text>flex</text></view><view><text>flex</text></view>
</view>

 

index.wxss
 

.container {display: flex;flex-direction: row;flex-wrap: wrap;
}
.container view {width: 200rpx;height: 100rpx;border:1rpx solid red;display: flex;justify-content: center;align-items: center;
}

 

3. 关于尺寸单位（rpx）
 

为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。与 CSS 相比，WXSS 扩展的特性有：尺寸单位样式导入
 

尺寸单位rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
 

 

4. 关于WXS
 

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
 

示例：
 

  • 创建WXS
 


var toDecimal2 = function (x) {var f = parseFloat(x);if (isNaN(f)) {return '0.00'}var f = Math.round(x * 100) / 100;var s = f.toString();var rs = s.indexOf('.');if (rs < 0) {rs = s.length;s += '.';}while (s.length <= rs + 2) {s += '0';}return s;}//module.exports = toDecimal2
module.exports = {toDecimal2:toDecimal2
}

 

  • 在wxml中使用
 

<!--pages/c/c.wxml-->
<wxs src="../../wxs/PageUtils.wxs" module="PageUtils"></wxs>
<wxs module="m1">
var msg = "hello world";module.exports.message = msg;
</wxs>
<view><text>pages/c/c.wxml,</text><text>{{m1.message}}</text><view><text>{{PageUtils.toDecimal2(123.453)}}</text></view><view><button type="primary" bindtap="jump">跳转到D页面</button></view>
</view>

 

注意事项
 WXS 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
 WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。
 WXS 的运行环境和其他 JavaScript 代码是隔离的，WXS 中不能调用其他 JavaScript 文件中定义的函数，也不能调用小程序提供的API。
 WXS 函数不能作为组件的事件回调。
 由于运行环境的差异，在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。
 以下是一些使用 WXS 的简单示例，要完整了解 WXS 语法，请参考WXS 语法参考。
 

4. 轮播图
 

  1. 配置配件 config/api.js
 


// 以下是业务服务器API地址// 本机开发API地址var WxApiRoot = 'http://localhost:8080/demo/wx/';// 测试环境部署api地址// var WxApiRoot = 'http://192.168.0.101:8070/demo/wx/';// 线上平台api地址//var WxApiRoot = 'https://www.oa-mini.com/demo/wx/';module.exports = {IndexUrl: WxApiRoot + 'home/index', //首页数据接口SwiperImgs: WxApiRoot+'swiperImgs', //轮播图MettingInfos: WxApiRoot+'meeting/list', //会议信息};

 

  1.  
    tabbar配置
     请参考 1）创建项目 部分
     
  2.  
    mock工具

     
  3.  
    用于模拟图片数据
     
     
 

上图中的模拟数据如下：
 

"images":[{"img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner1.png","text": "1"},{"img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner2.png","text": "2"},{"img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner3.png","text": "3"},{"img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner4.png","text": "4"},{"img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner5.png","text": "5"},{"img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner6.png","text": "6"}
]

 

图片从网上获取，所以需要联网。
 

  1. index.js 编写
 

/*** 生命周期函数--监听页面加载*/onLoad(options) {this.getSwiperImages();}//获取图片数据getSwiperImages() {let _this = this;wx.request({url: api.SwiperImgs,success(resp) {console.log(resp);_this.setData({images: resp.data.images})}});},
 

如果出现下图错误：

 


则如修改配置：

 

 

  1. 视图展示
     获取图片数据后可以进行页面的展示：
 


<view><swiper autoplay="true" indicator-dots="true" indicator-color="#fff" indicator-active-color="#00f"><block wx:for="{{images}}" wx:for-item="item" wx:for-index="index" wx:key="text"><swiper-item><view><image src="{{item.img}}" /></view></swiper-item></block></swiper>
</view>

 

  • 备注： wx:for-item 可以不指定，默认值为 item 该规则同样适用于wx:for-index
  • 轮播图的其他属性，可以参考官方文档
 

index.wxss page页面的样式设置
 

page{height: 100%;background-color: #efeff4;
}

 

  1. 图片拉伸问题
     如果不处理， 则将机型改变后，可能会出现轮播图片不能充满屏幕的问题，解决如下：
 

index.wxss 中加如下样式
 

.swiper-image {width: 750rpx;
}

 

index.wxml 中轮播图配置如下：

 

 

5. 会议信息
 

布局请参考课件中的 images/flex-示例.png
 

会议信息的模拟数据:
 

"lists": [{"id": "1","image": "/static/persons/1.jpg","title": "对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】","num":"304","state":"进行中","starttime": "2022-03-13 00:00:00","location": "深圳市·南山区"},{"id": "1","image": "/static/persons/2.jpg","title": "AI WORLD 2016世界人工智能大会","num":"380","state":"已结束","starttime": "2022-03-15 00:00:00","location": "北京市·朝阳区"},{"id": "1","image": "/static/persons/3.jpg","title": "H100太空商业大会","num":"500","state":"进行中","starttime": "2022-03-13 00:00:00","location": "大连市"},{"id": "1","image": "/static/persons/4.jpg","title": "报名年度盛事，大咖云集！2016凤凰国际论坛邀您“与世界对话”","num":"150","state":"已结束","starttime": "2022-03-13 00:00:00","location": "北京市·朝阳区"},{"id": "1","image": "/static/persons/5.jpg","title": "新质生活 · 品质时代 2016消费升级创新大会","num":"217","state":"进行中","starttime": "2022-03-13 00:00:00","location": "北京市·朝阳区"}]

 

将模拟数据放入data部分：
 


  
 

 

会议信息布局部分代码较多，请参考示例代码











本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/191033.html


如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！












相关文章










【有源码】基于asp.net的旅游度假村管理系统C#度假村美食住宿一体化平台源码调试 开题 lw ppt








【有源码】基于asp.net的旅游度假村管理系统C#度假村美食住宿一体化平台源码调试 开题 lw ppt




&#x1f495;&#x1f495;作者&#xff1a;计算机源码社 &#x1f495;&#x1f495;个人简介&#xff1a;本人七年开发经验&#xff0c;擅长Java、Python、PHP、.NET、微信小程序、爬虫、大数据等&#xff0c;大家有这一块的问题可以一起交流&#xff01; &#x1f495;&…




阅读更多...

















U-boot(二):主Makefile








U-boot(二):主Makefile




本文主要探讨210的主Makefile。 
Makefile uboot版本号&#xff1a;                 VERSION&#xff1a;主板本号                 PATCHLEVEL&#xff1a;次版本号                 SUBLEVEL&#xff1a;再次版本号                 EXTRAVERSION:附加信息 
VERSION  1
PATC…




阅读更多...

















OpenAI 解雇了首席执行官 Sam Altman








OpenAI 解雇了首席执行官 Sam Altman




Sam Altman 已被 OpenAI 解雇&#xff0c;原因是担心他与董事会的沟通和透明度&#xff0c;可能会影响公司的发展。该公司首席技术官 Mira Murati 将担任临时首席执行官&#xff0c;但 OpenAI 可能会从科技行业寻找新的首席执行官来领导未来的产品开发。Altman 的解雇给 OpenAI…




阅读更多...

















ubuntu下载conda








ubuntu下载conda




系统&#xff1a;Ubuntu18.04 
&#xff08;1&#xff09;下载安装包 
wget https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/Anaconda3-2021.11-Linux-x86_64.sh 
报错错误 403&#xff1a;Forbidden 解决方法 wget -U NoSuchBrowser/1.0 https://mirrors.tuna.tsingh…




阅读更多...

















机器学习算法——集成学习








机器学习算法——集成学习




目录 1. Bagging 1. Bagging 
Bagging&#xff08;bootstrap aggregating&#xff1a;自举汇聚法&#xff09;也叫装袋法&#xff0c;其思想是通过将许多相互独立的学习器的结果进行结合&#xff0c;从而提高整体学习器的泛化能力&#xff0c;是一种并行集成学习方法。 
工作流…




阅读更多...

















【SpringBoot】 环境准备








【SpringBoot】 环境准备




一.SpringBoot准备 
1.下载idea 
社区版 2021.1 - 2022.1.4 
专业版 无要求 2.Maven 
是一个工具,和Java没有关系 .  
主要功能是项目构建和依赖管理. 项目构建  上述对应的都是maven命令 .  依赖管理  添加坐标之后,点击刷新,右侧就会载入依赖.  Maven还有依赖传递和依赖排除功…




阅读更多...

















CCF ChinaSoft 2023 论坛巡礼｜软件测试产教研融合论坛








CCF ChinaSoft 2023 论坛巡礼｜软件测试产教研融合论坛




2023年CCF中国软件大会&#xff08;CCF ChinaSoft 2023&#xff09;由CCF主办&#xff0c;CCF系统软件专委会、形式化方法专委会、软件工程专委会以及复旦大学联合承办&#xff0c;将于2023年12月1-3日在上海国际会议中心举行。 本次大会主题是“智能化软件创新推动数字经济与社…




阅读更多...

















小程序申请，商户号申请，微信支付开通操作流程








小程序申请，商户号申请，微信支付开通操作流程




总目录 文章目录 总目录前言1 申请商户号&#xff08;如已有商户号跳过&#xff09;1 申请流程与资料2 详细申请步骤 2 申请开通接入微信支付步骤3 申请微信小程序1 申请小程序步骤2 查看小程序AppID 4 微信支付普通商户与AppID账号关联结语 前言 
本文主要讲解如何申请微信商户…




阅读更多...

















Dart笔记：glob 文件系统遍历








Dart笔记：glob 文件系统遍历




Dart笔记 文件系统遍历工具&#xff1a;glob 模块 作者&#xff1a;李俊才 &#xff08;jcLee95&#xff09;&#xff1a;https://blog.csdn.net/qq_28550263 邮箱 &#xff1a;291148484163.com 本文地址&#xff1a;https://blog.csdn.net/qq_28550263/article/details/13442…




阅读更多...

















探索游戏公司跨部门合作的项目管理工具选择








探索游戏公司跨部门合作的项目管理工具选择




为了实现出色的用户体验&#xff0c;游戏公司需要强大的研发能力和发行运营经验。通常情况下&#xff0c;游戏公司内部有多个独立工作的研发部门和发行部门&#xff0c;它们需要跨部门协作。随着公司快速发展和游戏项目增加&#xff0c;游戏公司迫切需要一套适用于特殊协作流程…




阅读更多...

















轻量级 Java 日志组件








轻量级 Java 日志组件




日志记录功能在开发中很常用&#xff0c;不仅可以记录程序运行的细节&#xff0c;方便调试&#xff0c;也可以记录用户的行为&#xff0c;是框架中不可或缺的组件。为最大程度复用现有的组件&#xff0c;我们就地取材使用了 JDK 自带的 JUL&#xff08;java.util.logging&#…




阅读更多...

















操作系统 day11（进程调度时机、切换、调度方式、调度程序）








操作系统 day11（进程调度时机、切换、调度方式、调度程序）




进程调度的时机 这里的主动放弃指的是—内中断&#xff08;异常、例外&#xff09;&#xff0c;中断信号来自CPU内部。而被动放弃指的是—外中断&#xff08;中断&#xff09;&#xff0c;中断信号来自CPU外部 如果该进程还没退出临界区&#xff08;还没解锁&#xff09;就进行…




阅读更多...


















推荐文章












最新文章


















Copyright @ 2022~2023