前端筆記之微信小程式（二）{{}}插值和MVVM模式&數據雙向綁定&指令&API

来源:https://www.cnblogs.com/rope/archive/2019/08/07/10750322.html
-Advertisement-
Play Games

一、雙花括弧{{}}插值和MVVM模式 1.1 體會{{}}插值 index.wxml的標簽不是html的那些標簽，這裡的view就是div。 {{}}這樣的插值寫法，叫做mustache語法。mustache是鬍子的意思，因為{{}}像鬍子。 要在同名js文件下的data屬性中定義： 所有的框架： ...


一、雙花括弧{{}}插值和MVVM模式

1.1 體會{{}}插值

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>

1.2 體會MVVM模式

<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模式的，只需要關心數據，不需要關心視圖，視圖會自動變化。

二、數據雙向綁定

2.1 調色板

先說一個知識點，用戶的屏幕是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}})"></view>
<slider value="{{r}}" bindchanging="changeColor" data-ys="r" max="255" show-value block-size="18"/>
<slider value="{{g}}" bindchanging="changeColor" data-ys="g" max="255" show-value block-size="18"/>
<slider value="{{b}}" bindchanging="changeColor" data-ys="b" max="255" show-value block-size="18"/>
</view>

 

index.js 事件處理函數：

Page({
    data : {
        r : 100,
        g : 200,
        b : 123
    },
    changeColor(event){
        this.setData({
            [event.target.dataset.ys] : event.detail.value
        })
    }
});

event.target.dataset.ys就是當前觸發這個函數的組件身上的ys標識。

event.detail.value就是當前觸發這個函數的組件的值。

 

也就是說，微信小程式的事件處理函數，一律不能傳參！

<button bindtap="add(5)"></button>

只能是：

<button bindtap="add" data-n="5"></button>

2.2 微博發佈框

class的動態實現：{{}}中不能出現複雜語句，比如不能有for、if、while、var，最複雜就是三元了。

<view class="container">
    <textarea value="{{content}}" bindinput="inputHandler" placeholder="預設" auto-focus />
    <view class="{{content.length > 40 ? 'danger' : ''}}">當前：{{content.length}}字/40字</view>
    
<view class="row">
        <button disabled="{{content.length == 0 || content.length > 40}}">發佈</button>
        <button bindtap="clear" disabled="{{content.length == 0}}">清空</button>
    </view>
</view>

index.js

Page({
    data : {
        content : ""
    },
    //當用戶輸入文本的時候
    inputHandler(event){
        this.setData({
            content : event.detail.value
        });
    },
    //清空
    clear(){
        this.setData({ content: "" });
    }
});
示例代碼

index.wxss

.danger{color:red;font-weight: bold;}
.row{display: flex;}

三、指令

3.1 wx:if指令

判定一個元素是否上樹，而不是是否顯示。

<view class="container">
    <button wx:if="{{isAgree}}">註冊</button>
</view>

 

當這個變數是true按鈕上樹，否則下樹。

 

3.2 wx:for迴圈指令

命令一個標簽進行迴圈，使用wx:for。

 

index.js數據：

Page({
    data : {
        arr: ["白板","么雞","二萬","三餅","四條"]
    }
});

 

index.wxml：

<view class="container">
    <view wx:for="{{arr}}" wx:key="{{index}}">{{index}} - {{item}}</view>
</view>

 wx:for的值必須是數組，不能是對象，此時會自動遍歷這個數組。

 wx:for必須添加wx:key，表示迴圈這一項的標識，這個標識有什麼用？連上伺服器就有用了。增加效率

 {{index}}、{{item}}是迴圈結構天生就有的，表示下標和項。

3.2.1 九九乘法表

因為空間太小，做五五乘法表：

<view class="row" wx:for="{{[1,2,3,4,5]}}" wx:key="{{index}}" wx:for-item="a">
    <view class="col" wx:for="{{[1,2,3,4,5]}}" wx:key="{{index}}" wx:for-item="b">
        {{a}} * {{b}} = {{a * b}}
    </view>
</view>

index.wxss

.row{ width:750rpx;display: flex;}
.col{ flex:1; text-align: center; font-size: 12px;border:1px solid #3bb; }

3.2.2迴圈信息流

index.wxml

<view class="container">
    <view class="mingxing">
        <view class="box" wx:for="{{mingxing}}" wx:key="{{index}}">
            <view class="left">
                <image src="{{item.picurl}}"></image>
                {{item.name}}
            </view>
            <view class="right">
                {{item.info}}
            </view>
        </view>
    </view>
</view>

index.wxss

.box{
    width:720rpx;display: flex; border:1px solid #3bb; margin:10px auto;font-size: 13px;
    line-height: 24px; color:#333;padding:10px; box-sizing: border-box;
}
.left{flex:1;}
.left image{width:180rpx; height:180rpx;}
.right{flex:3; box-sizing: border-box;padding-left:10px;}
示例代碼

index.js

Page({
data : {
        mingxing : [
            {
                "name": "Angelababy",
                "info": "Angelababy（楊穎），1989年2月28日出生於上海市",
                "picurl": "/images/baby.png"
            },
            {
                "name": "迪麗熱巴",
                "info": "迪麗熱巴（Dilraba），1992年6月3日出生於新疆烏魯木齊市",
                "picurl": "/images/dilireba.png"
            }
        ]
    }
});
示例代碼

3.2.3覆選框-迴圈數組

<view class="container">
    你的愛好:
    <checkbox-group bindchange="checkboxChange">
        <label wx:for="{{hobbys}}" wx:key="{{index}}">
            <checkbox value="{{item}}" checked="{{false}}"/>
            {{item}}
        </label>
    </checkbox-group>

    <view>
        你的愛好是：{{myhobbys}}
    </view>
</view>
Page({
     data : {
        hobbys : ["籃球" ,"足球","羽毛球"],
        myhobbys : []
    },
    checkboxChange(event){
        this.setData({
            myhobbys: event.detail.value
        });
    }
});
示例代碼

3.2.4操作數組-增刪改查

<view class="container">
    <input placeholder="請填寫學生名字" auto-focus bindinput="inputHandler"/>
    <button bindtap="addstudent">增加</button>

    <view wx:for="{{student}}" wx:key="{{item.id}}" style="display:flex;">
        <view>{{item.name}}</view>
        <button data-id="{{item.id}}" bindtap="delstudent">刪除</button>
    </view>
</view>
Page({
    data : {
        student : [
            {"id": 1, "name": "小明"},
            {"id": 2, "name": "小紅"},
            {"id": 3, "name": "小剛"}
        ],
        //將來被添加的學生名字
        needAddStudentName : ""
    },
    delstudent(event){
        const id = event.target.dataset.id;
        this.setData({
            student: this.data.student.filter(item => item.id != id)
        });
    },
    inputHandler(event){
        this.setData({
            needAddStudentName : event.detail.value
        });
    },
    addstudent(){
        const name = this.data.needAddStudentName;
        this.setData({
            student: [
                ...this.data.student,
                {id : ~~(Math.random() * 100), name }
            ]
        });
    }
});
示例代碼

四、小程式API

4.1認識小程式的API

微信提供了非常多的API，可以方便的調起微信提供的能力，如獲取用戶信息，本地存儲，支付功能等。原理就是將JavaScript翻譯為Java、OC語言。

 

4.2使用請求數據的API

微信小程式，功能變數名稱只支持 https (request、uploadFile、downloadFile) 和 wss (connectSocket) 協議；

s是security安全的意思。微信小程式，只能用安全模式的https和wss協議。

 https就是http的安全版本，用來提供JSON數據等等；

 wss是websocket的安全版本，用來實時通信的。

 

功能變數名稱不能使用 IP 地址或 localhost，且不能帶埠號，而且功能變數名稱必須經過 ICP 備案；

對初學者不友好的，想跑一個上線的小程式，還得在服務上花一些錢。但是，在開發時，可以禁止上面的要求。

 

後端app.js提供介面

const express = require("express");
const app = express();

var a = 10;
app.get("/api", (req,res)=>{
    res.json({a})
})

app.get("/jia", (req,res)=>{
    a++;
    res.json({})
})

app.listen(3000);
示例代碼 
<!--index.wxml-->
<view class="container">
    <view>{{a}}</view>
    <button bindtap="add">按我加伺服器的數據</button>
    <button bindtap="refresh">請求伺服器上最新數據</button>
</view>
wxml示例代碼

 

小程會自動幫我們跨域，跨域的原理是代理跨域。

const baseURL = "http://127.0.0.1:3000"

//請求伺服器的數據
//出了page()函數外，this是window
const requireServer = function(){
    var self = this;
    wx.request({
        url: `${baseURL}/api`,
        success: function ({ data }) {
            self.setData({
                a: data.a
            });
        }
    });
}

Page({
    data : {
        a : 0
},
//頁面顯示/切入前臺時觸發
onShow(){ 
    //給函數綁定當前位置的this指向
        requireServer.call(this);
    },
    add(){
        wx.request({
            url: `${baseURL}/jia`
        });
    },
    refresh(){
        requireServer.call(this);
    }
});
示例代碼

4.3模擬網路切換和監控

在模擬器里切換網路類型，查看控制台的輸出內容

 

 

在調試器里，輸入以下代碼並按回車鍵，進行網路監聽：

wx.onNetworkStatusChange(function(res) {
    console.log('網路連接：' + res.isConnected); 
    console.log('網路狀態：' + res.networkType);
});
示例代碼

4.4生命周期

 

4.5小程式編譯及編譯模式

 

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Android buildType混淆代碼
    【話題引入】 ①在Android開發完成，我們會將代碼打包成APK文件。選擇 菜單欄 Build --》 Build APK ②將查看視圖切換到 Project 模式，文件夾下有一個debug模式的文件。 🌂在實際開發發佈我們要發佈一個正式的版本，即 release 模式。 【進入正題】 程式在發 ...
  • Android View的background和padding
    版權聲明：本文為xing_star原創文章，轉載請註明出處！ 本文同步自http://javaexception.com/archives/181 最近在做一個需求，是對im聊天消息設置氣泡背景，之前呢，設計師沒有特別遵循一定的設計規範，導致，氣泡背景有的是.9的圖片，有的是自己用xml畫出來的背景 ...
  • Flutter學習筆記（14）--StatefulWidget簡單使用
    今天上班沒那麼忙，突然想起來我好像沒StatefulWidget（有狀態組件）的demo，閑來無事，寫一個簡單的學習學習，前面我們有說過，Flutter不同於Android。Flutter是只繪製一幀，這一幀會繪製整個widget樹，也就是說一次繪製整個界面，那麼想一下，如果想要頁面內容發生變化，是... ...
  • DexOpt相關的異常
    查找的資料 dvm探討之odex繞過 DexClassLoader4.4.2動態載入分析（磁碟載入分析） Unable to extract+optimize DEX from '/system/app/AWCarInfo.apk'不能從 '/system/app/AWCarInfo.apk'中提取 ...
  • javascript實現blob加密視頻源地址
    一、HTML代碼： 二、JavaScript代碼： 三、效果圖如下： ...
  • 前端筆記之微信小程式（三）GET請求案例&文件上傳和相冊API&配置https
    一、信息流小程式-GET請求案例 1.1服務端介面開發 一定要養成介面的意識，前端單打獨鬥出不來任何效果，必須有介面配合，寫一個帶有分頁、關鍵詞查詢的介面： 分頁介面：http://127.0.0.1:3000/info?page=1 查詢介面：http://127.0.0.1:3000/searc ...
  • 玫瑰花小製作分享-JavaScript（七夕專屬浪漫）
    分享一個玫瑰花的製作小方法，用小小的代碼給自己的她送上一個不一樣的玫瑰花。 ...
  • Cesium區分單擊【LEFT_CLICK】和雙擊事件【LEFT_DOUBLE_CLICK】
    在cesium中，用戶滑鼠左鍵雙擊視圖或Entity時，實際觸發的是兩次click和一次dbclick事件，非常影響代碼設計，本文記錄瞭如何區分單擊【LEFT_CLICK】和雙擊事件【LEFT_DOUBLE_CLICK】的代碼及原理方法。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類