初学小程序(第4天)

1.常见组件

重点讲解⼩程序中常⽤的布局组件

view,text,rich--text,button,image,navigator,icon,swiper,radio,checkbox。 等

1.1 view
代替原来的 div 标签

<view hover-class="h-class">点击我试试</view>

1.2 text

⽂本标签
只能嵌套text
⻓按⽂字可以复制（只有该标签有这个功能）
可以对空格回⻋进⾏编码

1.3 image

图⽚标签，image组件默认宽度320px、⾼度240px
⽀持懒加载

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

1.4 swiper

微信内置轮播图组件

默认宽度 100% ⾼度 150px

1.4.1 swiper-item

滑块

默认宽度和⾼度都是100%
1.5 navigator

导航组件类似超链接标签

open-type 有效值：

1.6 rich-text

富文本标签

可以将字符串解析成对应标签，类似 vue中 v–html 功能

代码

// 1   index.wxml 加载 节点数组
<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
// 2 加载 字符串
<rich-text nodes='<img
src="https://developers.weixin.qq.com/miniprogram/assets/images/head_global_z_@all.p
ng" alt="">'></rich-text>// index.jsPage({data: {nodes: [{name: 'div',attrs: {class: 'div_class',style: 'line-height: 60px; color: red;'},children: [{type: 'text',text: 'Hello&nbsp;World!'}]}]},tap() {console.log('tap')}
})

1.6.1 nodes属性
nodes 属性⽀持字符串和标签节点数组

⽂本节点：type = text

nodes 不推荐使⽤ String 类型，性能会有所下降。
rich–text 组件内屏蔽所有节点的事件。
attrs 属性不⽀持 id ，⽀持 class 。
name 属性⼤⼩写不敏感。
如果使⽤了不受信任的 HTML 节点，该节点及其所有⼦节点将会被移除。
img 标签仅⽀持⽹络图⽚。
1.7 button

<buttontype="default"size="{{defaultSize}}"loading="{{loading}}"plain="{{plain}}"
>default
</button>

size 的合法值

type 的合法值

form-type 的合法值

open-type 的合法值

open-type 的 contact的实现流程

将⼩程序的 appid 由测试号改为⾃⼰的 appid
登录微信⼩程序官⽹，添加客服 – 微信
为了⽅便演⽰，⽼师⾃⼰准备了两个账号
普通⽤⼾ A
客服-微信 B
就是⼲！
1.8 icon

代码:
js

Page({data: {iconSize: [20, 30, 40, 50, 60, 70],iconType: ['success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel',
'download', 'search', 'clear'],iconColor: ['red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'],}
})

wxml

<view class="group"><block wx:for="{{iconSize}}"><icon type="success" size="{{item}}"/></block>
</view>
<view class="group"><block wx:for="{{iconType}}"><icon type="{{item}}" size="40"/></block>
</view>
<view class="group"><block wx:for="{{iconColor}}"><icon type="success" size="40" color="{{item}}"/></block>
</view>

1. 9radio

可以通过 color属性来修改颜色

需要搭配 radio-group ⼀起使⽤
1.10 checkbox

可以通过 color属性来修改颜色

需要搭配 checkbox-group ⼀起使⽤

以上就是今天所学内容

初学小程序(第4天)相关推荐

初学小程序之制作电影介绍查询小程序遇到的问题和解决办法
tabar标签和标题的设置,去下载小图标,进行添加.代码如下: "tabBar": {"color": "black","sele ...
duang~NBA资讯小程序
话不多说,先来一张我科的图坐镇 NBA资讯小程序出来啦作为一个刚接触小程序不久的前端小白菜,恰逢最近NBA如火如荼的双抢七大战.骑士与勇士又又又又又一次的巅峰对决(实话:真的看腻了- -),决定写一 ...
微信小程序自定义拍照功能
1.页面路径 "pages/camera/takePhoto" 2.样式:takePhoto.wxss .fullscreen{width: 100%; height: 100% ...
关于UniApp启动到微信小程序工具提示找不到app.json
在 uni-app 开发中使用 vue-cli-plugin-uni 插件创建项目时,如果出现找不到 app.json 的错误,可能是以下原因导致的: 项目根目录下缺少 pages 和 globalS ...
微信小程序中如何引用weUI（踩坑记录）
众所周知WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一. 在初学小程序开发时,我也想使用WeUI进行我的小程序开发,但 ...
惊了！个人小程序上线一小时，服务器崩了！
前言寒假在家玩的都不想玩了,想着还是应该做些有意思的事情.本来想着过年换台新电脑,由于疫情原因,还是没有换.但是旧电脑上的数据还是得整理一下,毕竟C盘已经出现红色警告了.┭┮﹏┭┮ ...
仿网易云音乐（微信小程序版）
项目部分截图(Gif) 前言前一阵子学习了微信小程序,为了巩固所学的知识和提高实战经验,决定自己手撸一款小程序.因为听歌一直在用网易云音乐,所以突发奇想就做一款仿网易云音乐的小程序吧!开发中遇到了很 ...
从0到一开发微信小程序（3）—小程序框架配置
文章目录其他相关文章 1.小程序框架 1.1.全局配置 1.1.1.Pages 1.1.1.1.entryPagePath 1.1.1.2.生成页面方式 1.1.2.window 1.1.3.tab ...
微信小程序从入门到精通
目录前言一,初学小程序 1.1 小程序概述 1.2 基础配置 1.2.1 注册开发账号 1.2.2 获取AppID 1.2.3 微信开发者工具 1.2.4 修改代理模式 1.3 第一个小程序 1. ...

初学小程序(第4天)

1.常见组件

初学小程序(第4天)相关推荐

最新文章

热门文章