小程序基础知识

小程序常用标签

自定义属性，可用于传参

小程序的for循环

小程序中的方法如何携带参数

小程序中常用的布局组件

view 类似于div、p，用于包裹内容

text 文本，类似于span

复制文字

解码

rich-text 富文本

通过nodes传入字符串数据

通过nodes传入对象数组数据

button 按钮

点击按钮，打开客服聊天页面

image 图像

小程序的image标签有一个很强大的功能：懒加载

navigator 超链接标签，类似a标签，可用于跳转

icon 图标

swiper 轮播图

那么，如何根据图片宽高来设置swiper的高度呢？

radio 单选框

checkbox 复选框

小程序基础知识

小程序常用标签

    text标签，相当于 span标签，行内元素，多个并列不会换行view标签，相当于 div标签，块元素，block标签，相当于template标签，页面渲染时不会渲染它

自定义属性，可用于传参

标签自定义属性：data-cj="{{num}}"<view data-cj="{{num}}">123</view>
===》这样，在控制台中页面里，就会在这个标签中看见这个data-cj数据注意：data-cj="   {{num}}" 引号和花括号之间不能有空格，否则num就会被当成一个字符串，
而不是data中的数据量

小程序的for循环

wx:for循环：wx:for="{{数组}}"wx:for-item="cjItem" ===>重新设置循环中的item名称，默认是itemwx:for-index="cjIndex" ===>重新设置循环中的index名称，默认是indexwx:key="唯一值" ==>用于提升列表的渲染性能wx:key="唯一值" ==>一般可以用id（数据中自带的id值）、或者使用  "*this" ==>表示为当前数据本身wx:for="{{对象}}"wx:for-item="cjVal" ===>表示对象的值，默认是叫itemwx:for-index="cjKey" ===>表示对象的key，默认是叫index

小程序中的方法如何携带参数

/*** 小程序中的 方法传参：* ?小程序中是不能通过在方法名处带上参数来传递参数的，因为括号与参数会被一起当作函数名称* 需要传参，就必须在标签中通过 【 自定义属性：data-参数名="{{val}}" 】 来绑定，* 然后通过方法中的【事件源对象e】的【dataset】来获取自定义属性
*/

小程序中的data数据如何获取、赋值

/**

* 小程序中的data赋值：

* 要想修改data中的数据，在微信小程序中，是不能通过this.data.num=val 来修改的

* 只能通过this.setData({num:val}) ===>来设置data中的数据

* 但是：如果在方法中需要获取到data中的数据，就要通过【 this.data.num 】来拿到数据

* !【也就是说，获取data中的数据，要用 this.data.字段 ,而设置data中的数据，要用this.setData({key:val})】

小程序中常用的布局组件

view 类似于div、p，用于包裹内容

text 文本，类似于span

text文本标签里面只能嵌套自己，不能有其他标签

只有text标签中的文字可以【长按复制】，其他标签无法实现该效果

复制文字

<text selectable="true"></text>

要开启可选，小程序里才能长按复制文本

解码

rich-text 富文本

能将字符串解析为html标签，类似于v-html功能

<rich-text nodes="{{data中的数据}}"></rich-text>

通过nodes传入字符串数据

通过nodes传入对象数组数据

html:[{// 1 div标签 name属性来指定name:"div",// 2 标签上有哪些属性attrs:{// 标签上的属性 class  styleclass:"my_div",style:"color:red;"},// 3 子节点 children 要接收的数据类型和 nodes第二种渲染方式的数据类型一致 children:[{name:"p",attrs:{},// 放文本children:[{type:"text",text:"hello"}]}]}]

通过在对象数组里面配置，就能得到类似html的结构来渲染

button 按钮

小程序的按钮通过poen-type属性，得到了很多新的能力

<!-- share 转发当前的小程序 到【指定的微信朋友】中   但是不能把小程序 分享到 【朋友圈】
分享页面会有当前小程序页面的整体效果图 -->
<button open-type="share">share</button>
<!-- getPhoneNumber 获取当前用户的手机号码信息   注意：只有通过企业认证的小程序，才能获取到用户的手机号加密信息，个人开发者的账号是没有权限来获取用户的手机号码 1 绑定事件 bindgetphonenumber="getPhoneNumber"2 获取到加密过的手机号信息3 需要开发者后端人员在后台服务器通过获取code等操作，在后台服务器中进行解析 手机号码，返回到小程序中 -->
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumber</button>
<!-- getUserInfo 获取当前用户的个人信息1 使用方法 类似 获取用户的手机号码2 但是可以直接获取 不存在加密的字段 -->
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button>
<!-- openSetting 打开小程序内置的 授权页面授权页面中 只会出现 用户曾经在【当前小程序中】点击过的 权限 无论点击权限后是否同意授权，都会显示这个权限，没同意的话权限的开关状态就是关闭的 -->
<button open-type="openSetting">openSetting</button>
<!-- contact 直接打开  （客服对话功能）  需要在微信小程序的后台配置
只能够通过【真机调试】来打开 -->
<button open-type="contact">contact</button>
<!-- feedback 打开 小程序内置的 意见反馈页面 只能够通过【真机调试】来打开 -->
<button open-type="feedback">feedback</button>
<!-- launchApp 在小程序当中 直接打开 app1 需要现在 app中 通过app的某个链接 打开 小程序2 在小程序 中 再通过 这个功能 重新打开 app -->
<button open-type="launchApp">launchApp</button>

点击按钮获取用户信息：【open-type="getUserInfo" bindgetuserinfo="getUserInfo"】

点击按钮打开当前小程序获得的用户授权记录：【open-type="openSetting"】

点击按钮，打开客服聊天页面

第一步：在小程序后台的【客服】菜单中，添加指定的微信账号，作为客服

第二步：通过手机打开小程序

第三步：在手机上点击客服按钮，打开客服对话页面，进行对话

然后，客服就会收到提示，进行回复

image 图像

小程序中的image标签和html中的img标签有很大的区别

因为微信小程序规定：打包上线的代码体积不能超过2M，所以小程序中的很多静态资源需要放在网络上存储，通过外部链接调用，防止占用代码体积

aspectFit

<image src="url" mode="aspectFit" />

widthFix：类似与html中的图片效果，此时，image标签只受width设置的影响，图片会拉伸到设置的width宽度，然后根据宽高比拉伸高度，不受height的值的影响

<image src="url" mode="widthFix" />

小程序的image标签有一个很强大的功能：懒加载

<image src="url"  lazy-load="true" />

lazy-load的功能：小程序会自己判断，当图片出现在可视区域（视口）的上下3屏的高度时，自动开始加载图片

navigator 超链接标签，类似a标签，可用于跳转

navigator标签是块元素，不是行内元素，这跟a标签不同！它可以设置宽高

【默认块元素就是占满整行】

navigator标签有两种跳转：

1.跳转到当前小程序的某个页面默认值 self，不写也是这个默认值

2.跳转到其他小程序

当设置：target=“miniProgram”的时候，就是跳转到其他小程序了

icon 图标

swiper 轮播图

swiper标签中必须同时使用【swiper-item】来包含轮播的内容

swiper轮播图有默认的样式

width:100% height:150px

注意：swiper没法通过内容来自动撑开height，需要提前设置好swiper的height

那么，如何根据图片宽高来设置swiper的高度呢？

首先：要明确一点，有个公式，swiper.height / swiper.widht = img.height / img.widht
也就容器的高/宽 = 图片的高/宽

swiper.widht ===> 100%

img.height ===>自己的图片自己知道 img.widht ===>自己的图片自己知道

所以，那么就能求 swiper.height 了：

swiper.height =img.height / img.widht *swiper.widht

所以，就能在样式中通过 calc 来计算出swiper的高度了

要让轮播图动起来，就需要给swiper标签加上autoplay

<swiper autoplay="true"><swiper-item class="" item-id=""></swiper-item><swiper-item class="" item-id=""></swiper-item>
</swiper>

radio 单选框

1.可以通过color属性来设置单选框选中时的颜色

2.必须搭配【父元素】【radio-group】来使用

 <radio-group bindchange="handleChange"><radio color="red" value="male">男</radio><radio color="red" value="female" >女</radio></radio-group>

效果：

checkbox 复选框

1.可以通过color属性来设置单选框选中时的颜色

2.必须搭配【父元素】【checkbox-group】来使用

3.可以多选

<checkbox-group bindchange="handleItemChange"><checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">{{item.name}}</checkbox>
</checkbox-group>

微信小程序学习-黑马商城程序（更新中~）相关推荐

Go语言开发学习笔记（持续更新中）
Go语言开发学习笔记(持续更新中) 仅供自我学习更好的文档请选择下方 https://studygolang.com/pkgdoc https://www.topgoer.com/go%E5%9F% ...
C语言学习笔记Day3——持续更新中... ...
上一篇文章C语言学习笔记Day2--持续更新中- - 八. 容器 1. 一维数组 1.1 什么是一维数组当数组中每个元素都只带有一个下标(第一个元素的下标为0, 第二个元素的下标为1, 以此类推)时 ...
【第十三届蓝桥杯备战】C/C++解题时的一些个人小技巧和注意事项(持续更新中)
[第十三届蓝桥杯备战]C/C++解题时的一些个人小技巧和注意事项(持续更新中) 输入输出数组数据结构 1. 线段树调试 References 先说一些废话:我最近觉得写算法题就像是打格斗游戏一样 ...
微信小程序学习笔记--商城案例（黑马教程）
目录起步运行于小程序 Git 托管到码云 tabbar 创建tabBar 配置tabbar 导航条颜色首页网络配置请求轮播图数据渲染轮播图配置小程序分包点击轮播图,跳转详情页全局添加 ...
SpringCloud学习笔记，课程源自黑马程序员，笔记持续更新中...
@SpringCloud+RabbitMQ+Docker+Redis+搜索+分布式: 学习内容 1.服务拆分-服务远程调用: 2.搭建eureka服务: 2.1.eureka服务注册-client 2 ...
微信小程序富文本rich-text使用详解-微信小程序系统学习攻略
也许你迷茫,但是我想说,在你迷茫的同时,保持本心,过好今天就好. 在微信小程序开发中,rich-text 标签可以用来显示富文本 html内容,可以渲染部分html标签,全局支持class和style ...
微信小程序文本组件text使用详解-微信小程序系统学习攻略
也许你迷茫,但是我想说,在你迷茫的同时,保持本心,过好今天就好. 在微信小程序中,组件 text 用来显示文本,基本使用代码如下: <text >测试使用</text> 1 基 ...
黑马教程深入学习C++（持续更新中）
黑马教程深入学习C++ 阶段内容目标案例第一阶段 C++基础语法入门对C++有初步了解,能够有基础的编程能力通讯录管理系统第二阶段 C++核心编程介绍C++面向对象编程,为大型项目做铺 ...
微信小游戏 - 学习/实践
1.应用场景主要用于快速开发微信小游戏. 2.学习/操作 1.介绍小游戏是一种基于微信平台开发,不需要下载安装即可使用的全新游戏应用,体现了"用完即走"的理念,充分节省用户的手 ...

微信小程序学习-黑马商城程序（更新中~）

小程序基础知识

小程序常用标签

自定义属性，可用于传参

小程序的for循环

小程序中的方法如何携带参数

小程序中常用的布局组件

view 类似于div、p，用于包裹内容

text 文本，类似于span

复制文字

解码

rich-text 富文本

通过nodes传入字符串数据

通过nodes传入对象数组数据

button 按钮

点击按钮，打开客服聊天页面

image 图像

小程序的image标签有一个很强大的功能：懒加载

navigator 超链接标签，类似a标签，可用于跳转

icon 图标

swiper 轮播图

那么，如何根据图片宽高来设置swiper的高度呢？

radio 单选框

checkbox 复选框

微信小程序学习-黑马商城程序（更新中~）相关推荐

最新文章

热门文章