微信小程序(五)-常见组件(标签)
常见组件(标签)
https://developers.weixin.qq.com/miniprogram/dev/component/
1.view 代替以前的div标签
1.文本标签,类似span标签
2.只能㠌套自已text
3.长按文字可以复制(只有该标签有这个功能) <text selectable>加了就可以复制了<text/>
4.可以对空格回车进行编码<text decode>加了空格就可以显示了<text/>,decode可以解析的有
<
>
&
'
 
 
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
selectable | boolean | false | 否 | 文本是否可选 (已废弃) | 1.1.0 |
user-select | boolean | false | 否 | 文本是否可选,该属性会使文本节点显示为 inline-block | 2.12.1 |
space | string | 否 | 显示连续空格 | 1.4.0 | |
decode | boolean | false | 否 | 是否解码 | 1.4.0 |
图片图床:就是一个在网络上存储图片的地方
路过图床:https://imgchr.com/
SM.MS图床:https://sm.ms/
如果打算长期稳定使用请优先选择七牛云或者又拍云(存储在国内都需要有已备案域名),其次推荐的就是路过图床和SM.MS图床.
1.src 图片用外网地址
2.图片大小默认宽320px*高240px
3.mode 图片裁剪、缩放的模式,决定图片内容和图片标签宽高做适配
4.lazy-load 图片懒加载,在即将进入一定范围(上下三屏)时才开始加载
4.轮播图
1.swiper 轮播图的外层容器
1.默认宽width100% 高height=150px
2.无法实现由图片内容撑开,需换算图片的高度
3.autoplay 自动轮播
4.interval="1000" 轮播间隔时间
5.circular 轮播衔接滑动
6.indicator-dots 是否显示面板指示点(索引器/分页器/指示器)
7.indicator-active-color="red" 显示指圆点选中的颜色
8.indicator-color="#0094ff" 显示指圆点未选的颜色
2.swiper-item 轮播图的轮播项


<swiper autoplay circular interval="1000" indicator-dots indicator-active-color="red" indicator-color="#0094ff">
<swiper-item><image src="http://img.alicdn.com/imgextra/i1/4/O1CN01YyvpGT1BtsDzF8fVp_!!4-0-luban.jpg"/></swiper-item>
<swiper-item><image src="https://aecpm.alicdn.com/simba/img/TB1CWf9KpXXXXbuXpXXSutbFXXX.jpg_q50.jpg"/></swiper-item>
<swiper-item><image src="http://img.alicdn.com/imgextra/i1/4/O1CN01YyvpGT1BtsDzF8fVp_!!4-0-luban.jpg"/></swiper-item>
</swiper>
wxml
1.导航标签相当于a标签
2.url 跳转路径(相对路径或绝对路径)
3.open-type="switchTab" 跳转方式
open-type 的合法值
值 | 说明 | 最低版本 |
---|---|---|
navigate | 对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能,默认值,保留当前页面(有返回按钮),跳转到应用内的某个页面,不能跳到 tabbar 页面 | |
redirect | 对应 wx.redirectTo 的功能,关闭当前页面(无返回按钮),跳转到应用内的某个页面,不能跳到 tabbar 页面 | |
switchTab | 对应 wx.switchTab 的功能,跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 | |
reLaunch | 对应 wx.reLaunch 的功能,关闭所有页面,打开到应用内的某个页面,随便哪个页面都可跳(包括tabBar ) | 1.1.0 |
navigateBack | 对应 wx.navigateBack 的功能,关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈,决定需要返回几层。 | 1.1.0 |
exit | 退出小程序,target="miniProgram" 时生效 |
2.1.0 |
1.富文本标签,相当于vue中的v-html
2.nodes属性来实现
1.接收标签字符串(常用)<rich-text nodes="<h1>小区平台<h1>"></rich-text>
2.接收对象数组
1.按钮标签外观属性size type
2.开发能力属性 open-type
1.contact 客户开发流程
1.要将测试号appid改为自已的appid
2.去官网注册获取自已的appid(如果微信绑字用了自已的邮箱,可以先到微信设置/账号与安全/更多安全设置/邮件地址下解除绑定)
3.登录进入开发/开发管理/开发设置/复制开发者appID
4.修改微信小程序开发编辑器中的appid (这个要保密)
5.在小程序后台的功能找到客服===>添加一个客户的微信号(自已用的就可以了)
2.share 转发
3.getPhoneNumber 获取用户手机号
4.getUserInfo 获取用户信息
5.feedback 打开“意见反馈”页面
1.字体图标
2.属性
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
type | string | 是 | icon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear | 1.0.0 | |
size | number/string | 23 | 否 | icon的大小 | 1.0.0 |
color | string | 否 | icon的颜色,同css的color | 1.0.0 |
9.单选框标签使用
1.radio 单选框
2.radio-group 单项选择器
3.两个标签配合使用
4.案例: 单选框男和女
1.radio标签与父元素单项选择器radio-group来使用
2.value选中的单选框的值
3.给单项选择器radio-group绑定change事件(关键字: bindchange="事件名称")
4.需要在页面中显不选中的值
5.代码:


<radio-group bindchange="handlechange">
<radio color="red" value="m">男</radio>
<radio value="f">女</radio>
</radio-group>
<view>显示选中的值:{{gender}}</view>
wxml


Page({ /**
* 页面的初始数据
*/
data: {
gender:""
},
handlechange(e){
// 1.获取单选框中的值
let gender=e.detail.value
// 2.把值赋给data中的gender
this.setData({
gender
})
}
})
js
10.单选框标签使用
2.checkbox-group 多项选择器
3.两个标签配合使用
4.案例代码:


<view>
<checkbox-group bindchange="handitemchange">
<checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">{{item.name}}</checkbox>
</checkbox-group>
</view>
<view>选中的值:{{checkedlist}}</view>
wxml


Page({
data: {
list:[
{
id:0,
name:"苹课",
value:"apple"
},
{
id:1,
name:"香蕉",
value:"bananer"
},
{
id:2,
name:"葡萄",
value:"grage"
}
],
// 3.定义一个数组存放选中的值
checkedlist:[]
},
// 多选柜的选中事件
handitemchange(e){
// 1.获取选中的值
const checkedlist=e.detail.value
// 2.进行赋值
this.setData({
checkedlist
})
}
})
js
1.创建组件
1.根目录下新建文件夹(新建文件夹点击资源管理器最下面空白处) component
2.再创建一个文件夹(组件名)
3.创建组件(四个文件),右击创建component 创建
2.注册组件:哪一个页面使用就在哪一个页面的json文件的 usingComponents 中注册
3.使用组件:在注册组件对应的wxml中使用
1.应用生命周期:指的是组件自身的一些函数,这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发
2.页面生命周期
小程序相关的框架(不分先后顺序)
1.腾讯 wepy 语法类似vue
2.美团 mpvue 语法似拟vue
3.京东 taro 类似 react
4.滴滴 chameleon
5.uni-app 类似vue
6.原生框架 MINA
微信小程序(五)-常见组件(标签)的更多相关文章
- 微信小程序校历组件
微信小程序校历组件 校历组件,可以作为校园小程序的插件,如果觉得不错,点个star吧
- 原创:WeZRender:微信小程序Canvas增强组件
WeZRender是一个微信小程序Canvas增强组件,基于HTML5 Canvas类库ZRender. 使用 WXML: <canvas style="width: 375px; h ...
- 微信小程序之swiper组件高度自适应
微信小程序之swiper组件高度自适应 要求: (顶部广告栏 ) 改变swiper组件的固定高度,使之随内部每张图片的高度做自适应 原理: 图片加载完之后,获取图片的原始宽高,根据宽高比,计算出适应后 ...
- 微信小程序中的组件使用1
不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组 ...
- 微信小程序基于swiper组件的tab切换
代码地址如下:http://www.demodashi.com/demo/14010.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- 关于微信小程序前端Canvas组件教程
关于微信小程序前端Canvas组件教程 微信小程序Canvas接口函数 上述为微信小程序Canvas的内部接口,通过熟练使用Canvas,即可画出较为美观的前端页面.下面是使用微信小程序画图的一些 ...
- uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤
uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤 这里以vant-weapp为例 uni-app官方文档介绍引入组件的方法 1. 新建相关目录 根目录下创建 wxcomponen ...
- 微信小程序内置组件web-view的缓存问题探讨
前言:博客或者论坛上面,还有自习亲身经历,发现微信小程序的webview组件的页面缓存问题相当严重,对开发H5的小童鞋来说应该困扰了不少.很多小童鞋硬是抓破脑袋也没有办法解决这个问题,那我们今天就来探 ...
- 微信小程序--页面与组件之间如何进行信息传递和函数调用
微信小程序--页面与组件之间如何进行信息传递和函数调用 这篇文章我会以我自己开发经验从如下几个角度来讲解相关的内容 页面如何向组件传数据 组件如何向页面传数据 页面如何调用组件内的函数 组件如何调 ...
随机推荐
- 考研机试练习(KY2-KY10)
KY2 成绩排序 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32M,其他语言64M 本题知识点: 排序 sort struct 题目描述 查找和排序 题目:输入任意(用户,成绩) ...
- MDK中用C++开发STM32
作者:良知犹存 转载授权以及围观:欢迎添加微信:Allen-Iverson-me-LYN 前言 最近想开发一段单片机的代码,代码本身有很多的重复元素,这重复定义的一些结构体使用起来有些繁琐, ...
- Web开发模型
1.服务器 web服务器:pc机器安装一个具有web服务的软件,称之位web服务器 数据库服务器:pc机器安装一个具有数据管理件服务的软件,称之为web服务器 邮件服务器:pc机器安装一个具有发送邮件 ...
- Codeforces Round #664 (Div. 2) C. Boboniu and Bit Operations
传送门:cf1395C 题意 c[i]=a[i]&b[j],b[j]是b数组中任意一个,求c[1] | c[2] | ... | c[n]最小值. 题解 经典的二进制枚举答案,因为a和b的最大 ...
- 在eclipse完成对Java_web项目里面资源文件的读取
Java_web项目的资源文件一般有两种: 一种是存放数据之间有联系的文件,使用xml文件 另一种是存放数据之间没有联系的文件,使用properties文件 这里我们对properties文件读写做示 ...
- CodeForces - 721C 拓扑排序+dp
题意: n个点m条边的图,起点为1,终点为n,每一条单向边输入格式为: a,b,c //从a点到b点耗时为c 题目问你最多从起点1到终点n能经过多少个不同的点,且总耗时小于等于t 题解: 这道 ...
- hdu5360 Hiking
Problem Description There are n soda conveniently labeled by 1,2,-,n. beta, their best friends, want ...
- Leetcode(884)-索引处的解码字符串
给定一个编码字符串 S.为了找出解码字符串并将其写入磁带,从编码字符串中每次读取一个字符,并采取以下步骤: 如果所读的字符是字母,则将该字母写在磁带上. 如果所读的字符是数字(例如 d),则整个当前磁 ...
- Tensorflow2的基本用法
张量表示数据,用计算图搭建神经网络,用会话执行计算图,优化线上的权重(参数)->得到模型. 张量(tensor):多维数组(列表) 阶:张量的维数. 数据类型: ...
- Keras读取保存的模型时, 产生错误[ValueError: Unknown activation function:relu6]
Solution: from keras.utils.generic_utils import CustomObjectScope with CustomObjectScope({'relu6': k ...