使用Mpvue配合Weui开发面试题题库微信小程序,并且发布到正式环境
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_116
之前的一篇文章详细阐述了微信小程序开发的准备和入门以及环境搭建,这一次我们介绍如何将微信小程序如何上线,同时配合weui美化界面。
本次做的微信小程序项目是一个类似在线题库的功能,面试者可以通过小程序来检索笔试题,同时用户输入关键词时同步监听输入行为,不需要点击就可以获取知识要点,后台采用tornado+mongodb+mortor的组合实现异步非阻塞的接口。
首先weui是腾讯团队为微信小程序设计的一款皮肤,可以提高用户视觉体验,可以在官网下载weui.css:https://github.com/Tencent/weui-wxss/,将下载的weui.css放在小程序项目的src目录下,然后打开入口文件main.js进行引入
import Vue from 'vue'
import App from './App'
import './weui.css'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue(App)
app.$mount()
此时,打开pages目录的首页文件夹index中的index.vue,添加下面的代码:
<template>
<div class="page">
<div class="page__hd" style='text-align: center;margin-top: 10px;margin-bottom: 10px;'>
<div class="page__title">面试题检索(检索有一定延时)</div>
<div class="page__desc"></div>
</div>
<div class="page__bd">
<div class="weui-search-bar">
<div class="weui-search-bar__form">
<div class="weui-search-bar__box">
<icon class="weui-icon-search_in-box" type="search" size="14"></icon>
<input type="text" class="weui-search-bar__input" placeholder="搜索面试题知识点,如:redis" v-model="inputVal" :focus="inputShowed" @input="inputTyping" />
<div class="weui-icon-clear" v-if="inputVal.length > 0" @click="clearInput">
<icon type="clear" size="14"></icon>
</div>
</div>
<label class="weui-search-bar__label" :hidden="inputShowed" @click="showInput">
<icon class="weui-icon-search" type="search" size="14"></icon>
<div class="weui-search-bar__text">搜索</div>
</label>
</div>
<div class="weui-search-bar__cancel-btn" :hidden="!inputShowed" @click="hideInput">取消</div>
</div>
<div class="weui-cells searchbar-result" v-if="inputVal.length > 0">
<div class="weui-cell" hover-class="weui-cell_active" v-for="(item,index) in mylist">
<div class="weui-cell__bd">
<div @click="jump(item.desc)">{{ item.title }}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
inputShowed: false,
inputVal: "",
mylist:[]
}
},
methods: {
jump(val){
if(val=='no'){
return false;
}
const url = '../detail/main?word='+encodeURIComponent(val);
wx.navigateTo({ url })
},
showInput() {
this.inputShowed = true;
},
hideInput() {
this.inputVal = '';
this.inputShowed = false
},
clearInput() {
this.inputVal = '';
},
inputTyping(e) {
this.inputVal = e.mp.detail.value;
if(this.inputVal==''){
console.log('空的');
return false;
}
var _this=this;
}
}
}
</script>
<style scoped>
.searchbar-result {
margin-top: 0;
font-size: 14px;
}
.searchbar-result:before {
display: none;
}
.weui-cell {
padding: 12px 15px 12px 35px;
}
</style>
可以看到,样式已经符合weui的标准了
这里有一个重点需要说明下,因为我们是实时监控用户输入行为来匹配后台接口的,也就是用户输入时每一帧都会向后台接口发起请求,这样的缺点一个是占用带宽,发起很多无谓的请求,同时异步请求发送之后,无法控制回调方法返回值的先后顺序引起误差,所以这里我们需要加一个延时请求功能,这里我手动设置为1.2秒
var _this=this;
clearTimeout(this.timer);
this.timer = setTimeout(function () {
wx.request({
url: 'https://v3u.cn/find',
method: 'get',
data: {
'word': _this.inputVal
},
header: {
'content-type': 'application/x-www-form-urlencoded' // 默认值
},
success: function (res) {
wx.hideLoading();
_this.mylist = [];
if(res.data.result.length == 0){
_this.mylist = [{'title':'暂无结果','desc':'no'}]
}else{
_this.mylist = res.data.result;
}
console.log(_this.inputVal);
console.log(res.data.result);
},
fail: function (res) {
wx.hideLoading()
},
complete: function () {
wx.hideLoading()
}
})
},1200)
功能做好了,这样就可以上线了,微信目前对接口的安全性比较高,所以你需要一个备好案并且支持https的域名用来响应请求,如何将http接口改造成https请参照这篇文章:在阿里云服务器上使用Nginx部署https协议的网站,请在微信公众号平台将该域名加入白名单
随后,打开微信小程序开发者工具,点击上传按钮,输入一个版本号
最后,回到微信开发者平台,提交审核即可,一般大约两三个小时的时间就会通过审核,审核之前你也可以先用体验版自己测试一下功能和界面。
整个流程还是比较清晰的,最后附上在线面试题检索平台的二维码,欢迎测试和使用
原文转载自「刘悦的技术博客」 https://v3u.cn/a_id_116
使用Mpvue配合Weui开发面试题题库微信小程序,并且发布到正式环境的更多相关文章
- 试玩mpvue,用vue的开发模式开发微信小程序
mpvue,美团开源的vue文件转换成小程序的文件格式,今天玩了一下练练手 mpvue文档地址: http://mpvue.com/mpvue/#_1 暂时有几个点需要注意的: 1.新增页面需要重新启 ...
- 用Vue.js开发微信小程序:开源框架mpvue解析
前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...
- 微信小程序从零开始开发步骤(八)引入框架WeUI
首先来看下WeUI的官方介绍: WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一.在微信小程序的开发过程中,涉及到的前端 ...
- 前端开发面试题收集 JS
前端开发面试题收集-JS篇 收集经典的前端开发面试题 setTimeout的时间定义为0有什么用? javascript引擎是单线程处理任务的,它把任务放在队列中,不会同步执行,必须在完成一个任务后才 ...
- 前端开发面试题总结之——HTML
______________________________________________________________________________________________ 相关知识点 ...
- 【理论面试篇】收集整理来自网络上的一些常见的 经典前端、H5面试题 Web前端开发面试题
##2017.10.30收集 面试技巧 5.1 面试形式 1) 一般而言,小公司做笔试题:大公司面谈项目经验:做地图的一定考算法 2) 面试官喜欢什么样的人 ü 技术好. ...
- 前端开发面试题-JavaScript(转载)
本文由 本文的原作者markyun 收集总结. 介绍js的基本数据类型. Undefined.Null.Boolean.Number.String. ECMAScript 2015 新增:Symbol ...
- php开发面试题---Mysql常用命令行大全
php开发面试题---Mysql常用命令行大全 一.总结 一句话总结: 常见关键词:create,use,drop,insert,update,select,where ,from.inner joi ...
- 100个iOS开发面试题汇总-王刚韧的技术博客
100个iOS开发面试题汇总 关于iOS开发面试,不管对于招聘和应聘来说,面试都是很重要的一个环节,特别对于开发者来说,面试中的技术问题环节不仅是企业对应聘者技能和积累的考察,也是一个开发者自我检验的 ...
随机推荐
- 992. Sort Array By Parity II - LeetCode
Question 992. Sort Array By Parity II Solution 题目大意:给一个int数组,一半是奇数一半是偶数,分别对偶数数和奇数数排序并要求这个数本身是偶数要放在偶数 ...
- 443. String Compression - LeetCode
Question 443. String Compression Solution 题目大意:把一个有序数组压缩, 思路:遍历数组 Java实现: public int compress(char[] ...
- Typora详细教程以及下载
发现一篇非常不错的 Typora 教程,分享给大家. 原文链接:https://www.cnblogs.com/hyacinthLJP/p/16123932.html 作者:MElephant T ...
- MySQL的Explain总结
Explain简介 MySQL优化器在基于成本的计算和基于规则的SQL优化会生成一个所谓的执行计划,我们就可以使用执行计划查看MySQL对该语句具体的执行方式. 介绍这个好啰嗦就是了,我们可以通过这个 ...
- 关于TornadoFx和Android的全局配置工具类封装实现及思路解析
原文地址: 关于TornadoFx和Android的全局配置工具类封装实现及思路解析 - Stars-One的杂货小窝 目前个人开发软件存在设置页面,可以让用户自定义些设置,但我发现,存储数据的代码逻 ...
- 【算法】Floyd算法
什么是Floyd Floyd用于求最短路程.举个栗子,给你一张图,让你求出点[1]到点[5]的最短路程,你会怎么求? (画图工具:CS Academy) 如上图,有向边分别是 1->2 1-& ...
- python自动将新生成的报告作为附件发送并进行封装
发送报告作为自动化部署来讲是一个重要的环节,废话不多说直接上代码吧,如果想更细致的了解内容查阅本博主上篇基本发送文章 特别叮嘱一下:SMTP协议默认端口25,qq邮箱SMTP服务器端口是465 别出丑 ...
- C语言- 基础数据结构和算法 - 08 栈的应用_就近匹配20220611
听黑马程序员教程<基础数据结构和算法 (C版本)>, 照着老师所讲抄的, 视频地址https://www.bilibili.com/video/BV1vE411f7Jh?p=1 喜欢的朋友 ...
- UiPath条件判断活动Flow Decision的介绍与使用
一.Flow Decision介绍 FlowDecision节点是一个条件节点,它根据指定条件是否成立来控制流程的两个分支. 当条件为True时,流程执行一个分支 当条件为False时,流程执行另外一 ...
- bat-进程与服务
进程 tasklist 查看进程表 关闭进程 taskkill /PID xxx taskkill -f -im unm* taskkill -f -im ice* 服务 **net** net命令不 ...