2018-07-21 11:28:30 qq_31496003 阅读数 2789
  • 微信开发核心基础

    很多公司,企业甚至政府部分都开通了微信公众号,想要发挥微信的大价值,就必须让微信跟自己的平台或者数据库联系起来。这套《微信开发核心基础》,用一个完整的案例,告诉你微信开发流程,错误调试,如何看开发文档,学习你就可以自己做些独立开发。这个教程使用PHP为开发工具,建议你先学习子恒老师的《微信公众号使用》。学习完后,可以跟我反馈,如果好的话,会推出《微信服务号开发》教程,QQ/微信:68183131

    13127 人正在学习 去看看 秦子恒

flex布局里的text汉字格式

代码放在最后。官方给的代码给的点此,我下面结果就是在此基础之上改的。

我们在微信开发者工具里,编辑显示的情况常常出现如下情况:

改后

<text>标签在flex布局中不能居中,尤其是数字:

如果<text>是纯文本,显示就不会是这样的:

数字与文本混合的显示呢?看下图:

我也调试了很多情况,个人觉得配合字体大小设计flex尺寸,来避难出现这种情况比较稳妥。

然后是文本的居中显示,如下图:

文本设置style居中未能显示,然后一个view标签:

text-align:center

text-align 属性规定元素中的文本的水平对齐方式

描述
left 把文本排列到左边。默认值:由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。
inherit 规定应该从父元素继承 text-align 属性的值。

另外还有其他的属性,请查看字体设置(向后面翻一下)。

更改后的显示如下图:

下面附代码:

.wxml

<view class="section">
  <view class="section__title">flex-direction: row</view>
  <view class="flex-wrp" style="flex-direction:row;">
    <view class="flex-item bc_green" style='text-align:center'>1</view>
    <view class="flex-item bc_red" style='text-align:center'>222</view>
    <view class="flex-item bc_blue" style='text-align:center'>3</view>
  </view>
</view>
<view class="section">
  <view class="section__title">flex-direction: column</view>
  <view class="flex-wrp" style="height: 300px;flex-direction:column;">
    <view class="flex-item bc_green" style='text-align:center'>纯数字111</view>
    <view class="flex-item bc_red">
      <view style='text-align:center'><text >
      此处
      </text></view>
    </view>
    <view class="flex-item bc_blue" style='text-align:center'>3333此处的文本都是汉字</view>
  </view>
</view>

.wxss

.page-section{
  margin-bottom: 20rpx;
}
.flex-wrp {display: flex;}
.bc_green {background: skyblue;width:100px; height: 100px;}
.bc_red {background: red;width:100px; height: 100px;}
.bc_blue {background: blue;width:100px; height: 100px;}

加油!

有问题再联系我

2019-06-18 23:43:26 SILIII 阅读数 27
  • 微信开发核心基础

    很多公司,企业甚至政府部分都开通了微信公众号,想要发挥微信的大价值,就必须让微信跟自己的平台或者数据库联系起来。这套《微信开发核心基础》,用一个完整的案例,告诉你微信开发流程,错误调试,如何看开发文档,学习你就可以自己做些独立开发。这个教程使用PHP为开发工具,建议你先学习子恒老师的《微信公众号使用》。学习完后,可以跟我反馈,如果好的话,会推出《微信服务号开发》教程,QQ/微信:68183131

    13127 人正在学习 去看看 秦子恒

任务:1、骰子布局,把整个骰子做出来到页面上;

           2、按照要求将小程序完成,能在手机上看或能在开发者工具调试即可。

1、骰子布局,把整个骰子做出来到页面上

这个任务分为了两个形式,一种在sublime中实现了骰子布局,下面为源代码:

HTML源代码:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<!-- 移动端页面的适配 -->
	<meta name="viewport" content="width=divice-width,initial-scale=1.0">
	<title>骰子布局</title>
	<link rel="stylesheet" href="random.css">
</head>
<body>
<div class="first-face">
  <span class="pip"></span>
</div>
<div class="second-face">
  <span class="pip"></span>
  <span class="pip"></span>
</div>
<div class="third-face">
  <span class="pip"></span>
  <span class="pip"></span>
  <span class="pip"></span>
</div>
<div class="fourth-face">
  <div class="column">
    <span class="pip"></span>
    <span class="pip"></span>
  </div>
  <div class="column">
    <span class="pip"></span>
    <span class="pip"></span>
  </div>
</div>
<div class="fifth-face">
  <div class="column">
    <span class="pip"></span>
    <span class="pip"></span>
  </div>
  <div class="column">
    <span class="pip"></span>
  </div>
  <div class="column">
    <span class="pip"></span>
    <span class="pip"></span>
  </div>
</div>
<div class="sixth-face">
  <div class="column">
    <span class="pip"></span>
    <span class="pip"></span>
    <span class="pip"></span>
  </div>
  <div class="column">
    <span class="pip"></span>
    <span class="pip"></span>
    <span class="pip"></span>
  </div>
</div>
</body>
</html>

CSS源代码:


.first-face{
  display: flex;
  justify-content: center;
  align-items: center; 
}

.second-face {
  display: flex;
  justify-content: space-between;
}

.second-face .pip:nth-of-type(2) {
  align-self: flex-end;
}

.third-face {
  display: flex;
  justify-content: space-between;
}
  
.third-face .pip:nth-of-type(2) {
  align-self: center;
}

.third-face .pip:nth-of-type(3) {
  align-self: flex-end;
}

.fourth-face, .sixth-face {
  display: flex;
  justify-content: space-between;
}

.fourth-face .column, .sixth-face .column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.fifth-face {
  display: flex;
  justify-content: space-between;
}
  
.fifth-face .column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
  
.fifth-face .column:nth-of-type(2) {
  justify-content: center;
}

/* OTHER STYLES */

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: center;
  flex-wrap: wrap;
  align-content: center;
  font-family: 'Open Sans', sans-serif;
  
  background: linear-gradient(top, #222, #333);
}

[class$="face"] {
  margin: 16px;
  padding: 4px;
  
  background-color: #e7e7e7;
  width: 104px;
  height: 104px;
  object-fit: contain;
  
  box-shadow:  /*阴影*/
    inset 0 5px white, 
    inset 0 -5px #bbb,
    inset 5px 0 #d7d7d7, 
    inset -5px 0 #d7d7d7;
  
  border-radius: 10%;
}
/*块*/
.pip {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin: 4px;

  background-color: #333;
  box-shadow: inset 0 3px #111, inset 0 -3px #555;
}

实现情况如下图:

另一种是结合微信开发者工具进行骰子布局的实现,下面为源代码:

wxml源代码:

<text>骰子布局</text>
<!-- 一点 -->
<div class="first-face">
  <span class="pip"></span>
</div>
  <!-- 两点 -->
 <div class="second-face">
  <span class="pip"></span>
  <span class="pip"></span>
</div>
  <!-- 三点 -->
  <div class="third-face">
  <span class="pip"></span>
  <span class="pip"></span>
  <span class="pip"></span>
</div>
  <!-- 四点 -->
<div class="fourth-face">
  <div class="column">
    <span class="pip"></span>
    <span class="pip"></span>
  </div>
  <div class="column">
    <span class="pip"></span>
    <span class="pip"></span>
  </div>
</div>
<!-- 五点 -->
<div class="fifth-face">
  <div class="column">
    <span class="pip"></span>
    <span class="pip"></span>
  </div>
  <div class="column">
    <span class="pip"></span>
  </div>
  <div class="column">
    <span class="pip"></span>
    <span class="pip"></span>
  </div>
</div>
<!-- 六点 -->
<div class="sixth-face">
  <div class="column">
    <span class="pip"></span>
    <span class="pip"></span>
    <span class="pip"></span>
  </div>
  <div class="column">
    <span class="pip"></span>
    <span class="pip"></span>
    <span class="pip"></span>
  </div>
</div>

wxss源代码:

/* pages/mine/mine.wxss */
[class$="face"]
 {  width: 100px; height: 100px ;background-color: #e7e7e7; border-radius: 10%;
box-shadow:  /*阴影*/
    inset 0 5px white, 
    inset 0 -5px #bbb,
    inset 5px 0 #d7d7d7, 
    inset -5px 0 #d7d7d7;
      margin: 16px;
    padding: 4px;
}

 .pip { height: 22px; width: 22px;border-radius: 50%; background-color: #333;
  box-shadow: inset 0 3px #111, inset 0 -3px #555;margin: 5px;}

  .first-face{
  display: flex;
  justify-content: center;
  align-items: center; 
}
.second-face {
  display: flex;
  justify-content: space-between;
}

.second-face .pip:nth-of-type(2) {
  align-self: flex-end;
}

.third-face {
  display: flex;
  justify-content: space-between;
}
  
.third-face .pip:nth-of-type(2) {
  align-self: center;
}

.third-face .pip:nth-of-type(3) {
  align-self: flex-end;
}

.fourth-face, .sixth-face {
  display: flex;
  justify-content: space-between;
}

.fourth-face .column, .sixth-face .column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.fifth-face {
  display: flex;
  justify-content: space-between;
}
  
.fifth-face .column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
  
.fifth-face .column:nth-of-type(2) {
  justify-content: center;
}

第二种方式实现图片如下:

 

2、按照要求将小程序完成,能在手机上看或能在开发者工具调试即可

将加载动画变为白色,加载背景改为粉色,上框字体改为白色,将上框文本内容改为“KnewWorld”

 "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#7B68EE",
    "navigationBarTitleText": "KnewWorld",
    "navigationBarTextStyle": "white",
    "enablePullDownRefresh": true,
    "backgroundColor": "#EE82EE"
  }

在下方增加一个列表,并且改变选项字体颜色,为选项添加图片,选中之后选项图标颜色改变

"list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "selectedIconPath": "assets/icons/马里奥.png",
        "iconPath": "assets/icons/游戏机.png"
      },
      {
        "pagePath": "pages/classify/classify",
        "text": "分类",
        "selectedIconPath": "assets/icons/小绿.png",
        "iconPath": "assets/icons/吃豆人.png"
      },
      {
        "pagePath": "pages/shopcar/shopcar",
        "text": "个人",
        "selectedIconPath": "assets/icons/绿遥控.png",
        "iconPath": "assets/icons/红pad.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "骰子",
        "selectedIconPath": "assets/icons/黄pad.png",
        "iconPath": "assets/icons/红psp.png"
      }

点击选项的时候字体颜色改变

"tabBar": {
    "color": "#DC143C",
    "selectedColor": "#006400",

实现效果如下图:

 

2019-07-28 17:46:24 ycwu314 阅读数 185
  • 微信开发核心基础

    很多公司,企业甚至政府部分都开通了微信公众号,想要发挥微信的大价值,就必须让微信跟自己的平台或者数据库联系起来。这套《微信开发核心基础》,用一个完整的案例,告诉你微信开发流程,错误调试,如何看开发文档,学习你就可以自己做些独立开发。这个教程使用PHP为开发工具,建议你先学习子恒老师的《微信公众号使用》。学习完后,可以跟我反馈,如果好的话,会推出《微信服务号开发》教程,QQ/微信:68183131

    13127 人正在学习 去看看 秦子恒

Windows10笔记本上运行微信小程序开发者工具,输入框(input,textarea)没有焦点,只能在真机调试,效率太低。
后来发现是Window10对笔记本高分屏支持不好,要DPI缩放,导致兼容性问题。
解决方法:

  1. 显示设置缩放与布局改为100%。这样就可以点击输入框了,但是字体变得很小,最好是外接显示器。
  2. 不修改DPI缩放,长按输入框即可!

 

2017-04-24 11:07:24 typeof_yaco 阅读数 5462
  • 微信开发核心基础

    很多公司,企业甚至政府部分都开通了微信公众号,想要发挥微信的大价值,就必须让微信跟自己的平台或者数据库联系起来。这套《微信开发核心基础》,用一个完整的案例,告诉你微信开发流程,错误调试,如何看开发文档,学习你就可以自己做些独立开发。这个教程使用PHP为开发工具,建议你先学习子恒老师的《微信公众号使用》。学习完后,可以跟我反馈,如果好的话,会推出《微信服务号开发》教程,QQ/微信:68183131

    13127 人正在学习 去看看 秦子恒

最近在研究小程序,写了一个简单的展示页面。在微信开发者工具上面调试一切正常,在真机上面测试的时候问题就来了。

在ios 上面 布局出现混乱,查找原因是因为display:flex;标签和属性的部分问题,在android 真机测试 是没有问题的。原因未果。于是换掉了flex布局 完美兼容。。。

小程序在android上获取不到接口数据,后台安全域名已设置,服务器tls1.2 也支持。报错: repuest:fail ssl hand shake error   怀疑是证书缺少造成的。但是ios 的数据显示正常。   小程序在android上面经常会出现 未知问题,暂时解决资料也不全,所以就换个方式吧,解决不了就绕过去吧!

铭记。。。

2017-11-29 19:42:01 chinaaaaaaaaaaa 阅读数 9032
  • 微信开发核心基础

    很多公司,企业甚至政府部分都开通了微信公众号,想要发挥微信的大价值,就必须让微信跟自己的平台或者数据库联系起来。这套《微信开发核心基础》,用一个完整的案例,告诉你微信开发流程,错误调试,如何看开发文档,学习你就可以自己做些独立开发。这个教程使用PHP为开发工具,建议你先学习子恒老师的《微信公众号使用》。学习完后,可以跟我反馈,如果好的话,会推出《微信服务号开发》教程,QQ/微信:68183131

    13127 人正在学习 去看看 秦子恒

摘要: WXSS实现了CSS布局相关的大部分规范,但在一些细节上有差异,甚至同样的语法在小程序调试工具和微信中的表现也存在差异。本章主要讲述CSS布局相关的一些基本知识,包括经典的盒子模型、浮动定位、绝对定位以及近几年提出的Flex布局。

原文:https://yq.aliyun.com/articles/90454

本节书摘来自华章出版社《微信小程序:开发入门及案例详解》一 书中的第3章,第3.1节,作者李骏 边思,更多章节内容可以访问云栖社区“华章计算机”公众号查看。

第3章 布局

WXSS实现了CSS布局相关的大部分规范,但在一些细节上有差异,甚至同样的语法在小程序调试工具和微信中的表现也存在差异。本章主要讲述CSS布局相关的一些基本知识,包括经典的盒子模型、浮动定位、绝对定位以及近几年提出的Flex布局。这些基本知识在WXSS也是通用的。对于其他一些特性,开发者可在开发过程中尝试,如果大家想对CSS有更深的了解可以参考网络资料或《CSS权威指南》。这里再次提醒大家,在代码编写过程中一定要开启开发者工具中的这个功能:“开启上传代码时样式文件自动补全”,否则在学习本章Flex布局时会存在不同终端兼容性问题。

3.1 基本知识

3.1.1 盒子模型

盒子模型是CSS布局的基础,CSS假定每个元素都会生成一个或多个矩形框,每个元素框中心都有一个内容区(content),这个内容区周围有内边距(padding)、边框(border)和外边距(margin),这些项默认宽度为0,这个矩形框就是常说的盒子模型,如图3-1所示。
简单来说,HTML中每一个元素就是一个盒子,同理,在小程序中每一个组件就是个盒子,元素的宽度、高度就是内容区域宽度、高度,不包含内边距、边框和外边距,我们可以通过元素width、height、padding、border、margin属性控制盒子样式。盒子模型根据浏览器具体实现可分为W3C的标准盒子模型和IE盒子模型,这两种盒子模型在宽度和高度的计算上不一致,IE盒子模型的宽度和高度是包含内边距和边框的,我们这里讲述的主要是W3C的盒子模型,WXSS完全遵守W3C盒子模型规范。

771801decd46ac31247ab81e7dae3c14c7bcbd60

CSS中的布局都是基于盒子模型,不同类型元素对盒子模型的处理也是不同的,块级元素的处理就和行内元素不同,浮动元素和定位元素的处理也是不相同的,接下来我们逐一讨论这些差异。

3.1.2 块级元素

元素按显示方式主要可以分为块级元素和行内元素,元素的显示方式是由display属性控制的,块级元素会默认占一行高度,一般一行内只有一个块级元素(浮动后除外),当再添加新的块级元素时,新元素会自动换行显示。块级元素一般作为容器出现,用于组织结构。一些元素默认就是块级元素,如小程序中的组件,而一些则默认是行内元素,我们可以通过修改元素display属性为block,将一个元素强制设置为块级元素。一个块级元素的元素框与其父元素的width相同,块级元素的width + marginLeft + marginRight + paddingLeft + paddingRight刚好等于父级元素内容区宽度,显示时默认撑满父元素内容区。块级元素高度由其子元素决定,父级元素高度会随内容元素变化而变化。块级元素特点总结如下:
总是在新行上开始。
宽度默认为width + marginLeft + marginRight + paddingLeft + paddingRight刚好等于父级元素内容区宽度,除非设定一个新宽度,这里需要注意,当设置块级元素宽度为100%时,如果当前块级元素存在padding、margin会导致块级元素溢出父元素。
盒子模型高度默认由内容决定。
盒子模型中高度、宽度及外边距和内边距都可控制。
可以容纳行内元素和其他块级元素。
示例:
<view/>组件默认是块级元素,下面我们使用<view/>为大家演示块级元素的特性,如图3-2所示。

f448cd5adc7da1c4f01cfbfac9b498844c93f5e5

代码如下:

<!-- 每个块级元素占领一行 -->
<view style="border:solid 1px;">第一个块级元素</view>

<!-- 默认情况下块级元素的元素框和父级元素的width相同,刚好撑满内容区 -->
<view style="border:solid 10px; margin : 10px; padding :10px;">第二个块级元素
</view>

<!-- 即使宽度不足,仍会占领一行让其余元素换行 -->
<view style="border:solid 1px; width : 200px;">第三个块级元素</view>
其他信息

<!-- 父级元素高度随内容决定 内容为块级元素-->
<view style="margin-top:10px; border:solid 1px;">
    <view style="height : 100px;">块级元素</view>
</view>

<!-- 父级元素高度随内容决定 内容为文本流情况 -->
<view style="margin-top:10px; border:solid 1px;">
    文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</view>

块级元素还有很多特性,比如水平格式化、垂直格式化等,我们不在这里一一列举,大家可以查阅相关资料。

3.1.3 行内元素

除了块级元素,最常见的就是行内元素了,通过设置display属性为inline可以将一个元素设置为行内元素,小程序中<text/>就是一个行内组件。行内元素没有块级元素那么简单直接,块级元素只是生成框,通常不允许其他内容与这些框并存,行内元素特点总结如下:
和其他非块级元素都在一行上。
盒子模型中高度、宽度、上下margin、上下padding设置均无效,只能设置左右margin和左右padding。
宽度就是文字或图片的宽度,不可改变。
行内元素宽度、高度都不能直接设置。
行内元素只能容纳文本或其他行内元素,在行内元素中放置块级元素会引起不必要的混乱。
如图3-3中的示例,大家可以对比本例中块级元素和行内元素的区别,我们设置了行内元素的margin,布局时上下margin都被忽略了。本例中我们将上下padding设置为0,大家可以尝试设置为其他值,这时会发现上下padding会生效,但是不会影响布局,本例中行内元素换行是因为上面的块级元素强制占位一行。

85de1105f28b232cdc02f8d60210041242cb3ff3

本例的代码如下:

<!-- 块级元素 -->
<view style="border:solid 1px #999; color : #999;">我是块级元素我是块级元素我是块级元素我是块级元素我是块级元素</view>

<!-- 通过修改display属性的行内元素 -->
前面的文字<view style="border:solid 1px; margin:10px; padding : 0 10px; display: inline;">我是块级元素我是块级元素我是块级元素我是块级元素我是块级元素</view>后面的文字

3.1.4 行内块元素

行内块元素是块级元素和行内元素的混合物,当display属性为inline-block时,元素就被设置为一个行内块元素,行内块元素可以设置宽、高、内边距和外边距,可以简单认为行内块元素是把块级元素以行的形式展现,保留了块级元素对宽、高、内边距、外边距的设置,它就像一张图一样放在一个文本行中,如图3-4所示。

6e59e0f292347448b99d2b72ced93590a71aff4d

代码如下:

<!-- 行内块元素宽度撑满父级宽度情况 -->
前面的文字<view style="border:solid 1px; margin:10px; padding : 10px; display:inline-block;">我是块级元素我是块级元素我是块级元素我是块级元素我是块级元素</view>后面的文字

<!-- 行内块元素宽度不足父级宽度情况 -->
前面的文字<view style="border:solid 1px; margin: 10px; padding : 10px; display: inline-block;">我是行内块元素</view>后面的文字后面的文字后面的文字
没有更多推荐了,返回首页