微信小程序学习打卡（2）

一、wxml文件：类似于html，<标签名属性=“属性值”></标签名>

属性值可为：类 class=“info”

　　　　　　 id id=“zzz”

　　　　　　样式 style=" "

　　　　　　事件函数 bindtap="f0"

　　　　　　自定义数据 data-user-name=“user”

　　　　　　隐藏当前标签内容 hidden=“true”

　　imge标签：<image src="/images/xx.jpg"></image>

　　绝对路径：/images/xx.jpg

　　相对路径：../../images/xx.jpg

二、wss文件

页面布局：

1、传统方式：无法灵活应对页面结构变化　

.container{

background-color： #eee;

text-align: center;

}

text{

display: block;

}

image,text{

margin-bottom: 60px;

}

2、弹性盒子布局：实现整体控制，灵活应对页面结构变化

.container{

background-color： #eee;

display: flex;

flex-direction: column;

justify-content: space-around;

align-items: center;

}

3、元素大小适配不同宽度屏幕：

px:绝对单位

rpx响应式长度

4、navigator标签实现页面跳转

<view>

</view>

默认页面可返回

open-type='navigate'

页面不可返回

open-type='redirect'

控制点击时样式

hover-class='nav-hover'

注意：根据级联样式算法，样式按照先后顺序应用

5、tabBar底部导航栏

在app.json文件中配置tabBar底部导航栏

"tabBar":{

"list": [

{

"text": "关于",

"pagePath": "pages/about/about",

"iconPath": "images/icons/about.jpg",

"selectedIconPath": "images/icons/about-selected.jpg"

{

"text": "每周推荐",

"pagePath":"pages/weekly/weekly",

"iconPath":"images/icons/weekly.jpg",

"selectedIconPath":"images/icons/weekly-selected.jpg"

}

"color":"#000",

"selectedColor":"#00f"

}

用list数组存放导航栏的样式注意：page配置不能在文件中写任何注释，pagePath等路径不能有错

转载于:https://www.cnblogs.com/yangshuangs/p/8763012.html

微信小程序学习打卡（2）相关推荐

微信小程序学习（五）：使用本地缓存，完成默认登录、、alert的使用、、引用全局变量，app.jsh中的变量
微信小程序学习(五):使用本地缓存,完成默认登录一开始想在app.js里面通过全局变量来实现默认登录状态的,但是没有用,每次重启还是要登录,在网上找了些资料后,可以用本地缓存, 这个是js文件这是 ...
微信小程序学习Course 8 本地缓存API
微信小程序学习Course 8 本地缓存API 本篇随笔主要介绍微信小程序本地缓存API函数,微信小程序可以在本地缓存一些关键词数据,每一条关键词对应一段字符串.微信小程序提供了以下API函数. 8. ...
微信小程序js数组初始化_微信小程序学习Course 3-2 JS数组对象学习
微信小程序学习Course 3-2 JS数组对象学习本节主要介绍JS中的数组. 3-2.1 数组的声明数组声明的方式多种,如下例.一般我们可以先创建一个空数组,然后再填充. var names = ...
小程序 pagescrollto_微信小程序学习笔记（三）-- 首页及详情页开发
一.常用组件在上一个章节中讲解了封装请求数据的模块,在此处请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.1 轮播图数据的请求 pages/home/home.js import 2 使用组 ...
微信小程序学习笔记（1）
微信小程序学习笔记 1.小程序代码结构 2.逻辑层和视图层 3. 小程序的宿主环境(通信模型.运行机制.组件.API) 4. 数据绑定和事件绑定 1.小程序代码结构当开发者新建一个工程时,项目文件包 ...
微信小程序学习（三）：在微信开发者工具中，使用WeUI前端美化框架，微信小程序
微信小程序学习(三):在微信开发者工具中,使用WeUI 这里就是将WeUI导入到微信开发者工具中,我并没有使用多少样式,这里只是展示了一下怎么引用网上有很多的方法,我绝大多数都没看懂,这里就是最简单 ...
微信小程序学习笔记一 + 小程序介绍前置知识
微信小程序学习笔记一 1. 什么是小程序? 2017年度百度百科十大热词之一微信小程序, 简称小程序, 英文名 Mini Program, 是一种不需要下载安装即可使用的应用 ( 张小龙对其的定义是 ...
微信小程序学习：（二）app.js及index.js详解
微信小程序学习:(二)app.js及index.js详解项目地址:https://github.com/leoricding/- 在用ide创建小程序项目时,系统默认为我们创建了一个hellowor ...
2020微信小程序学习报告.2.17-3.1.（三）
微信小程序学习报告应学校课程要求,特此记录首先,小程序知识点: wx.request的使用:发https请求,一个小程序同时只能有5个网络请求,https的参数里,url是接口地址,method是请求 ...

微信小程序学习打卡（2）

微信小程序学习打卡（2）相关推荐

最新文章

热门文章