原文转载自「刘悦的技术博客」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开发面试题题库微信小程序,并且发布到正式环境的更多相关文章

  1. 试玩mpvue,用vue的开发模式开发微信小程序

    mpvue,美团开源的vue文件转换成小程序的文件格式,今天玩了一下练练手 mpvue文档地址: http://mpvue.com/mpvue/#_1 暂时有几个点需要注意的: 1.新增页面需要重新启 ...

  2. 用Vue.js开发微信小程序:开源框架mpvue解析

    前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...

  3. 微信小程序从零开始开发步骤(八)引入框架WeUI

    首先来看下WeUI的官方介绍: WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一.在微信小程序的开发过程中,涉及到的前端 ...

  4. 前端开发面试题收集 JS

    前端开发面试题收集-JS篇 收集经典的前端开发面试题 setTimeout的时间定义为0有什么用? javascript引擎是单线程处理任务的,它把任务放在队列中,不会同步执行,必须在完成一个任务后才 ...

  5. 前端开发面试题总结之——HTML

    ______________________________________________________________________________________________ 相关知识点 ...

  6. 【理论面试篇】收集整理来自网络上的一些常见的 经典前端、H5面试题 Web前端开发面试题

    ##2017.10.30收集 面试技巧 5.1 面试形式 1)        一般而言,小公司做笔试题:大公司面谈项目经验:做地图的一定考算法 2)        面试官喜欢什么样的人 ü  技术好. ...

  7. 前端开发面试题-JavaScript(转载)

    本文由 本文的原作者markyun 收集总结. 介绍js的基本数据类型. Undefined.Null.Boolean.Number.String. ECMAScript 2015 新增:Symbol ...

  8. php开发面试题---Mysql常用命令行大全

    php开发面试题---Mysql常用命令行大全 一.总结 一句话总结: 常见关键词:create,use,drop,insert,update,select,where ,from.inner joi ...

  9. 100个iOS开发面试题汇总-王刚韧的技术博客

    100个iOS开发面试题汇总 关于iOS开发面试,不管对于招聘和应聘来说,面试都是很重要的一个环节,特别对于开发者来说,面试中的技术问题环节不仅是企业对应聘者技能和积累的考察,也是一个开发者自我检验的 ...

随机推荐

  1. spring 事务传播(Propagation)

    propagation 一共有以下几种选项: 1. REQUIRED(默认): 使用当前的事务,如果当前没有事务,则自己新建一个事务,子方法必须运行在一个事务中:如果当前存在事务,则加入这个事务,成为 ...

  2. vs.net调试ArcGIS Engine代码查看变量时,提示“要检查本机对象,请启用本机代码调试。” 的解决方法

    用vs2017 调试 查看ArcGIS Engine 的变量时 会提示如下图所示的错误: 解决方法: 工具->选项->调试->常规->使用托管的兼容模式 如下图所示: 2.设置 ...

  3. JavaScript数组操作常用方法

    @ 目录 数组基础遍历方法. for for of for in 数组的基础操作方法. push:尾部追加元素 pop:尾部移出元素 unshift:头部追加元素 shift:头部移出元素 splic ...

  4. 140_Power BI&Power Pivot之降维展示同类型比较

    博客:www.jiaopengzi.com 焦棚子的文章目录 请点击下载附件 一.背景 最近一段时间比较忙,几乎没有时间更新网站内容,今天刚好周末,更新一个简单的需求. 上效果图: 在我们日常做对比分 ...

  5. 目标检测复习之Loss Functions 总结

    Loss Functions 总结 损失函数分类: 回归损失函数(Regression loss), 分类损失函数(Classification loss) Regression loss funct ...

  6. CF1485E Move and Swap

    题意:Move and Swap 很好的题呢 n个节点的树,根为1,所有叶子的深度都是D,一开始根节点上有两个颜色分别微R,B的球,你执行下列操作D-1次: 1.R点跳到子树内 2.B点跳到下一层的任 ...

  7. java中的final与可变类型、不可变类型的关系

    如果你对final和不可变类型的概念与区别有疑问的话,可以打开这篇文章.希望我的解答可以帮到您! 1.不可变类型: 什么是可变类型,什么是不可变类型呢? 首先我们看一下下面的这行代码: String ...

  8. HMS Core 视频编辑服务开放模板能力,助力用户一键Get同款酷炫视频

    前言 短视频模板,是快捷创作短视频的一种方式,一般由专业设计师或模板创作人制作,用户只需替换视频模板中的部分素材,便可生成一支与模板一样的创意视频.这种省时省力.无需"烧脑"构思创 ...

  9. python常用标准库(压缩包模块zipfile和tarfile)

    常用的标准库 在我们常用的系统windows和Linux系统中有很多支持的压缩包格式,包括但不限于以下种类:rar.zip.tar,以下的标准库的作用就是用于压缩解压缩其中一些格式的压缩包. zip格 ...

  10. 国内外组态软件对比分析(InTouch、WinCC、iFix、iNeuOS)

    在我国自动化控制领域应用较广泛的工业自动化组态软件有Wonderware公司InTouch.西门子公司Wincc.GE公司iFix.国内也有一些传统组态软件厂商,使用的功能和形式基本上十分类似,受当时 ...