1949啦网--小小

由于小组需求，现在转为学小程序，先把安卓放一放

1. 全局配置

   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可以解析的有 &nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp;
-->

<text  selectable="true" decode>
    xiaoxiao &nbsp; 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%;
}

微信扫码关注

更新实时通知