前端笔记之微信小程序（二）{{}}插值和MVVM模式&数据双向绑定&指令&API

最新推荐文章于 2024-08-17 18:48:55 发布

weixin_30699955

最新推荐文章于 2024-08-17 18:48:55 发布

阅读量908

点赞数 1

文章标签：前端 json javascript ViewUI

原文链接：http://www.cnblogs.com/rope/p/10750322.html

版权

本文详细介绍了微信小程序中{{}}插值和MVVM模式的运用，包括数据双向绑定的实现，如调色板和微博发布框的案例。还探讨了wx:if和wx:for循环指令的使用，以及小程序API的应用，如网络请求和生命周期管理。通过实例展示了如何在小程序中进行动态数据操作和页面交互。

摘要由CSDN通过智能技术生成

一、双花括号{ {}}插值和MVVM模式

index.wxml的标签不是html的那些标签，这里的view就是div。

{ {}}这样的插值写法，叫做mustache语法。mustache是胡子的意思，因为{ {}}像胡子。

<view class="container">
<view class="title">
    我是首页 {
     {1 + 1}}
        {
     {a}}年！
    </view>
</view>

要在同名js文件下的data属性中定义：

Page({
    data : {
        a : 100
    }
});

所有的框架：Angular、React、Vue、ReactNative、小程序都是这样的“强耦合”的。

之前我们js操作html使用：document.getElementById()这样的“不耦合”的方式，但是反而编程麻烦。

不仅仅{ {}}可以出现在文字的部分，还可以出现在属性值的双引号中：

 <view class="box" style="width:{
     {a}}px;height:{
     {a}}px">我是盒子</view>

<button bindtap='add'>按我</button>

监听直接写在标签上，bindtap表示绑定轻触事件。

注意，是bindtap="add"而不是：bindtap="add()"

'add'是一个函数，要定义在js文件中。

注意：改变数据不能直接改，如果这样写，a的确会变化，但是视图不会跟着变化！

Page({
    data : {
        a : 100
    },
    add(){
        this.data.a++;
    }
});

必须使用this.setData()函数来改变data值，此时视图才能变化。

Page({
    data : {
        a : 100
    },
    add(){
        this.setData({
            a : this.data.a + 1
        });
    }
});

数据变化了，视图会自动改变

我们学习的所有框架都是MVVM模式的，只需要关心数据，不需要关心视图，视图会自动变化。

先说一个知识点，用户的屏幕是750rpx。所以如果盒子750rpx宽度，一定撑满的，375rpx就是半屏。

slider组件：

index.wxss

.box{
    
    width:350rpx;
    height:350rpx;
    margin:10px auto;
}

示例代码

index.wxml：style行内样式的插值，实现双向数据绑定，就是data中的数据能够成为组件的默认数据。

添加一个bindchanging事件，这个事件从手册上查的。添加一个自定义属性，叫做data-ys来区分谁是谁。

注意，自定义属性必须以data-开头

<view class="container">
<view class="box" style="background-color:rgb({
     {r}},{
    {g}},{
    {b}})"

关注