微信小程序学习笔记(4)
写在前面:
本文仅用于记录自己的学习经过和转载一些资料
本文所有练习和实例均使用vscode和微信官方的微信开发者工具共同完成,vscode仅用于编译代码。某些功能如即时模拟,实际上要使用微信官方工具才得以实现。
要达成代码同步,仅需要使用vscode和微信工具同时打开一个项目即可。
五、样式WXSS
目录
五、样式WXSS
一、新的单位和样式导入。
1、响应式长度单位
2、样式导入
3、选择器
二、常用的组件
1、图片(image)
2、轮播图(swiper)
3、跳转组件(navigator)
4、富文本(Rich-text)
5、按钮(button)
6、icon
7、radio/checkbox
类似前端中的CSS,但支持响应式长度单位(rpx)。
一、新的单位和样式导入。
1、响应式长度单位
小程序不需要写link标签来链接页面,可以自动寻找同名文件。
rpx全称responsiv pixel,相对像素,规定屏幕宽为750rpx。和物理像素比例会产生相应变化。rpx和px的比例有公式有:设一个设计稿,内含有一元素,
(元素 px)= (750 rpx)*(元素px)/(设计稿 px)
故当在设计元素的属性时,可以用属性calc来快速计算,举例:
#firstword{height: 200rpx;font-size: 40rpx;background-color: gold;width: calc(750px * 100 / 375);//iPhone6的屏幕宽为375px,设该元素的宽为100px
}
2、样式导入
wxss支持直接导入样式,关键字@import,仅支持相对路径。
@import "../../styles/common.wxss"
3、选择器
wxss不支持通配符*。
选择器 | 举例 | 描述 |
---|---|---|
.class | .intro | 选择所有拥有 class="intro" 的组件 |
#id | #firstname | 选择拥有 id="firstname" 的组件 |
element | view | 选择所有 view 组件 |
element,element | view,checkbox | 选择所有文档的 view 组件和所有的 checkbox 组件 |
::after | view::after | 在 view 组件后边插入内容 |
::before | view::before | 在 view 组件前边插入内容 |
二、常用的组件
一些和web类似的组件,例如view和text等可以看这里快速进行查漏补缺。
1、图片(image)
1)、支持懒加载。
2)、图片加载有默认上限而且很小(2m),故一般需要图片时直接放在外网调用。
3)、图片默认的尺寸为宽度320px、高度为240px。
4)、关于图片的拉伸属性(mode),可以在官方文档进行查看。可以实现让图片以各种状态(截取宽或高,保持比例、不保持比例拉伸等)进行变换。
2、轮播图(swiper)
关键字swiper与swiper-item。
<swiper>里只能放入<swiper-item>,否则会报错。关键字可以查看这里,可自定义内容有纵/横向滑动,滑动动画等。
*在开发时我遇到了img无法加载的问题,初步判断是因为抓取图片的速度没有跟上小程序初始渲染的速度,暂时留存问题,待后续更改。 实际上是微信小程序自身的bug,不支持某种格式的图片。
控制台报错
3、跳转组件(navigator)
关键字navigator,用于创建跳转块。
<navigator url="/pages/demo02/demo02">点击跳转</navigator>
属性看这里。一般抓url+相对地址进行跳转。
*在默认情况下不能跳转至绑定了tabbar的页面。可以在open-type属性设置switchTab。
跳转组件
跳转后的页面会有返回按钮
4、富文本(Rich-text)
关键属性nodes,多用于前端开放端口给后端,获取完整的divstyle。两种用法:
举例1:
const thingstyle =
`<div class="div_class"><h1>Title</h1><p class="p">Life is <i>like</i> a box of<b> chocolates</b>.</p>
</div>
`
Page({data: {thingstyle}
})
js文件:通过创建对象来引入wxml初始数据
<rich-text nodes="{{thingstyle}}"></rich-text>
wxml
展示
举例2:
page({data: {nodes: [{name: 'div',attrs: {class: 'div_class',style: 'line-height: 60px; color: #1AAD19;'},children: [{type: 'text',text: 'You never know what you\'re gonna get.'}]}]}
})
直接在page初始数据这里写入,但是不直观,尽量不用
官方文档。
5、按钮(button)
1)样式
关于样式,直接查看官方文档,或者自己在wxss里写,很简单。
当前小程序用的是新版组件V2,想自己调整button的大小可以在json文件里将"style": "v2"删除或改成v1,回退组件版本。
*小程序提供了一个有loading样式的图标,挺好看的:
2)开放能力
小程序的几个开放功能都是封装好的:
合法值 | 说明 |
---|---|
contact | 打开客服对话,可以在后台设置客服 |
share | 转发(给朋友,不能转发至朋友圈) |
*getPhoneNumber | 获取手机号,但需非个人用企业微信号且完成认证,且需要绑定事件bindgetphonenumber回调来获取手机号。 |
*getUserInfo | 这个值原先用于获取用户信息,但在2021.4.28后被官方回收了,现在只能获取到匿名信息。 |
*launchApp | 跳转app,但是一个类似返回的功能,需要先从app跳转到小程序再从小程序跳回app。 |
openSetting | 查看自己的授权,可以取消授权。 |
feedback | 意见反馈。 |
chooseAvatar | 获取用户头像,可以从bindchooseavatar回调中获取到头像信息。 |
*关于getUserInfo这个值,于小程序三次回收迭代后(真闲),于今(2022.3.28)改用getUserProfile()方法来执行获取用户信息,举例:
page({getUserProfile() {wx.getUserProfile({desc: "登录",//请求拉取用户数据时显示的内容success: (res) => {console.log(res);},//拉取成功fail: (res) => {console.log(res);},//拉取失败});}
})
关于getUserProfile()的五个属性:
属性 | 必填 | 用处 |
---|---|---|
lang |
否 |
显示用户使用的语言。只支持英简繁。 |
desc | 是 | 声明获取用户个人信息后的用途,不超过30个字符。 |
success | 否 | 接口调用成功的回调函数。 |
fail | 否 | 接口调用失败的回调函数。 |
complete | 否 | 接口调用完成后的回调函数。 |
6、icon
小程序内置封装了一些图标,可以直接用<icon>的标签形式写出来,具体配置可查看官方文档,没啥用。
7、radio/checkbox
两个选择框的用法都类似,需要用radio-group/checkbox-group父元素包裹组件,并且可以自定义选中/未选中的图标属性。
微信小程序学习笔记(4)相关推荐
- 小程序 pagescrollto_微信小程序学习笔记(三)-- 首页及详情页开发
一.常用组件 在上一个章节中讲解了封装请求数据的模块,在此处请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.1 轮播图数据的请求 pages/home/home.js import 2 使用组 ...
- 微信小程序学习笔记(1)
微信小程序学习笔记 1.小程序代码结构 2.逻辑层和视图层 3. 小程序的宿主环境(通信模型.运行机制.组件.API) 4. 数据绑定和事件绑定 1.小程序代码结构 当开发者新建一个工程时,项目文件包 ...
- 微信小程序学习笔记一 + 小程序介绍 前置知识
微信小程序学习笔记一 1. 什么是小程序? 2017年度百度百科十大热词之一 微信小程序, 简称小程序, 英文名 Mini Program, 是一种不需要下载安装即可使用的应用 ( 张小龙对其的定义是 ...
- 自己的微信小程序学习笔记【3】——第三方UI库Lin-Ui的加载及使用
其他微信小程序的学习笔记 自己的微信小程序学习笔记[1]--小程序开发工具的使用及项目文件说明 自己的微信小程序学习笔记[2]--从零开始新建项目 文章目录 其他微信小程序的学习笔记 前言 一.Lin ...
- 微信小程序学习笔记(一)
干货来袭 基础前言 微信⼩程序,简称⼩程序,英⽂名 Mini Program ,是⼀种不需要下载安装即可使⽤的应⽤,它实现 了应⽤"触⼿可及"的梦想,⽤⼾扫⼀扫或搜⼀下即可打开 ...
- 微信小程序学习笔记(七)----简单文章推荐列表和分类图标的实现
想要实现一个顶部是几篇纯文字的推荐文章,推荐文章下面是四个分类图标,具体实现出来是这个样子的,比较简单: 首先先来找一下素材,这几个图标是我在阿里巴巴图标库下载的,这里是下载地址: http://ww ...
- 微信小程序-学习笔记6-组件
基础内容组件:icon.text.progress <view class="container"><progress percent="20" ...
- 微信小程序学习笔记02:微信小程序注册
文章目录 零.学习目标 一.小程序注册方法 1.注册 2.登录 二.小程序开发工具 1.下载开发工具 2.安装开发工具 3.启动开发工具 三.创建第一个小程序 1.启动开发者工具 2.新建项目 3.模 ...
- 微信小程序学习笔记01:微信小程序概述
文章目录 零.学习目标 一.小程序的历史 二.如何访问小程序 1.线下扫码 2.微信搜索 3.公众号关联 4.好友推荐 5.历史记录 6.桌面访问 7.附近的小程序 三.小程序与HTML5和APP比较 ...
- 微信小程序学习笔记(7.16)
事件绑定 类似于web开发中的 onclick,微信开发者工具中使用的 bindtap,bindinput之类的方法,其实都是封装的JavaScript 通过实验探究数据传递方法 写一个input标签 ...
最新文章
- ICLR认知科学@AI workshop一览
- 用coffee和socket.io实现的01背包算法
- 关于C#中async/await中的异常处理(上)
- linux makefile 编译标记 EXTRA_CFLAGS 简介
- 运算符重载:即为函数
- 091_类数组对象转为数组
- python扩展包安装_python怎么安装扩展包
- setup.s 分析—— Linux-0.11 学习笔记(二)
- 把百度网站设为首页_大仙SEO:如何解决网站首页百度收录后被删除?【SEO案例】...
- SQLServer · 特性分析 · SQL Server 2012的分析函数未必都理解透了(2)
- Tomcat 7 证书配置中遇到的一个问题
- matlab 7 安装序列号,Matlab7序列号
- c语言头文件和函数库,C语言的头文件和库文件(函数库)
- python下载bt文件_使用libtorrent-python下载Torrent
- HTML5游戏开发进阶指南.pdf
- 云主机管理系统源码php,云优CMS PHP企业网站管理系统(分站版) v2.0.8
- 5.2.3 UE behaviour in state 5GMM-REGISTERED
- 2014年9月-前端开发月刊
- 【3D视觉】深度摄像头与3D重建
- EJB2.0雨夜教程之一