03小程序

南工大第一帅哥
54 阅读4分钟

小程序的样式写法

页面样式的3种写法：行内样式、页面样式、全局样式；

这三种样式都可以作用于页面的组件：优先级依次为：行内样式 > 页面样式 > 全局样式

  • 全局样式：写在app.wxss中；
  • 页面样式：写在该页面的.wxss中；
  • 行内样式：<view style="color:blue">inlineStyle</view>

image.png

image.png

wxss自适应单位

image.png

仅在IPhone6中：1rpx=0.5px=1像素，也就是：750rpx=375px=750像素，通过以IPhone6为视觉稿标准，在其他手机上就会自适应大小了；

wxml语法

  • WXML的基本格式类似于HTMLdiamante：比如可以写成单标签，也可以写成双标签；
  • 必须有严格的闭合，没有闭合会导致编译错误；
  • 大小写敏感，class和Class是不同的属性；

Mustache语法

开发中，界面上展示的数据不是写死的，而是会根据服务器返回的数据，或者用户的操作来进行改变的

image.png

wx:if、wx:elif、wx:else语法

image.png

hidden属性

  • hidden属性是所有的组件都【默认】拥有的属性；
  • 当hidden属性为true，组件会被隐藏；
  • 当hidden属性为false，组件会被显示；

<view hidden="{{false}}">哈哈</view>

hidden和wx:if的区别：

  • hidden控制隐藏和显示，是控制是否添加hidden属性；
  • wx:if是控制组件是否渲染的；
<button bindtap="onChangeTap">切换</button>

<view hidden="{{isHidden}}">哈哈哈哈</view>
<view wx:if="{{isHidden}}">哈哈哈哈</view>

Page({
    data:{
        isHidden:false
    },
    onChangeTap(){
        this.setData({
            isHidden:!this.data.isHidden
        })
    }
})

wx:for

image.png

  • 默认情况下，遍历后在wxml中可以使用一个变量index，保存的是当前遍历数据的下标值；
  • 数组中对应某项的数据，使用变量名item获取；
Page({
    books:[
        {id:..,name:'',price:},
        {id:..,name:'',price:},
        {id:..,name:'',price:}
    ]
})

<view class="books">
    <view wx:for="{{books}}" wx:key="*this/id">
    //默认遍历出来的每个元素，给我们生成了，就是item以及索引index
        {{item}}--{{index}}
    </view>
</view>
  • *this：item的本身，对象类型的item的话会被转换为字符串；
  • id：如果直接写id，会直接从item中找到id属性，直接作为key，微信小程序规定的！

支持遍历数字：

//直接跟上一个数字
<view wx:for="{{10}}" wx:key="*this">
    {{item}}
</view>

遍历出0-9；

支持遍历字符串：

//直接跟上一个数字
<view wx:for="coderwhyabc" wx:key="*this">
    {{item}}
</view>

遍历出每一个字符；

如果遍历出字符串，说明你没有加上{{}}语法，如果只是单纯遍历字符串，就不需要{{}}

block标签

image.png

细节补充

image.png

  • 通过wx:for-item="xxx"对item进行重命名;
  • 通过wx:for-index="xxx"对index进行重命名；
<block wx:for="{{books}}" wx:key="id" wx:for-item="book" wx:for-index="i">
    <view>{{book.name}}---{{i}}</view>
</block>

key的作用

image.png

WXS

image.png

WXS就是：wxScript，和ES5更像一点，所以很多ES6语法并不能在wxScript中书写；

WXML中是不能直接调用Page和Component中定义的函数，很繁琐，那么这个时候就需要使用WXC了

WXS的两种写法

方式1：通过<wxs>标签，并且里面需要书写纯JS代码（只能是ES5），声明模块名并导出（CommonJS）出去；

//index.wxml
方式1：标签
<wxs module="format">
    编写js代码：只能写ES5，比如箭头函数、const不可以
    function formatPrice(price){
        return "￥"+price
    }
    
    //外面想要使用的话，需要导出，才能被调用，并且必须使用CommonJS导出
    module.exports = {
        formatPrice:formatPrice
    }
</wxs>

<block wx:for="{{books}}" wx:key="id">
    <view>name:{{item.name}}--formatPrice{{format.formatPrice(item.price)}}
</block>

//index.js
Page({
    data:{
        books:[
            {id:..,name:'',price:},
            {id:..,name:'',price:},
            {id:..,name:'',price:}
        ]
    },
    formatPrice(){
        //在js文件中书写方法，是不能被使用的！！！
    }
})

第二种方式：由于一个页面中可能存在多个wxs标签，所以我们一般将wxs写在一个单独的文件中：xxx.wxs，并通过CommonJS的方式导出，然后引入；

//导出的模块
function formatPrice(price){
    return "￥"+price
}

//外面想要使用的话，需要导出，才能被调用，并且必须使用CommonJS导出
module.exports = {
    formatPrice:formatPrice
}

//页面引入
<wxs module="format" src="/xxx/xxx/xxx"></wxs>

代码：
<view class="books">
...
</view>

image.png

image.png

image.png

事件的监听

image.png

微信中的点击事件：`onBtnTap，还有一个从长按触发事件“”

//通过bindtap绑定事件
<button bindtap="onBtnTap"
>按钮</button>

//.js
Page({
    //绑定事件监听函数，而且传过来了一个event对象
    onBtnTap(event){
        console.log(event);
    }
})

image.png

事件对象event

image.png

  • target：触发事件的元素
  • currentTarget：处理事件的元素
<view class=".outer" bindtap="onOuterViewTap">

</view>

---------------------------------------

.outer{
    
}

---------------------------------------

Page({
    onOuterViewTap(event){
        console.log(event.target)
        console.log(event.currentTarget)
    }
})

此时event.target和event.currentTarget表示的是相同的（虽然表示的对象不同），因为触发事件和处理事件的是同一个元素：<view>

自定义属性：data-*

<view class=".outer" bindtap="onOuterViewTap" data-name="why">
    <view class="inner"></view>
</view>

Page({
    onOuterViewTap(event){
        console.log(event.target)
        console.log(event.currentTarget)
        
        //获取自定义属性name
        const event = event.currentTarget.dataset.name
    }
})

触发事件的组件：inner，但是处理事件的组件是outer，因为会冒泡；

并且如果想拿到自定义属性，最好通过currentTarget.dataset.xxx的来拿，而不是从target；

event对象的touches（了解）

image.png

事件参数的传递


<view
    bindtap="onArgumentTap"
    data-name="abc"
    data-age="18"
    data-height="1.88"
>

</view>

---------------------------------------

Page({
    onArgumentsTap(event){
        通过event可以拿到传递过来的自定义数据，这里是可以ES6解构的
        const {name,age} = event.currentTarget.dataset
    }
})

tabControl案例

index.js

Page({
    data:{
        titles:['手机','电脑','相机'],
        currentIndex:0
    },
    onItemTap(event){
        const index = event.currentTarget.dataset.index
        this.setData({currentIndex:index})
    }
})

-----------------------------------------

index.wxml

<view class="tab-control">
    //传递索引
    <block wx:for="{{titles}}" wx:key="*this">
        //动态添加class，只能通过Mustach语法
        <view 
            class="item {{index===currentIndex?'active':''}}"
            bindtap="onItemTap"
            data-index="{{index}}"
        >{{item}}</view>
    </block>
</view>

-----------------------------------------

index.wxss

.tab-control{
    display:flex;
    height:40px;
    line-hgith:40px;
    text-align:center;
}
.tab-control item{
    flex:1
}

.tab-control item.active{
    border-bottom:#ff8189
}

通过mark传递数据

将bind替换为catch，阻止事件进一步传递（了解）

capture-bind:tap="onView1Capture"
capture-catch:tap="onView2Catch"

给逻辑传递数据，另外一种方式（如果data-*实在用不了，再用mark）

<view mark:age="30" mark:name="kobe">
mark
</view>

onMarkTap(event){
    const data = event.mark
    console.log(data)
}
avatar
文章
阅读
粉丝