<笔记>小程序
小程序的代码构成
小程序项目里主要是4个文件:
.json
后缀的JSON配置文件.wxml
后缀的WXML的模板文件.wxss
后缀缀的 WXSS 样式文件.js
后缀的 JS 脚本逻辑文件
下面是4种文件的介绍
JSON
JSON介绍:
- JSON 是一种数据格式,并不是编程语言,在小程序中,JSON扮演的静态配置的角色。
JSON语法:
JSON的值只能是以下几种数据格式,其他任何格式都会触发报错,例如 JavaScript 中的 undefined。
- 数字,包含浮点数和整数
- 字符串,需要包裹在双引号中
- Bool值,true 或者 false
- 数组,需要包裹在方括号中 []
- 对象,需要包裹在大括号中 {}
- Null
JSON 文件中无法使用注释。
app.json
app.json
是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
字段:
1.pages字段,页面路径,里面包含了所有小程序的页面路径,在pages里面增加路径,会自动生成新的页面
比如:pages/demo01/demo01
,值得注意的是,第一个pages和第二个demo01是文件夹,最后一个demo01是项目文件。
2.window字段,里面义小程序所有页面的顶部背景颜色,文字颜色定义等。
其他配置项细节可以参考文档 小程序的配置 app.json
页面配置 page.json
页面的配置文件,可以理解为局部变量
配置项细节可以参考文档 页面配置
WXML 模板
WXML就是HTML,实现页面结构
更详细的文档可以参考 WXML
WXSS样式
WXSS
具有 CSS
大部分的特性,小程序在 WXSS
也做了一些扩充和修改,此外 WXSS
仅支持部分 CSS
选择器
更详细的文档可以参考 WXSS
JS逻辑交互
JS 中调用小程序提供的丰富的 API,利用这些 API 可以很方便的调起微信提供的能力,例如获取用户信息、本地存储、微信支付等。
SITMAP
⽬录下的 sitemap.json ⽂件⽤于配置小程序及其页面是否允许被微信索引。
模板语法
- text=span 行内元素 不会换行
- block 在渲染的时候,会把block移除掉 ,工具标签
- view=div 块级元素 会换行
WXML语法
数据绑定:
在js里data的数据,可以在wxml里面使用
列表渲染:
官方介绍:详细内容
- for循环
- 在view里面,增加
wx:for="{{list}}"
,对其及进行遍历,item是里面的元素,index是索引。list可以是一个对象,也可以是一个数组。 - 属性/下标,用
wx:for-item/index
能指定下标的变量名。在循环嵌套的时候,需要注意!!! - wx:key可以提高渲染性能
条件渲染
-
If语句
<view wx:if="{{}}">
-
hidden语句
<view hidden> <view hideen="{{true}}">
原理:将其样式变为display:none,因此不能和display一起使用。
<view style="display:none;">你好</view> <view hidden>看不见我!!</view> <view hidden="{{true}}">你也看不见我</view> <view hidden="{{flase}}">出现啦!!</view>
事件绑定
- 事件绑定:
在控件后面增加,bindxxx,比如
<input bindinput="handleInput"/>
<button bindtap="handleButton"">+</button>
- 传参:
不能直接传参数,但是可以设置属性的值,比如data-x={{1}},这个x是可以不存在的,他会在事件源里的currentTarget.dataset.x
,js就可以直接调用。
- 传参时的注意事项:
今天遇到了一个bug,就是数据设置的时候,会自动转化成字符串,因此可以通过(data-0),将字符串转成数字。
- 事件函数:
写在page({里面})。格式为
函数名:function(e//这个是事件源){
}
- 数据设置:
setData
函数用于将数据从逻辑层发送到视图层 (异步),同时改变对应的 this.data
的值(同步)。
注意:
直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的,还会造成数据不一致。
代码:
handleInput:function(e){
this.setData({
num:e.detail.value
})
}
标签
View标签
代替原来的div标签
<view>
</view>
Text标签
- ⽂本标签
- 只能嵌套text
- ⻓按⽂字可以复制(只有该标签有这个功能
- 可以对空格 ,或者是其他符号进⾏编码。
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
selectabl(已废弃) | Boolean | false | 文本是否可选 |
decode | Boolean | false | 是否解码 |
user-select | string | 文本是否可选,该属性会使文本节点显示为 inline-block |
image
-
图片标签,建议把图片放到网上面,通过网络连接加载图片。
-
图片默认宽度和高度320*240
属性
layz-load,懒加载,会字节判断当图片出现在视口上下三屏的高度之内,程序会自己加载图片。
-
src:路径
-
layz-load:懒加载,有些界面图片很多,一次性加载会非常的卡,懒加载就起作用了。
-
mode:常用的几个值有
值 说明 scaleToFill 填充,拉满 aspectFit 等比例缩放,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。因为长边能够显示,那么短边一定也能够显示的出来了。 aspectFill 保持纵横比缩放图片,只有短边能完全显示出来,图片通常另一个方向将会发生截取。 top/bottom/.. 绝对定位,具体查看文档 width/height Fix 缩放模式,表示宽度/高度不变(指定的值),另外一个自动比例缩放。
swiper轮播组件
-
每一个轮播的iten只能是
<swiper-item></swiper-item>
-
<swiper>
标签存在默认样式-
width 100%
-
heitght 150px (image也存在默认320*240)
-
图片放进去可能会很丑,因此要根据图片计算图片缩放后的高度从而调整swiper 高度 ,在样式里设置的时候需要用calc(计算等式)来赋值。
-
图片的属性也要是设置为宽度不变,高度等比例变化。即
<image mode=widthFix>
-
/* 计算 图片缩放以后的宽高 */ swiper{ height:calc(100vw*(280/520)); }
-
nevigator超链接
属性 | 类型 | 说明 | 默认值 |
---|---|---|---|
target | 在哪个小程序上跳转,默认是当前小程序,用miniProgram可以跳转其他小程序上 | self | |
open-type | 跳转方式 | ||
url |
open-type
值 | 说明 |
---|---|
nevigate | 保留当前页面,跳转到应用内的某个页面。不能跳到abbar 页面。 |
redirect | 关闭当前页面,跳转到应用内的某个页面。不能跳 tabbar 页面。 |
还可以专门跳转到tabbar页面的,更多方式访问官方文档.....
使用方式:
navigator open-type="navigate" url="/pages/demo02/demo02">
注意:url跳转的路径,用的是斜杆,而不是反斜杠,和网页链接一样
rich-text富文本标签(不太理解)
属性:
-
nodes:
1.接收标签字符串
2.接收标签数组
-
标签字符串(一大堆标签)
<rich-text nodes="{{字符串}}"}></rich-text>
button
button 开放能力 :open-type
icon
属性:很多
radio
- 需要在外面嵌套radio-group,其可以用bindchange 来绑定事件。
- <radio>选项里面的value值,会被bindchange获取。
checked-box
类似radio标签,而且都需要搭配
特点:复选框组有一个bindchange绑定事件,返回的value值,是一个数组,数组的内容就是已选的复选框的value值的数组。
-
案例运用
需求:利用radio checked-box实现选中和文本同步,选中的内容同步文本的内容。
- 可以利用循环做列表i渲染功能,并且边渲染,边循环,边给对应的复选框添加相应的value值。
- 在js里,获取value数组,利用setData函数,给自定义的数组赋值,然后调用数组,在wxml里显示i出来。
- wxml
<view>
<checkbox-group bindchange="getMessage">
<checkbox wx:for="{{list}}" value="{{item.nickName}}">//边循环 ,边赋value值
{{item.name}}
</checkbox>
<view>
你选中的人的昵称是:
<view wx:for="{{dataList}}">
{{item}}
</view>
- js
data: {
list:[
{
name:"123",
nickName:'123',
age:5
},
{
name:"111",
nickName:'222',
age:6
}
],
dataList:[]
},
getMessage(e){
//返回的是一个数组
this.setData({
dataList:e.detail.value
})
}
自定义组件
创建步骤
-
在component里增一个包,包名为组件名称,右键增加自定义组件,会生成4个基础文件。
-
需要在自定义的文件里的json设置
conponent:true
-
在需要使用自定义组件页面的json文件下
usingComponents
引用自定义文件,例如:"usingComponents": { "Tabs":"../../components/chatroom/Tabs/Tabs" }
-
在对应的页面中可以直接使用了