微信小程序

本文件已定稿，最后修改时间 20240823 12:47

---

一、wxml组件和wxss适配

1. .wxml —- div

   1. view — div
   2. text文字：可以长按选中
   3. image — img
   4. button
   5. form
   6. input
   7. label

2. .wxss —- .css

   单位：rpx

   布局：弹性盒布局

二、JS数据-列表-条件渲染-事件

1. 数据

   data: {
       str:"这是小程序"
       city: [
           "北京",
           "上海",
           "四川"
       ]
   }

2. 列表渲染

   <view wx:for='{{city}}' wx:key='{{index}}'>
   	{{ item }}
       {{ index }}
   </view>

3. 条件渲染

   <view wx:if='{city.length > 0}'>
   	<text wx:for='{{city}}'>
       	{{ item }}
       </text>
   </view>
   <view wx:else>
   	暂无数据...
   </view>

4. 事件

   bind：不会阻止冒泡

   catch：会阻止冒泡

   <view bindtap='btn'></view>

5. 修改data中的数据

   btn(){
       this.setData({
           str:'我已经修改你了'
       })
   }

三、请求接口和封装url

onLoad: function(){
    // 闭包要改变this指向
    let That = this;
    wx.request({
        url: 'https://ehcto.com/data.json',
        data:{
            key:'123',
            userName:"张三"
        },
        success(res){
            That.setData({
                cityName: res.data.city
            })
        }
    })
}

四、页面跳转-路径传值

<!-- list.html -->
<view>
	这是list页面
    <text wx:for='{{cityList}}'>
    	{{item}}
    </text>
</view>

<!-- list.js -->
Page({
    data: {
        cityList:""
    }
    onLoad: function(option){
    let arr = option.cityList.split(",");
        this.setData({
            cityList: arr
        })
    },
})

<!-- index.html -->
<text bindtap='toLogs'> {{cityName}} </text>

<!-- index.js -->
Page({
    data: {
        cityName:""
    },
    toLogs: function(){
        let That = this;
    	wx.navigateTo({
            url:"../list/list?cityList="+That.data.cityList+",
            
        })
	},
    onLoad: function(){
    	// 闭包要改变this指向
    	let That = this;
    	wx.request({
        	url: 'https://ehcto.com/data.json',
        	data:{
            	key:'123',
            	userName:"张三"
        	},
        	success(res){
            	That.setData({
                	cityName: res.data.city,
                    cityList: res.data.hotList
            	})
        	}
    	})
	}
})

五、template的使用

1. template目录结构

   • pages
     • templates
       • swiper-template
         • swiper-template.wxml
         • swiper-template.wxss
         • swiper-template.js
       • tabs-template

2. template的使用

   <template name='swiper'></template>

3. 页面引入

   wxml：

   <import src='' />
   <template is='swiper' data='{{数据1, 数据2...}}'></template>

   wxss:

   @import '/pages/templates/swiper-template/swiper-tempalte.wxss';