2019年5月

v-html介绍

如果不使用v-html而是直接将html标签加入视图层会出现html标签不解析的情况,如果我们想实现解析的效果。vue中提供了v-html指令。使用 v-html 指令,你可以将html标签解析渲染到视图层。

微信小程序如何使用?

由于微信小程序只是类vue的,与vue存在着很多不同点。但是为了秉承将vue进行到底的宗旨,很多微信小程序开发框架如雨后春笋。在我使用的过程中,感觉uni-app与vue最为贴近,而且适配了很多vue的特性,如:v-model,filters,v-html等。官网是这样介绍的。

uni-app支持的vue特性

其中,他们是通过微信小程序rich-text的属性来实现v-html的效果的。所以,我们想知道支持什么标签,就得移步至rich-text | 微信开发文档

开始实现Demo

demo 中的需求是一个赛事报名list,其中赛事状态有,预报名,报名成功,正在进行,已结束等。

预实现方法:由于微信小程序的rich-text组件会禁用所有的节点事件,所以想通过@click绑定v-html节点事件,filter渲染界面。但是在实现过程中发现不支持在v-html中使用filter, 故后来采用methods的返回值来实现视图层的渲染。

methods实现v-html渲染

效果如下:至此效果,v-html解析成功

v-html 渲染效果

添加状态判断

最终效果

v-model 介绍

首先明确一点,v-model仅仅是语法糖。

<input type="text" v-model="something">

等价于

  <input
                type="text"
                v-bind:value="something"
                v-on:input="something = $event.target.value">

它将一个较复杂的input双向数据绑定简化了他的书写方式。

微信小程序绑定input

最开始我是使用微信推荐的写法

<input bindtap="input" />

然后在js里面解析event,然后再setData

uni-app下v-model的写法

本文采用uni-app自定义组件模式

wxml

...
<form @submit="formSubmit" @reset="formReset" :model="formItem" class="tm-every-center padding bg-white">
                    <view class="section flex align-center">
                        <view class="section__title">姓名:</view>
                        <input name="name" placeholder="请填写您的姓名" class="bg-gray" v-model="formItem.name" />
                    </view>
                    <view class="section flex align-center">
                        <view class="section__title">手机:</view>
                        <input name="name" placeholder="请填写您的姓名" class="bg-gray" v-model="formItem.phone" />
                    </view>
                    <view class="section flex align-center">
                        <view class="section__title">赛点:</view>
                        <input name="name" placeholder="请填写您的姓名" class="bg-gray" v-model="formItem.competition" />
                    </view>
                    <view class="btn-area margin-top"><button formType="submit" class="cu-btn">提交</button></view>
                </form>
                ...

然后在data里面设置

formItem: {
                name:'',
                phone:'',
                competition: ''
            }

在submit事件回调里面就可以这样写

submit(){
    this.$api.post(formItem).then(res => {
    })
}

完美解决微信小程序input书写过程冗余的情况。

介绍

本文采用uni-app框架开发,使用flyio库封装请求。

安装方式

npm install --save flyio

引入方式

新建api.js文件,编写以下内容

var Fly = require("flyio/dist/npm/wx")
var fly = new Fly;

配置方式

// 配置请求根域名
fly.config.baseURL = "http://whisper.wezoz.com"
// 配置响应拦截器
fly.interceptors.response.use(
    (response) => {
            // 如果请求报错
            if (response.data.code != 10000) {
                uni.showModal({
                    title:'温馨提示',
                    content:response.data.data
                })
            }else{
                //只将请求结果的data字段返回
                return response.data.data
            }
        },
        (err) => {
            //发生网络错误后会走到这里
            return Promise.resolve("网络请求:ERROR!")
        }
)
// 配置请求拦截器
fly.interceptors.request.use((request) => {
    request.headers["token"] = uni.getStorageSync('token');
    return request;
})

同步封装微信登录

async function wxLogin() {
    return await new Promise((resolve, reject) => {
        wx.login({
            success(res) {
                if (res.code) {
                    resolve(res.code)
                }
            }
        })
    })
}

写一个接口如login

// 登录
export const login = async (params) => {
    console.log('开始登录...')
    let code = await wxLogin();
    let res = await fly.get('/user/login', {code: code})
    uni.setStorageSync('token', res.token)
    uni.setStorageSync('openid', res.openid)
}

封装普通请求

export const updateUserInfo = (params) => {
    return fly.get('/user/update', params)
}

引入方式

App.vue 或者main.js添加以下代码

import * as API from './static/utils/api'
Vue.prototype.$api = API

调用方式

test.vue
this.$api.login()