微信小程序_笔记_02_实现首页菜单

其他 2018-06-04 05:12:27 阅读次数: 0

微信小程序3天课程学习的第1天笔记

视频教程里,老师在开始讲微信小程序之前,补充了一些基本的概念和理论知识

为后面正式的学习如何开发微信小程序做准备


视频教程中,老师的建议是:
1. 不填写appid,直接点体验

2. 勾选建立普通快速启动模板

如图所示:




由于没有右键菜单,
所以想要审查元素,只能:
1.点击「箭头」
2.点击对应的元素

3.点击「Wxml」

如图所示: 





如果觉得调试栏上的「Wxml」比较常用, 可以将其拖动到工具栏的前面来



老师总结的html与微信小程序之间的对比: 

1. rpx单位

2. 样式导入

3. json严格模式: 用双引,无注释








关于rpx 的一点补充:

rpx是微信小程序新推出的一个单位，

rpx 全称是: responsive pixel 响应式像素


按官方的定义，rpx可以根据屏幕宽度进行自适应，

在rpx出现之前，web页面的自适应布局已经有了多种解决方案，为什么微信还捣鼓出新的rpx单位？

在解释这个单位前，我们先简单了解一下目前的主流的自适应布局解决方案：

  1. 响应式（Responsive web design)

  2. rem

  3. 流式布局

  4. scale伸缩布局

响应式

响应式布局的问题在于需要维护多个样式文件，维护成本太大，一般的移动H5页面 都不会优先考虑。

rem

rem是近几年比较流行的方案，淘宝移动web端就是采用此方案，

由于 1 rem = 根元素font-size，所以rem布局的本质就是通过rem把页面按比例分割达到自适应的效果，

因为rem是相对根路径font-size尺寸，不同的页面设置不同的font-size尺寸，即可达到自适应的效果。

document.documentElement.style.fontSize = window.innerWidth + 'px';

然后设置<div class="box"></div>的宽高等于1rem，就可以使box的宽高自适应各种设备尺寸。

因为box的单位1em是跟页面设备的宽对应的，所以能做到自适应各种尺寸。


流式布局

流式布局需要用到百分比或者flex，即宽度永远铺满页面宽度，但高度和其他单位仍然用px。

一般都比较推荐用流式布局，因为流式布局不需要像 rem 那样额外通过js动态调整根元素的字体尺寸。

虽然某些大屏幕下，无法100%还原设计稿，但这也是流式布局的精髓，它的字体精度可以保持跟设备系统一致（dpi）。


scale伸缩布局

scale伸缩布局顾名思义，就是通过拉伸缩小页面来达到自适应。

有两种方法，一是通过js更改viewport的initial-scale，这种方法比较麻烦，

另一种是直接写死viewport的宽度，例如：<meta name="viewport" content="width=360, user-scalable=no">，

意思就是告诉浏览器：这个页面我要一直用360px的宽度处理，在不同的尺寸上，麻烦伸缩一下。

假如在320的iphone上，放大到360，在375的iphone上，缩小到360。

这样我只需要以360这个尺寸出设计稿就行，页面会伸缩适应。


scale伸缩的问题在于，不能显式设置minimum-scale=1.0，否则就达不到效果。

而这个值是chromium37以上的webview触发 gpu raster 的一个条件，所以用这种方法就没法利用gpu raster硬件加速。



rpx布局

上面四个方法，各有优缺点，

现在回头看看微信的rpx，相信大家已经有所启发，

rpx实际上就是系统级的rem

（把页面按比例分割 750份 ，1rpx=window.innerWidth/750），或者scale伸缩布局的width=750。


也就是说，微信小程序的rpx布局帮大家把rem布局的js设置根元素字体尺寸这步省了，

或者减少了scale伸缩布局不能开启gpu raster的问题。


通过rpx，大家只需要根据750的设计稿写代码即可，

不必担心它在各个平台的适配情况，实际上在各个平台都会长得一样

示例效果如下:




关于微信小程序的组织结构示意图:




关于微信小程序中的图片(原图: 2048 * 1280)

1. 可以写相对路径, 也可以写绝对路径

2. 图片宽度: 100%, 高度:写468.75rpx (必须设置)

注意: 这个468.75rpx是根据 整个屏幕宽度为750rpx计算得来的:  1280*750/2048



原图: 2048 * 1280

在iphone 6 7 8 上显示的大小为:  375 * 234.38




代码及效果如下:




下面,再把面板中的9个按钮添加到小程序demo中

1.  index.wxml代码如下: 

<!--index.wxml-->
<view class='class_view_carousel'>
    <image src='/img/menma.jpg'></image>
</view>

<!-- 9个按钮  -->
<view class='class_view_panel'>
  <navigator class="class_nav">
    <image src='/img/beyond.jpg'></image>
    <text>未闻花名</text>
  </navigator>

  <navigator class="class_nav">
    <image src='/img/mathilda.jpg'></image>
    <text>mathilda</text>
  </navigator>

  <navigator class="class_nav">
    <image src='/img/jennifer.png'></image>
    <text>美国往事</text>
  </navigator>

  <navigator class="class_nav">
    <image src='/img/beyond.jpg'></image>
    <text>未闻花名</text>
  </navigator>

  <navigator class="class_nav">
    <image src='/img/mathilda.jpg'></image>
    <text>mathilda</text>
  </navigator>

  <navigator class="class_nav">
    <image src='/img/jennifer.png'></image>
    <text>美国往事</text>
  </navigator>

  <navigator class="class_nav">
    <image src='/img/beyond.jpg'></image>
    <text>未闻花名</text>
  </navigator>

  <navigator class="class_nav">
    <image src='/img/mathilda.jpg'></image>
    <text>mathilda</text>
  </navigator>

  <navigator class="class_nav">
    <image src='/img/jennifer.png'></image>
    <text>美国往事</text>
  </navigator>

</view>

1. wxss样式如下:

.class_view_carousel {
  width: 100%;
  height: 469rpx; 
  /* 这个是为了解决图片底部的一小段空白  */
  overflow: hidden;
}
.class_view_carousel image {
  width: 100%;
  height: 469rpx; 
}


.class_view_panel {
  /* 水平排列, 每行3个, wrap  */
  display: flex;
  flex-wrap: wrap;
}

/* 设置nav 33.33%  */
.class_nav {
  width: 33.333%;
  height: 200rpx;
  
  /* 必须添加这个  */
  box-sizing: border-box;
  
  /* 设置里面的image 和 text 垂直居中  */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  /* 文字必须使用像素  */
  font-size: 16px;

  /* 边框必须使用 rpx  */
  /* 只给右 + 底边 添加边框  */
  border-right: 1rpx solid #ccc;
  border-bottom: 1rpx solid #ccc;
}
/* 最右边的 第3|6|9个不需要边框  
   即: 3n个子元素
*/
.class_view_panel .class_nav:nth-child(3n) {
  border-right: 0rpx none;
}


/* 设置图片宽高  */
/* 第1个 必须使用类名  */
.class_nav image {
  width: 80rpx;
  height: 80rpx;
}



效果如下:




关键点: 关于边框的细节处理

第1种处理方法: 使用 右边框 和 底边框

/* 设置nav 33.33%  */
.class_nav {
  ...
  ...
  /* 边框必须使用 rpx  */
  /* 只给右 + 底边 添加边框  */
  border-right: 1rpx solid #ccc;
  border-bottom: 1rpx solid #ccc;
}
/* 最右边的 第3|6|9个不需要边框  
   即: 3n个子元素
*/
.class_view_panel .class_nav:nth-child(3n) {
  border-right: 0rpx none;
}


第2种处理方法, 对右边框使用 伪(WYL)元素

代码如下:

/* 设置nav 33.33%  */
.class_nav {
    ... 
    ...
  /* 边框必须使用 rpx  */
  /* 只给底边 添加边框  */
  border-bottom: 1rpx solid #ccc;

  /* 第2种边框处理方式: 右边框使用伪元素  */
  position: relative;
}
/* 最右边的 第3|6|9个不需要边框  
   即: 3n个子元素
*/
/* .class_view_panel .class_nav:nth-child(3n) {
  border-right: 0rpx none;
} */


/* 边框的第2种处理方式, 使用after伪元素  */
.class_view_panel .class_nav::after {
  position: absolute;
  content: "";
  width: 1rpx;
  height: 100%;
  
  top: 0;
  right: 0;
  background-color: #ccc;
}
.class_view_panel .class_nav:nth-child(3n)::after {
  width: 0;
}

效果如下:




小程序的大小有限制? 2M 为上限???




还是关于顶部大图的缩放问题, 

在CSS3中,使用比较多的就是: background-size:cover;

在小程序中,关于图片建议: 

1.  设置宽和高

2. 设置缩放mode,如 aspectFill或者widthFix

3. 



我们直接通过IDE的菜单,进入到 开发文档 - 组件 章节, 找到image组件

可以看到缩放mode




mage

图片。

属性名 类型 默认值 说明 最低版本
src String   图片资源地址  
mode String 'scaleToFill' 图片裁剪、缩放的模式  
lazy-load Boolean false 图片懒加载。只针对page与scroll-view下的image有效 1.5.0
binderror HandleEvent   当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: 'something wrong'}  
bindload HandleEvent   当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:'图片高度px', width:'图片宽度px'}

注：image组件默认宽度300px、高度225px


mode 有效值：

mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。

模式 值 说明
缩放 scaleToFill 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
缩放 aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
缩放 aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
缩放 widthFix 宽度不变，高度自动变化，保持原图宽高比不变
裁剪 top 不缩放图片，只显示图片的顶部区域
裁剪 bottom 不缩放图片，只显示图片的底部区域
裁剪 center 不缩放图片，只显示图片的中间区域
裁剪 left 不缩放图片，只显示图片的左边区域
裁剪 right 不缩放图片，只显示图片的右边区域
裁剪 top left 不缩放图片，只显示图片的左上边区域
裁剪 top right 不缩放图片，只显示图片的右上边区域
裁剪 bottom left 不缩放图片，只显示图片的左下边区域
裁剪 bottom right 不缩放图片，只显示图片的右下边区域

示例：

在开发者工具中预览效果

<view class="page">
  <view class="page__hd">
    <text class="page__title">image</text>
    <text class="page__desc">图片</text>
  </view>
  <view class="page__bd">
    <view class="section section_gap" wx:for="{{array}}" wx:for-item="item">
      <view class="section__title">{{item.text}}</view>
      <view class="section__ctn">
        <image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" src="{{src}}"></image>
      </view>
    </view>
  </view>
</view>

Page({
  data: {
    array: [{
      mode: 'scaleToFill',
      text: 'scaleToFill：不保持纵横比缩放图片，使图片完全适应'
    }, { 
      mode: 'aspectFit',
      text: 'aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来'
    }, { 
      mode: 'aspectFill',
      text: 'aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来'
    }, { 
      mode: 'top',
      text: 'top：不缩放图片，只显示图片的顶部区域' 
    }, {      
      mode: 'bottom',
      text: 'bottom：不缩放图片，只显示图片的底部区域'
    }, { 
      mode: 'center',
      text: 'center：不缩放图片，只显示图片的中间区域'
    }, { 
      mode: 'left',
      text: 'left：不缩放图片，只显示图片的左边区域'
    }, { 
      mode: 'right',
      text: 'right：不缩放图片，只显示图片的右边边区域'
    }, { 
      mode: 'top left',
      text: 'top left：不缩放图片，只显示图片的左上边区域' 
    }, { 
      mode: 'top right',
      text: 'top right：不缩放图片，只显示图片的右上边区域'
    }, { 
      mode: 'bottom left',
      text: 'bottom left：不缩放图片，只显示图片的左下边区域'
    }, { 
      mode: 'bottom right',
      text: 'bottom right：不缩放图片，只显示图片的右下边区域'
    }],
    src: '../../resources/cat.jpg'
  },
  imageError: function(e) {
    console.log('image3发生error事件，携带值为', e.detail.errMsg)
  }
})
原图

image

scaleToFill

不保持纵横比缩放图片，使图片完全适应

image

aspectFit

保持纵横比缩放图片，使图片的长边能完全显示出来

image

aspectFill

保持纵横比缩放图片，只保证图片的短边能完全显示出来

image

top

不缩放图片，只显示图片的顶部区域

image

bottom

不缩放图片，只显示图片的底部区域

image

center

不缩放图片，只显示图片的中间区域

image

left

不缩放图片，只显示图片的左边区域

image

right

不缩放图片，只显示图片的右边边区域

image

top left

不缩放图片，只显示图片的左上边区域

image

top right

不缩放图片，只显示图片的右上边区域

image

bottom left

不缩放图片，只显示图片的左下边区域

image

bottom right

不缩放图片，只显示图片的右下边区域

image





底部新增两个图片按钮, 

代码如下:

<!-- 两个图片按钮  -->
<view class='class_view_login'>
  <navigator >
    <image src='/img/girl.png'></image>
  </navigator>

  <navigator >
    <image src='/img/boy.png'></image>
  </navigator>

</view>




/* ============================================ */
/* 登录注册模块  */
.class_view_login {
  padding: 10rpx 20rpx;
  display: flex;
}
.class_view_login navigator {
  width: 50%;
  /* 让a 里面的 图片居中  */
  display: flex;
  justify-content: center;
}

/* 136px 88px  */
.class_view_login navigator image{
  width: 338rpx;
  height: 188rpx;
}

效果如下:





操作面板 与 底部的按钮之间还有一个间隔,

第1种做法: 直接加一个view(推荐), 然后定义一个全局class样式作为divider

并且,把这一个全局的class样式,放到app.wxss里面

代码如下:

<!-- 分隔线  -->
<view class='class_view_sperator'>
</view>



/* ============================================ */
/* 分隔线  还可以加阴影效果 */
.class_view_sperator {
  width: 100%;
  height: 10rpx;
  background-color: rgb(233, 233, 233)
}

效果如下:




下面是把一些样式(比如divider样式 | 右边框样式等) 放到app.wxss公共样式文件里

代码如下:

/* 一些公共的样式,放在app.wxss文件内  */
/* ============================================ */
/* 分隔线  */
.class_view_sperator {
  width: 100%;
  height: 10rpx;
  background-color: rgb(233, 233, 233)
}

/* ============================================ */
/* 边框的第2种处理方式, 使用after伪元素  */
.class_border_right {
  /* 底部边框照样加  */
  border-bottom: 1rpx solid #ccc;

  /* 右边的边框则使用伪类  */
  /* 最后记得要在第3 6 9 个的时候,把右边的伪类width置0  */
  /* .class_border_right:nth-child(3n)::after { width: 0;}  */
  position: relative;
}
.class_border_right::after {
  position: absolute;
  content: "";
  width: 1rpx;
  height: 100%;
  top: 0;
  right: 0;
  background-color: #ccc;
}


关于IDE的 快捷键, 比如: 格式化代码,快速预(cbd)览(jtyq)效果








關於編輯器禁止保存時,自動編譯

如圖所示: (百度五笔-自动切换繁体与简体快捷键-Ctrl+T)




关于轮播图的两点注意事项: 

1. swiper 组件 默认高度只有150

2. 给swiper组件 设置值时: 要使用数据绑定的形式 {{ false }} {{ true }} 

代码如下:

<!--index.wxml-->
<view class='class_view_carousel'>
    <swiper indicator-dots='{{ true }}' autoplay='{{ true }}'>
      <swiper-item>
        <image src='/img/menma.jpg'></image>
      </swiper-item>

      <swiper-item>
        <image src='/img/tiger.jpg'></image>
      </swiper-item>
    </swiper>
</view>




.class_view_carousel {
  width: 100%;
  height: 469rpx; 
  /* 这个是为了解决图片底部的一小段空白  */
  overflow: hidden;
}
/* 注意这儿 swiper默认高度只有150,要手动设置  */
.class_view_carousel swiper,.class_view_carousel image {
  width: 100%;
  height: 469rpx; 
}

效果如下:




如果想要让轮播图进行轮播

设置swiper的参数circular={{ true }}

<!-- 就像checked属性一样 后面的 {{true}}也可以不写 -->



接下来配置一下首页的标题栏

 


关于app.json

1. 严格模式

2. 不能加注释

3. 不能用单引号

4. 不能有多余的逗号

代码如下:

{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "navigationBarBackgroundColor": "#f60",
    "navigationBarTitleText": "未闻花名",
    "navigationBarTextStyle":"white",
    "enablePullDownRefresh": true,
    "backgroundTextStyle": "dark"
  }
}



效果如下:




注意:  如果在pages属性对应的数组中, 增加一个路径的话(如pages/user/user)

则,IDE 会自动生成user目录 + user.js + user.wxss + user.wxml + user.json

如图所示: 

再补充一点:  pages属性中的数组第1个元素路径就是 默认的首页路径



.






未完待续,下一章节,つづく

猜你喜欢

转载自blog.csdn.net/u012576807/article/details/80555741
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
[编程题]学英语
[codeforces 1288A] Deadline 约数+模
Python的web开发
Docker在Centos 7上的部署
python编码
解决Ubuntu16.04 fatal error: json/json.h: No such file or directory
mysql并发插入
rest接口如何适应jsonp的方案
linux 终端上网设置
高数——等号两边同时求导、积分的解释
每日归档
更多
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022