C#开发微信小程序(五)
关于小程序项目结构,框架介绍,组件说明等,请查看微信小程序官方文档,关于以下贴出来的代码部分我只是截取了一些片段,方便说明问题,如果需要查看完整源代码,可以在我的项目库中下载:
https://dev.tencent.com/u/dwBurning/p/ReallyWantToApi/git
https://git.dev.tencent.com/dwBurning/LazyOrders.git
又是一个周末,九月已过半,学生们都开学了,公司招聘的应届生也分配到部门,开始上岗了,想当年,我也是校招入职,现如今,已经开始带新人了,不得不感慨一番时光已逝。虽然已经是“老司机”了,但是还是要保持一颗积极向上,爱学习爱生活的心。
今天给《C#开发微信小程序》一个完结,代码部分已经没再更新了,基于学习的目的,该篇也只是记录一下自己学习过程中遇到的问题,为正在摸索的人以指引,可能,这就是我写这些博文的意义了吧!
1)关于垂直居中的问题
如下图获取微信个人信息然后展示出来,调的时候花了很长的时间,这都是我对前端布局CSS属性不熟悉的缘故,一开始我使用float,看上去好像也是合情合理,文字部分确实也没有问题,但是我解决不了头像垂直居中的问题,试了各种方法,都没有达到要求,最后通过以下CSS属性解决了问题,那么align-items与justify-content这两个属性分别呈现的是什么效果,可以点击链接跳转到菜鸟教程网深入的学习一下,要特别记录一下的是display必须设置为flex,align-items的设置才生效,这两个属性必须是绑定在一起使用的。
align-items传送门:https://www.runoob.com/try/playit.php?f=playcss_align-items&preval=center
justify-content传送门:https://www.runoob.com/try/playit.php?f=playcss_justify-content&preval=space-between
display: flex;
align-items: center;
justify-content : space-between
上述布局在移动端是很常见的,随便打开一个微信小程序,可以说都能看到类似的布局,贴一下CSS代码,需要的时候直接拿来用就是了
.section {
padding: 0rpx;
} .section .line {
margin-left: 30rpx;
padding-right: 30rpx;
line-height:;
border-bottom: 1px solid #efefef;
display: flex;
align-items: center;
justify-content : space-between
} .section .line .avatar {
width: 110rpx;
height: 110rpx;
border-radius: 50%;
} .section .line:last-child {
border-bottom: none;
} .section .line .tl {
color: #aaa;
}
2)关于wxml嵌套循环
如下图我的订单界面,存在多个订单,每个订单里边又有多个菜单,那么就涉及到嵌套循环了,官方文档中给出了一个经典的例子,9*9乘法表,当时也没有仔细看,也没有去做一个理解,于是要用到的时候就给自己挖坑了。
使用循环嵌套的时候,一定要使用wx:for-item="ordersItem"给数组的当前项变量命名(默认为item),目的就是为了区分当前属于哪个循环,否则就会异常,导致数据出不来
<view class="main">
<view wx:if="{{hasList}}" class="orders-box">
<view class="orders-list" wx:for="{{orders}}" wx:for-item="ordersItem" wx:key="ordersItem.OrderId">
<view class="orders-number">订单编号:{{ordersItem.OrderId}}</view>
<view class="orders-detail" wx:for="{{ordersItem.Menus}}" wx:key="{{ordersItem.Menus.MenuId}}">
<image src="{{item.ImgPath}}"></image>
<view class="">{{item.MenuName}}</view>
<view class="">{{item.Price}}</view>
</view>
<view class="orders-footer">
<text class="orders-footer-total">实付:¥{{ordersItem.TotalPrice}}</text>
<view wx:if="{{!ordersItem.IsPaid}}">
<button size="mini" class="orders-btn" bindtap="payOrders">付款</button>
</view>
<view wx:else>
<text>交易已完成</text>
</view>
</view>
</view>
</view>
<view wx:else>
<view class="orders-no-data">您还没有提交订单哦~</view>
</view>
</view>
3)贴一下如下图所以页面,导航部分的CSS代码,因为这种布局在移动端也是很常见的,再次需要用的时候,直接拿来用就是了。
<view class="navigator-box">
<block wx:for-items="{{pages}}" wx:key="*item">
<navigator url="{{item.page}}/{{item.page}}" class="navigator">
<image class="navigator-img" src="../../images/{{item.page}}.png"></image>
<view class="navigator-text">{{item.text}}</view>
<view class="navigator-arrow"></view>
</navigator>
</block>
</view>
.navigator-box {
opacity:;
position: relative;
background-color: #fff;
line-height: 1.41176471;
font-size: 34rpx;
} .navigator-box-show {
opacity:;
transform: translateY(0);
} .navigator {
padding: 30rpx 30rpx;
position: relative;
display: flex;
align-items: center;
} .navigator:before {
content: " ";
position: absolute;
left: 30rpx;
top:;
right: 30rpx;
height: 1px;
border-top: 1rpx solid #d8d8d8;
color: #d8d8d8;
} .navigator:first-child:before {
display: none;
} .navigator-text {
flex:;
} .navigator-img {
width: 60rpx;
height: 60rpx;
margin: 0rpx 20rpx 0rpx 10rpx;
} .navigator-arrow {
padding-right: 26rpx;
position: relative;
} .navigator-arrow:after {
content: " ";
display: inline-block;
height: 18rpx;
width: 18rpx;
border-width: 2rpx 2rpx 0 0;
border-color: #888;
border-style: solid;
transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
position: absolute;
top: 50%;
margin-top: -8rpx;
right: 28rpx;
}
这一系列告一段落,最近在研究Python的Django,那么,下一篇,肯定就是与Django相关的内容!学习,永无止尽,不学很慌,学也很慌...
C#开发微信小程序(五)的更多相关文章
- 基于小程序云Serverless开发微信小程序
本文主要以使用小程序云Serverless服务开发一个记事本微信小程序为例介绍如何使用小程序云Serverless开发微信小程序.记事本小程序的开发涉及到云函数调用.云数据库存储.图片存储等功能,较好 ...
- 如何用TypeScript开发微信小程序
微信小程序来了!这个号称干掉传统app的玩意儿虽然目前处于内测阶段,不过目前在应用号的官方文档里已经放出了没有内测号也能使用的模拟器了. 工具和文档可以参考官方文档:https://mp.weixin ...
- 关于开发微信小程序后端linux使用xampp配置https
关于开发微信小程序后端linux使用xampp配置https 背景 由于最近开发微信小程序,前后端交互需要使用https协议,故需要配置https服务 服务器环境 服务器系统 ubuntu 环境 xa ...
- 开发微信小程序中SSL协议的申请、证书绑定、TLS 版本处理等
在上篇随笔<基于微信小程序的系统开发准备工作>介绍了开发微信小程序的一些前期的架构设计.技术路线 .工具准备等方面内容,本篇随笔继续这个步骤,逐步介绍我们实际开发过程中对SSL协议的申请及 ...
- wn-cli 像React组件开发一样来开发微信小程序
项目地址:wn-cli wn-cli wn-cli 像React组件开发一样来开发微信小程序 名字由来:wn -> weapp native 取第一个字母 Install npm install ...
- 用Vue.js开发微信小程序:开源框架mpvue解析
前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...
- 使用mpvue开发微信小程序
更多内容请查看 我的新博客 地址 : 前言 16年小程序刚出来的时候,就准备花点时间去学学.无奈现实中手上项目太多,一个接着一个,而且也没有开发小程序的需求,所以就一拖再拖. 直到上周,终于有一个小程 ...
- 利用WordPress REST API 开发微信小程序从入门到放弃
自从我发布并开源WordPress版微信小程序以来,很多WordPress网站的站长问有关程序开发的问题,其实在文章:<用微信小程序连接WordPress网站>讲述过一些基本的要点,不过仍 ...
- mpvue 应用 Vant Weapp框架开发微信小程序
今天在使用mpvue开发微信小程序的过程中需要实现一个底部上拉选择列表的功能,因为之前做过H5微信公众号的开发,使用的就是有赞的Vant-ui,所以第一时间就想到了有赞的Vant Weapp UI框架 ...
随机推荐
- 12-kubernetes Dashboard 认证及分级授权
目录 部署 dashboard 查看 开放访问 配置dashboard用户 1. token 令牌认证 创建一个 serviceAccount dashboard-admin 绑定 clusterbi ...
- 05-kubernetes Pod控制器应用进阶
目录 Pod 资源 标签 给资源打标签 标签选择器 Pod 生命周期 实际操作 livenessProbe 实战 livenessProbe exec 测试 livenessProbe httpGet ...
- sql语句查询结果合并union all用法_数据库技巧
--合并重复行 select * from A union select * from B --不合并重复行 select * from A union all select * from B 按某个 ...
- java关键字 保留字
Java 关键字和保留字 Java 关键字列表 (依字母排序 共51组): abstract, assert,boolean, break, byte, case, catch, char, clas ...
- Server MyEclipse Tomcat v7.0 was unable to start within 45 seconds. If the server requires more time
启动Tomcat服务器时经常遇到这个错误, Server MyEclipse Tomcat v7.0 was unable to start within 45 seconds. If the ser ...
- 使用蓝图构建Flask项目目录
蓝图构建项目目录 什么是蓝图 一个应用中或跨应用制作应用组件和支持通用的模式 蓝图的作用 将不同的功能模块化 构建大型应用 优化项目结构 增强可读性,易于维护 蓝图构建项目目录 定义蓝图 app/ad ...
- 一条数据的HBase之旅,简明HBase入门教程1:开篇
[摘要] 这是HBase入门系列的第1篇文章,主要介绍HBase当前的项目活跃度以及搜索引擎热度信息,以及一些概况信息,内容基于HBase 2.0 beta2版本.本系列文章既适用于HBase新手,也 ...
- es6 proxy浅析
Proxy 使用proxy,你可以把老虎伪装成猫的外表,这有几个例子,希望能让你感受到proxy的威力. proxy 用来定义自定义的基本操作行为,比如查找.赋值.枚举性.函数调用等. proxy接受 ...
- [TimLinux] python-ldap 介绍
1. 接口 ldap: LDAP库接口 ldap.asyncsearch: 大量搜索结果数据采用流处理 ldap.controls: LDAPv3上层访问扩展控制 ldap.dn: LDAP dist ...
- 为什么有ASP.NET
最近读了一些文章,总结一下: 在1999年,当时微软的windows系统运行的所有的应用程序都是有组件对象模型为根本基础开发的,用VB来处理数据访问和复杂的用户界面,缺点是不能使用函数指针,因为当时的 ...