由于小组需求，现在转为学小程序，先把安卓放一放
全局配置
app.json里面的代码
{
"pages":[
"pages/index/index",
"pages/maps/maps" ,
"pages/users/users",
"pages/massages/massages",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"dark",
"navigationBarBackgroundColor": "#E3A4B1",
"navigationBarTitleText": "车库定位",
"navigationBarTextStyle":"black",
"enablePullDownRefresh":true,
"backgroundColor": "#eeeeee"
},
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "定位",
"iconPath": "imge/_map.jpg",
"selectedIconPath": "imge/map.jpg"
},
{
"pagePath": "pages/users/users",
"text": "我的",
"iconPath": "imge/_user.jpg",
"selectedIconPath": "imge/user.jpg"
}
],
"color": "#777777",
"selectedColor": "#EE008F",
"backgroundColor": "#E3A4B1"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}2.数据绑定
某个文件的.wxml文件的代码
<!--pages/users/users.wxml-->
<!--
1 text 相当于以前web中的span标签 行内元素 不会换行
2 view 相当于以前web中的div标签 块级元素 会换行
3 checkbox 以前的复选框
-->
<text>小</text>
<text>小</text>
<view>小小</view>
<view>小小</view>
<!--1 字符串-->
<view>
{{msg}}
</view>
<!--2 数字类型-->
<view>
{{num}}
</view>
<!--3bool类型-->
<view>
啦啦啦：{{isGirl}}
</view>
<!--4object-->
<view>
{{person.age}}
</view>
<view>
{{person.name}}
</view>
<!--5在标签的属性中使用-->
<view data-num="{{num}}">自定义属性</view>
<!--6 使用bool类型充当属性 checked属性激活设置false或者true
注意：字符串和花括号之间一定不要存在空格 否则会导致识别失败
以下写法就是错误的示范
<checkbox checked=" {{isChecked}}"></checkbox >
-->
<view>
<checkbox checked="{{isChecked}}"></checkbox >
</view>
<!--7运算 =》 表达式
1 可以在花括号中加入表达式 -- “语句”
2 表达式
指的是一些简单的运算 数字运算 字符串 拼接 逻辑运算
1数字的加减
2字符串拼接
3三元表达式
3 语句
1 复杂的代码段
1 if else
2switch
3do while
4for
-->
<view>
{{1+1}}
</view>
<view>
{{'1'+'1'}}
</view>
<view>
{{11%2===0?'偶数':'奇数'}}
</view>
<!--
8列表循环
1 wx:for="{{数组或者对象}}" wx：for-item="循环项的名称" wx:for-index="循环项的索引"
2 wx:key="唯一的值" 用来提高列表渲染的性能，也就是说key要用唯一的值
1 wx：key 绑定一个普通的字符串的时候，那么这个字符串名称肯定是循环数组中的对象的唯一属性
2wx：key="*this"（固定的写法）就表示你的数组是一个普通的数组 *this表示是循环项
形式如下面这样的时候就要使用*this
[1,2,3,4]
["1","2","3"]
3当出现数组的嵌套循环的时候 尤其要注意 以下绑定的名称 不要重名
4默认情况下 我们不写这几句wx:for-item="item" wx:for-index="index"
小程序也会把循环项的名称和索引的名称定义为item和index
只有一层循环的话（wx:for-item="item" wx:for-index="index"）可以省略
9对象循环
1 wx:for="{{对象}}" wx：for-item="对象的值" wx:for-index="对象的属性"
2循环对象的时候最好把item和index的名称都修改下
wx:for-item="value" wx:for-index="key"
10使用 wx:for-item 可以指定数组当前元素的变量名，
使用 wx:for-index 可以指定数组当前下标的变量名：
也就是说
wx:for-item="value"
wx:for-index="key"
-->
<!--循环数组的例子-->
<view wx:for="{{list}}"
wx:for-item="item"
wx:for-index="index"
wx:key="id">
索引 ：{{index}}
值：{{item.name}}
</view>
<view wx:for="{{xiao}}"
wx:for-item="item"
wx:for-index="index"
wx:key="*this"> <!--注意这里的key要写成*this-->
索引 ：{{index}}
值：{{item}}
</view>
<!--循环对象的例子-->
<view wx:for="{{person}}"
wx:for-item="value"
wx:for-index="key"
wx:key="name">
索引 ：{{key}}
值：{{value}}
</view>某个文件的.js文件的代码
// pages/users/users.js
Page({
data: {
msg:"小小有大大的梦想",
num:10000000,
isGirl:false,
person:{
age:22,
name:"小小"
},
isChecked:true,
list:[
{id:20,
name:"xiaoxiao"},
{id:22,
name:"dada"}
],
xiao:[1,2,3,4,5]
}
});3.block标签
<!--block标签
中文翻译过来的意思是‘块’，意思就是一大段代码需要一个括号包裹起来一样，形成一块一块
其实也就类似头条的这个块。这样的好处就是有了block标签过后，你就可以把if 或则 for 语句写在block标签里面这样就控制了这一块的逻辑。
-->
<block wx:for="{{list}}"
wx:for-item="item"
wx:for-index="index"
wx:key="id">
索引 ：{{index}}
值：{{item.name}}
</block>4.条件渲染
<!--
11条件渲染
1 wx:if="{{true/false}}"
1 if wx:if
else wx:elif
if else wx:else
2 hidden
1 在标签上直接加入属性 hidden
2 hidden="{{true}}"
3 什么场景下用哪个
1当标签不是频繁的切换显示 优先使用wx：if
直接把标签从页面结构给移除掉
1当标签频繁的切换显示 优先使用hidden
通过添加样式的方式来切换显示
-->
<view>条件渲染</view>
<view wx:if="{{true}}">
显示
</view>
<view wx:if="{{false}}">
隐藏
</view>
<view wx:if="{{false}}">
1
</view>
<view wx:elif="{{flase}}">
2
</view>
<view wx:else>
3
</view>
<view>-------------</view>
<view hidden>
hidden1
</view>
<view hidden="{{flase}}">
hidden2
</view>
<view wx:if="{{false}}">
wx:if
</view>
<view hidden>
wx:if
</view>5.事件绑定
.js文件
// pages/users/users.js
Page({
data: {
msg:"小小有大大的梦想",
num:0,
isGirl:false,
person:{
age:22,
name:"小小"
},
isChecked:true,
list:[
{id:20,
name:"xiaoxiao"},
{id:22,
name:"dada"}
],
xiao:[1,2,3,4,5]
},
//输入框的input事件的执行逻辑
handleInput(e){
// console.log(e);
this.setData({
num:e.detail.value
})
},
handletap(e){
//console.log(e);
//1获取自定义属性 operation
//e.currentTarget 代表的是，注册了监听点击事件的组件。在本例中，就是外层的View（包含了两个TextView)
//e.currentTarget.dataset.id一直都是new1（因为注册点击监听事件的组件，是整个外层View，点击View中的任何部位，都会触发View注册的方法)
//不懂的话可以看这个例子https://www.jianshu.com/p/4aac393f8559
const operation=e.currentTarget.dataset.operation;
this.setData({
num:this.data.num+operation
})
}
});wxml文件
<!--1 需要给input标签绑定 input事件
绑定关键字bindinput
2如何获取 输入框的值
通过事件源对象（就是函数的参数就是对象源）来获取
e.detail.value
3把输入框的值赋值到data当中
this.setData({
num:e.detail.value,
})
4需要加入一个点击事件
1bindtap
2无法在小程序当中的事件中直接传参
3通过自定义属性的方式来传递参数
4事件源中获取自定义属性
-->
<input type="text" bindinput="handleInput"/>
<button bindtap="handletap" data-operation="{{1}}">+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>
<view>
{{num}}
</view>6.样式rpx
.wxss文件
/*rpx:可以根据屏幕亮度进行自适应。规定屏幕宽为750rpx。如在iphon6上，屏幕宽度为375px,共有750个物理像素，
则750rpx=750物理像素，1rpx=0.5px=1物理像素
1小程序中，不需要主动来引入样式文件
2需要把页面中某些元素的单位由px改成rpx
1设计稿750px
750px=750rpx
1px=1rpx
2把屏幕宽度改成375px
375px=750rpx
1px=2rpx
1rpx=0.5px
3存在一个设计稿宽度为未知page
1设计稿page存在一个元素 宽度100px（这个100px是设计稿page里面的一个东西的像素）
2拿以上的需求去实现不同的页面适配
page=750rpx
1px=750rpx/page
100px=750rpx*100/page
假设page=375px
*/
view{
/* width:200rpx; */
height:200rpx;
font-size:40rpx;
background: aqua;
/* 以下代码写法是错误 */
/* width：750rpx*100/375 */
/* calc属性要求750和rpx中间不要留空格
运算符的两边也不要留空格 */
width:calc(750rpx*100/375);
}wxml文件
<view> rpx </view>
7样式导入
使用@import语句可以导入外联样式表，只支持相对路径
a.wxss
view{
color: chartreuse;
font-size: 100px;
}b.wxss
只能写相对路径 引入的代码是通过@import来引入 @import "../../styles/common.wxss";
b.wxml
<view> rpx </view>
8使用less
less文件
/*1定义less变量*/
@color:yellow;
text{
color: @color;
}
// 嵌套
view{
.vie1{
text{
color: red;
}
}
}
@import"../../styles/reset.less";
view{
color:@themeColor;
}接下来学习基本的组件
9.text标签
<!--pages/massages/massages.wxml--> <!-- text文本标签 1长按文字复制 selecttable 2对文字内容进行解码 decode 3只能嵌套tetx 4 decode可以解析的有 < > & '     --> <text selectable="true" decode> xiaoxiao dada </text>
10image图片标签
.wxml文件
<!--pages/xiao1/xiao1.wxml--> <!--image 图片标签 1 src指定要加载的图片的路径 图片存在默认的宽度和高度是320*240 ，可以通过“路过图床”把图片变成外网链接就可以了（在小程序上用外网链接） 2mode 决定图片 内容 如何 和 图片标签 宽高做适配 1 scaleToFill 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 2 aspectFit 缩放模式，保持纵横比缩放图片，使图片的 长边 能完全显示出来。也就是说，可以完整地将图片显示出来。 常用 3 widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变 4 bottom等类似的值，不缩放图片，只显示图片的某个区域，类似以前的background-position --> <image mode="left" src="https://s1.ax1x.com/2020/09/24/0SwXBq.jpg" />
wxss文件
/* pages/xiao1/xiao1.wxss */
image{
box-sizing: border-box;
border: 1px solid green;
width: 300px;
height: 500px;
}11.swiper 轮播标签
.wxml文件
<!-- 1 轮播图外层容器 swiper 2 每一个轮播项 swiper-item 3 swiper标签 存在默认样式 1 width 100% 2 height 150px image存在默认宽度和高度320*240 3 swiper 高度无法实现由内容撑开 4先找出来原图的宽度和高度 等比例给swiper定宽度和高度 假如原图的宽度和高度1125*352px swiper宽度/swiper高度=原图的宽度/原图的高度 swiper高度=swiper宽度*原图的高度/原图的宽度 height:100%*352/1123 5 autoplay 是否自动切换 6 interval 修改轮播时间 默认为5秒 7 circular 衔接轮播 8 indicator-dots 是否显示面板指示点 9 indicator-color 指示器的未选择的颜色 10 indicator-active-color 选中的时候指示器的颜色 --> <swiper autoplay interval="3000" circular indicator-dots > <swiper-item ><image mode="widthFix" src="//img.alicdn.com/imgextra/i2/91/O1CN012kQACi1CXifMv0CAU_!!91-0-luban.jpg" /></swiper-item> <swiper-item ><image mode="widthFix" src="//gw.alicdn.com/imgextra/i1/133/O1CN01nuS4LH1CqxIfsIMYY_!!133-0-lubanu.jpg" /></swiper-item> <swiper-item ><image mode="widthFix" src="//img.alicdn.com/imgextra/i3/123/O1CN019Spbkn1CmNL8sVX1N_!!123-0-luban.jpg"/></swiper-item> </swiper>
.wxss
/* pages/xiao2/xiao2.wxss */
switch{
width: 100%;
height: calc(100%*352/1123);
}
image{
width: 100%;
}
微信扫码关注
更新实时通知