一、wxml文檔

<!-- index.wxml -->
<view>
    <!-- 數(shù)據(jù)綁定 -->
    <view>
        <text>{{name}}</text>
        <text>{{ages}}</text>
    </view>
    <!-- 列表渲染 -->
    <view wx:for="{{user}}">
        <text>{{item['name']}}-{{item['ages']}}</text>
    </view>
    <!-- 條件渲染 -->
    <view wx:if="{{name == 'lockdatav'}}">
        <text>{{name}}</text>
    </view>
    <view wx:else>
        <text>Poleung</text>
    </view>
</view>

Page({
    data: {
        name: "lockdatav",
        ages: "23",
        arrData: [1, 2, 3, 4, 6],
        user: [{
            name: '001',
            ages: 23
        }, {
            name: '002',
            ages: 25
        }]
    }
})

wx:for
在組件上使用 wx:for 控制屬性綁定一個數(shù)組，即可使用數(shù)組中各項的數(shù)據(jù)重復(fù)渲染該組件。
默認(rèn)數(shù)組的當(dāng)前項的下標(biāo)變量名默認(rèn)為 index，數(shù)組當(dāng)前項的變量名默認(rèn)為 item

使用 wx:for-item 可以指定數(shù)組當(dāng)前元素的變量名，
使用 wx:for-index 可以指定數(shù)組當(dāng)前下標(biāo)的變量名：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

二、新建頁面快捷方式

在app.json中，pages的默認(rèn)為項目頁面，第一個是默認(rèn)的訪問首頁；在實際開發(fā)中，可以直接創(chuàng)建 "pages/btn/btn",保存，將自動創(chuàng)建對應(yīng)的組件目錄。

三、微信小程序引入weui

• weui組件庫效果：https://weui.io/
• 下載weui：進(jìn)入GitHub https://github.com/weui/weui-wxss/ 進(jìn)入下載頁面，點擊下載按鈕。
• 復(fù)制weui-wxss-master\dist\style\weui.wxss至項目根目錄
  
• 在app.wxss中引入@import 'weui.wxss';
• 實時查看weui源碼：打開“微信開發(fā)者工具”，選擇“小程序” > “導(dǎo)入項目” > 名稱，目錄選擇dist文件夾，填寫AppID。 點擊“導(dǎo)入”按鈕，開始導(dǎo)入即可

四、雙向數(shù)據(jù)綁定

微信小程序提交表單多個input輸入框，通過一個bindinput方法實現(xiàn)雙向數(shù)據(jù)綁定。

1.wxml渲染層

<view class="page-body">
    <view class="page-section">
        <view class="weui-cells__title">品名</view>
        <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell weui-cell_input">
                <input class="content" value="{{baseInfo.goodsName}}" bindinput="bindKeyInput" data-params="goodsName"></input>
            </view>
        </view>
    </view>
    <view class="page-section">
        <view class="weui-cells__title">規(guī)格</view>
        <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell weui-cell_input">
                <input class="weui-input" value="{{baseInfo.spec}}" bindinput="bindKeyInput" data-params="spec"></input>
            </view>
        </view>
    </view>
</view>
<view class="weui-cells__title" wx:if="{{baseInfo.goodsName != null}}">當(dāng)前了錄入信息：{{baseInfo.goodsName}} - {{baseInfo.spec}}
</view>

2.js邏輯層

在bindinput方法里通過e.currentTarget.dataset.params可字段鍵名，通過e.detail.value獲取字段值。

    data: {
        baseInfo: {}
    },
    bindKeyInput(e) {
        this.data.baseInfo[`${e.currentTarget.dataset.params}`] = e.detail.value
        this.setData({
            baseInfo: this.data.baseInfo
        })
        //console.log(`baseInfo對象：`, this.data.baseInfo)
    },

提交表單到后端

• post和get提交方式的區(qū)別

public function putUsers()
       {
        global $db, $res;
        dbc();
        @$user_title = $_POST['user_title'];
        @$user_name = $_POST['user_name'];
        @$user_phone = $_POST['user_phone'];
        @$user_time = time();
        if ($user_title == "" || $user_name == "" || $user_phone == "") {
            $res['code'] = 1;
            $res["msg"] = '非法訪問參數(shù)';
            die(json_encode_lockdata($res));
        }
        $sql = " INSERT INTO " . $db->table('user') . " (user_name,user_phone,user_title,user_time) VALUES ('" . $user_name . "','" . $user_phone . "','" . $user_title . "','" . $user_time . "')";
        $db->query($sql);
        $res['code'] = 0;
        $res["msg"] = 'OK';
        die(json_encode_lockdata($res));
    }

五、微信小程序跳轉(zhuǎn)到H5

<web-view src="https://test.com"></web-view>

@漏刻有時文章來源地址http://www.zghlxwxcb.cn/news/detail-430631.html

到了這里，關(guān)于微信小程序?qū)W習(xí)實錄1(wxml文檔、引入weui、雙向數(shù)據(jù)綁定、提交表單到后端)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！