[小程序]微信小程序基础学习

微信小程序基础学习

1.配置

1.1全局配置–app.json

1.1.1pages字段

• 

1.1.2window字段

定义所有页面顶部背景颜色和文字颜色等

• 

1.1.3tabBar字段

• 

1.2页面配置–page.json

• 在特定页面更改配置/添加自定义组件

1.3sitemap.json

2.js/wxml交互

2.1 数据绑定

在wxml中添加 {{}} ，可以通过变量名绑定.js文件data中的数据/运算表达式

2.1.1data变量绑定

2.1.2运算结果绑定

2.1.3列表渲染

    data: {
        people:[
            {
                id:1,
                name:"David",
                age:18
            },{
                id:2,
                name:"Sam",
                age:10
            },{
                id:3,
                name:"Jane",
                age:22
            },{
                id:4,
                name:"Kelly",
                age:15
            }
        ]
    },

<!-- 
	wx:for="{{数组/对象}}"	wx:for-item数组/对象当前元素（通过属性调用对应值）	wx:for-index数组/对象当前元素的索引
	wx:key列表项目的唯一标识符（对象的唯一标识键/*this）
-->
<view>
    <view 
    wx:for="{{people}}"
    wx:for-item="person"
    wx:for-index="index"
    wx:key="id">
    {{index+1}}:名字：{{person.name}}，年龄：{{person.age}}
    </view>
</view>

• 效果

  

• 标签实现占位

2.1.4条件渲染

<view wx:if="{{true}}">展示1</view>
<view wx:if="{{false}}">隐藏1</view>
<view hidden="{{false}}">展示2</view>
<view hidden="{{true}}">隐藏2</view>

2.2事件绑定

1. wxml中的标签 绑定 js中的函数：

   • wxml中添加属性 格式为 bind<事件>=“<函数>” (如：bndinput/bindtap 是封装好的 既定的)
   • js中添加函数 <函数>(e){}

2. js中的函数与 绑定 wxml中的标签

   • js函数通过事件源对象e获取wxml标签中的属性 需要借助 console.log(e) 查明需要的是e的哪个值

     <input bindinput="handleInput" />
     
         handleInput(e){
             console.log(e.detail.value)
         },
     

     效果

     

   • <!--添加自定义属性实现传参 -->
     <input bindinput="handleInput" />
     <button bindtap="handleCal" data-operation="1">+</button>
     <button bindtap="handleCal" data-operation="-1">-</button>
     
         handleCal(e){
            console.log(e)
         },
     

     效果

   • js获取wxml标签属性后 赋值给js中data

     //标准格式
     this.setData({<data中的对象>:<e获取的值>})
     
     //示例 承接上一个例子
     <input bindinput="handleInput" />
     <view>{{num}}</view>
     <button bindtap="handleCal" data-operation="1">+</button>
     <button bindtap="handleCal" data-operation="-1">-</button>
     
     /*在函数中，this 指的是全局对象。*/
         handleInput(e){
             this.setData({
                 num:parseInt(e.detail.value)
             })
         },
     
         handleCal(e){
             const operation=e.currentTarget.dataset.operation;
             this.setData({
                 num:this.data.num += operation
             })
         },
     

3.wxss样式

3.1相对像素rpx

• 默认任何屏幕总像素 n px = 750 rpx
• 因此任何屏幕 1 px = 750/n rpx

3.2样式导入

• 可以新建与pages同级文件夹style新建.wxss文件
• 通过@import <相对路径>在每个页面的.wxss导入style中的.wxss

4.组件

4.1基本标签

• = 视图容器，包含一些规定样式的属性

• 文本标签

  • selectable属性：长按可复制

  • decode属性：对空格/回车解码

  • <text selectable decode>123 &nbsp 456</text>
    

• 图片标签

  • 小程序大小不超过~MB，因此插入图片最好非本地而是挂url

  • 默认宽高 320px*240px，可通过mode属性调节加载方式

  • <image mode='' lazy-load>
    

4.2轮播图组件

轮播图标签：

轮播图项目标签：

4.2.1轮播图等比例调整样式

• 默认宽度100% 高度150px

• 先找出原图的宽度*高度 由此换算轮播图高度

  • 

• swiper{
  	width:100%;
  	height:calc(100vw*352/1125);
  }
  image{
  	width:100%;
  }
  
  <swiper>
  	<swiper-item><image mode="widthFix" src="" /></swper-item>
  </swiper>
  

4.2.2轮播图基本属性

属性	类型	默认值	必填	说明
indicator-dots	boolean	false	否	是否显示面板指示点
indicator-color	color	rgba(0, 0, 0, .3)	否	指示点颜色
indicator-active-color	color	#000000	否	当前选中的指示点颜色
autoplay	boolean	false	否	是否自动切换
interval	number	5000	否	自动切换时间间隔
duration	number	500	否	滑动动画时长
circular	boolean	false	否	是否采用衔接滑动
vertical	boolean	false	否	滑动方向是否为纵向

4.3导航组件

导航标签（类似超链接）：

4.4自定义组件