欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

小程序:封装双向数据绑定

程序员文章站 2022-03-21 08:04:14
适合项目表单比较少的微信开发者工具没有像vue上的v-model直接使用的双向数据绑定功能,所以要利用小程序 的 bindinput=“inputgetName” 取实现,下面附上代码:在xxx.wxml文件中在xxx.js文件中data: { phone: null },userPhoneInput: function(e) { thi...

适合项目表单比较少的

微信开发者工具没有像vue上的v-model直接使用的双向数据绑定功能,所以要利用小程序 的 bindinput=“inputgetName” 取实现,下面附上代码:
  1. 在xxx.wxml文件中
<input bindinput="userPhoneInput" placeholder="请输入您的手机号" />
  1. 在xxx.js文件中
data: {
    phone: null
  },
userPhoneInput: function(e) {
    this.setData({
      phone: e.detail.value
    })
  },
  1. 这样 this.data.phone就可以像在vue中this.phone一样去使用了,完整代码如下:
    login.wxml:
    小程序:封装双向数据绑定
    login.js:
    小程序:封装双向数据绑定

封装全局使用,适合表单项较多的项目

首先我们把绑定逻辑抽出来单独放到一个js文件中,在那个页面使用就在那哪个页面引入,不用像上面手机号,验证码,要写两个,碰到表单有n项的就要写n个bindinput的函数
  1. 首先在建一个wx-model.js文件,这个我放到了utils文件里面:
    小程序:封装双向数据绑定
  2. 在 login.js里面引入
    小程序:封装双向数据绑定
  3. 在login.wxml里面使用
    小程序:封装双向数据绑定
  4. 附上所有代码
// wx-model.js

module.exports = {

  inputgetName(e) {
    let name = e.currentTarget.dataset.name;
    var value = e.detail
    this.setData({
      [name]: value
    })
  }

}
//  login.wxml

<!--pages/com/login/login.wxml-->
<view class="loginIndex">
	<image class="logo" src="../../../static/images/x_logo.png"></image>
	<view class="form">
		<van-field bindinput="inputgetName" data-name='email' left-icon="envelop-o" placeholder="{{L.email}}" />
		<van-field bindinput="inputgetName" data-name='password' left-icon="bag-o" placeholder="{{L.pwd}}" right-icon="{{eye}}" type="{{pwdtype}}" bind:click-icon='changeEye' />
	</view>
	<view class="login button" bindtap="loginEmail">{{L.login}}</view>
	<view class="bottom">
		<image class="wx" bindtap="loginwx" src="../../../static/images/weixin.png"></image>
		<view class="tip fosi28 col2">
			<text class="col1">{{L.tip1}}</text>
			<text>{{L.tip2}}</text>
			<text>{{L.tip3}}</text>
		</view>
	</view>
</view>
// login.js

// pages/my/my/my.js
import http from '../../../utils/api'
let api = http.login
import LangUtils from '../../../utils/i18n'
let langSrc = LangUtils.getLangSrc()
var commonMixin = require('../../../utils/wx-model')
Page(Object.assign({
  /*** 页面的初始数据*/
  data: {
    L: {
      ...langSrc.login
    },
    eye: 'closed-eye',
    pwdtype: 'password',
    email: '',
    password: ''
  },
  /*** 生命周期函数--监听页面显示*/
  onShow: function () {
    this.setLanguage();
  },
  /*** 重新设置语言*/
  setLanguage() {
    langSrc = LangUtils.getLangSrc()
    this.setData({
      L: {
        ...langSrc.login
      },
    })
  },
  // 邮箱登录
  loginEmail(){
    console.log(this.data);
    return
    api.emailLogin({
      'username': this.data.email,
      'password': this.data.password
    }, {
      "showLoading": "true",
      "loadingTitle": ""
    })
    .then(res => {
      console.log(res);
      
    })
  },
  // 密码显示
  changeEye(){
    var im = this.data.eye == 'closed-eye' ? 'eye-o' : 'closed-eye'
    var type = this.data.eye == 'closed-eye' ? 'text' : 'password'
    this.setData({
      eye: im,
      pwdtype: type
    })
  }
},commonMixin))

End

后面会上一些小程序实现国际化

本文地址:https://blog.csdn.net/buzhao1624/article/details/107213816