小程序学习笔记-----更新中
由于小组需求，现在转为学小程序，先把安卓放一放
全局配置
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%; }微信扫码关注
更新实时通知