面试题3

微信小程序中的数据双向绑定

前言 微信小程序因为诸多限制所以它无法像 vue 那样通过指令进行数据绑定，那微信小程序有没有什么办法可以实现数据的双向绑定呢？今天给大家分享两种微信小程序数据绑定的方法。

通过 model:value 绑定 当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。

.wxml 文件

<form catchsubmit="formSubmit">
    <view class="formItemBox">
        <view>姓名</view>
        <view>
            <input name="name" model:value="{{ formData.name }}" type="text" placeholder="请输入姓名" />
        </view>
    </view>
    <view class="formItemBox">
        <view>年龄</view>
        <view>
            <input name="age" model:value="{{ formData.age }}" type="text" placeholder="请输入年龄" />
        </view>
    </view>
    <view class="formItemBox">
        <view>号码</view>
        <view>
            <input name="number" model:value="{{ formData.number }}" type="text" placeholder="请输入号码" />
        </view>
    </view>
    <view class="formItemBox">
        <view>地址</view>
        <view>
            <input name="address" model:value="{{ formData.address }}" type="text" placeholder="请输入地址" />
        </view>
    </view>
    <!-- 底部操作按钮 -->
    <view>
        <button formType="submit">提交</button>
    </view>
</form>
​

.js 文件

Page({
  data: {
    // 绑定的数据
    formData: {
      name: "",
      age: "",
      number: "",
      address: "",
    },
  },
  // 提交操作
  formSubmit(e) {
    console.log(e.detail.value); //提交的数据
  },
})
​

点击提交操作后：

通过 bindinput 方法

首先用标签属性 data- 绑定 js 中的 data 参数，再通过 bandinput 事件获取 key 值，最后利用模板字符串赋值给 data 中的值。

.wxml 文件

<view>
    <view class="formItemBox">
        <view>姓名</view>
        <view>
            <input data-gater="formData.name" bindinput="inputFrame" value="{{ formData.name }}" type="text"
                placeholder="请输入姓名" />
        </view>
    </view>
    <view class="formItemBox">
        <view>年龄</view>
        <view>
            <input data-gater="formData.age" bindinput="inputFrame" value="{{ formData.age }}" type="text"
                placeholder="请输入年龄" />
        </view>
    </view>
    <view class="formItemBox">
        <view>号码</view>
        <view>
            <input data-gater="formData.number" bindinput="inputFrame" value="{{ formData.number }}" type="text"
                placeholder="请输入号码" />
        </view>
    </view>
    <view class="formItemBox">
        <view>地址</view>
        <view>
            <input data-gater="formData.address" bindinput="inputFrame" value="{{ formData.address }}" type="text"
                placeholder="请输入地址" />
        </view>
    </view>
    <!-- 底部操作按钮 -->
    <view>
        <button bindtap="submit">提交</button>
    </view>
</view>
​

.js 文件

Page({
  data: {
    // 绑定的数据
    formData: {
      name: "",
      age: "",
      number: "",
      address: "",
    },
  },
  // 提交操作
  submit() {
    console.log(this.data.formData); //提交的数据
  },
  // input事件(内容改变时触发)
  inputFrame(e) {
    this.setData({
      [`${e.currentTarget.dataset.gater}`]: e.detail.value
    })
    console.log(this.data.formData);
  },
})
​

nput框输入和提交时：

最后附上 .wxss 文件

.formItemBox {
    display: flex;
    margin: 0rpx 10rpx;
    padding: 14rpx 0rpx;
    border-bottom: 1px solid gainsboro;
}
​
.formItemBox view:first-child {
    width: 20%;
    color: #323333;
    font-size: 28rpx;
}
​
.formItemBox view:last-child {
    width: 80%;
}
​
input {
    font-size: 24rpx;
    color: #626263;
}
​

axios 登录

其实像这类的文章网上已经有很多很好的,写这篇文章，相当于是做个笔记，以防以后忘记用到的：

1、 vuex

2、axios

3、vue-route

登陆流程为：

1、提交登陆表单，拿到后台返回的数据

2、将数据存入vuex

一、vuex配置 这里直接跳过安装之类的，百度一大堆，我直接上代码。

// store index.js import Vue from 'vue' import Vuex from 'vuex'

Vue.use(Vuex) // 初始化时用sessionStore.getItem('token'),这样子刷新页面就无需重新登录 const state = { user: window.sessionStorage.getItem('user'), token: window.sessionStorage.getItem('token') } const mutations = { //将token保存到sessionStorage里，token表示登陆状态 SET_TOKEN: (state, data) => { state.token = data window.sessionStorage.setItem('token', data) }, //获取用户名 GET_USER: (state, data) => { // 把用户名存起来 state.user = data window.sessionStorage.setItem('user', data) }, //登出 LOGOUT: (state) => { // 登出的时候要清除token state.token = null state.user = null window.sessionStorage.removeItem('token') window.sessionStorage.removeItem('user') } }

const actions = { } export default new Vuex.Store({ state, mutations, actions }) (1)我在这里是将登录状态token,和用户名user存在sessionStorage里，以便组件使用,如果token为true则表示用户已经登陆sessionStorage和token这两个东西很简单用法自行百度

(2)不要忘了在main.js引入store，vue实例中也要加入store main.js

import store from './store/index'

new Vue({ el: '#app', router, store, components: { App }, template: '' }) 二、vue-router配置 import Vue from 'vue' import Router from 'vue-router' import Login from '../components/Login' import Activity from '../components/Activity' import Index from '../components/Index' import store from '../store/index'

Vue.use(Router)

const router = new Router({ routes: [ { path: '/', name: '/', component: Index }, { path: '/login', name: 'login', component: Login }, { path: '/activity', name: 'activity', component: Activity, meta: { requireAuth: true // 添加该字段，表示进入这个路由是需要登录的 } } ] })

这里我用到router.beforeEach来实现拦截登陆，

（1）在需要验证的路由的meta里加入我们自己的requireAuth

（2）router.beforeEach里通过requireAuth验证该组件是否需要登陆

（3）验证token如果为flase就表示未登陆跳转到登录页

// 注册全局钩子用来拦截导航 router.beforeEach((to, from, next) => { const token = store.state.token if (to.meta.requireAuth) { // 判断该路由是否需要登录权限 if (token) { // 通过vuex state获取当前的token是否存在 next() } else { console.log('该页面需要登陆') next({ path: '/login' // query: {redirect: to.fullPath} // 将跳转的路由path作为参数，登录成功后跳转到该路由 }) } } else { next() } })

export default router 三、axios发送请求 submitLogin () { this.refs.loginForm.validate(valid => { if (valid) { axios.post('/login', { user: this.loginForm.user, pass: this.loginForm.pass }) .then((response) => { if (response.status === 200) { this.store.commit('SET_TOKEN', response.data.token) this.$store.commit('GET_USER', response.data.user) this.$message({ message: '登陆成功', type: 'success' }) this.$router.push({name: 'activity'}) } }) .catch(function (error) { console.log(error) }) } else { console.log('error submit!!') return false } }) }, 后台我没写，是用mock.js拦截ajax请求 因为我用的是element-ui所以上面代码有一些直接无视，看核心的就行 （1）在数据返回成功后用this.store.commit来更新vuex里的数据

（2）登陆成功后跳转this.router.push()跳转页面，这里注意，如果你在前面导航拦截的钩子用了query: {redirect: to.fullPath}的话，这里就 用 this.router.push(this.router.push(this.route.query.redirect);这样页面就能跳到你跳到登陆页面前要去的那个路由了

那个TOKEN我这里也没有使用，就是在页面请求的时候带上这个TOKEN，与后端核对。

\