微信小程式前端開發實現雙向資料繫結

2021-09-28 07:00:05 字數 1548 閱讀 3723

現在公司有乙個要求要實現這樣的乙個功能:

先來看html**:

js**:

html**:

客戶資訊

新增客戶

[刪除]

客戶姓名

手機號碼

證件號碼

js**:

page({

data: {

customerdata:[{

name:'李某某',

phone:'15975648767',

idnum:'440982345610103217',

disabled:false

addcustom:function(){

this.setdata({

customerdata: this.data.customerdata.concat({

del:true,

inputedit:function(e){

let dataset = e.currenttarget.dataset;

let value = e.detail.value;

this.data.customerdata[dataset.idx][dataset.obj] = value;

this.setdata({

customerdata: this.data.customerdata

delcustom:function(e){

let index = e.currenttarget.dataset.idx;

let data = this.data.customerdata

data.splice(index,1)

this.setdata({

customerdata: data

/* 客戶資訊 */

.weui-form-preview__hd{

background:#f7f8fc;

padding:10px 16px;

.weui-form-preview__label{

font-size: 18px;

font-weight: bold;

color:#2f3943;

.weui-form-preview__value_in-hd{

font-size: 12px;

color:#3d7efe;

.weui-form-preview__value{

text-align: left;

font-weight: bold;

font-size: 15px;

color:#2f3943

.weui-form-preview__hd:after{

border:none;

.weui-form-preview:after {

border-bottom:none;

.weui-input{

微信小程式 雙向資料繫結

舉個例子class weui cell weui cell input class weui cell hd class weui label space ensp 接 待 人text view view class weui cell bd class weui input name manage...

微信小程式 卡券開發(前端)

因為我只負責了前端。所以下面主要是前端的工作。點選首頁的某處按鈕,點選後,呼叫wx.opencard 介面,開啟已領取的卡券列表頁。如果點選了返回,沒有點選 領取到卡包 此時是沒有領取成功的。3 開發流程 後續補充 1 獲取openid。領取卡券的前端處理 if wx.addcard else 呼叫...

微信小程式開發

一 開發準備 二 開發工具的使用 編碼目錄結構 1 wxml的功能 資料繫結 資料繫結使用 mustache 語法 雙大括號 將變數包起來。列表渲染 wx for 在元件上使用 wx for 控制屬性繫結乙個陣列,即可使用陣列中各項的資料重複渲染該元件。block wx for 類似 block w...