原文转载自「刘悦的技术博客」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. visio 画泳道图

    参考

  2. sqlalchemy模块介绍、单表操作、一对多表操作、多对多表操作、flask集成.

    今日内容概要 sqlalchemy介绍和快速使用 单表操作增删查改 一对多 多对多 flask集成 内容详细 1.sqlalchemy介绍和快速使用 # SQLAlchemy是一个基于 Python实 ...

  3. 词云图value传递数据不显示(已解决)

    问题描述: 今天在做词云图时,虽然词云图能够展现出来,但是后台传递过来的数据(每个词出现的次数)却不显示. 错误原因: 错误的将tooltip写在了series内部,如图: 解决方案: 将toolti ...

  4. OpenHarmony3.1 Release版本特性解析——硬件资源池化架构介绍

    李刚 OpenHarmony 分布式硬件管理 SIG 成员 华为技术有限公司分布式硬件专家 OpenHarmony 作为面向全场景.全连接.全智能时代的分布式操作系统,通过将各类不同终端设备的能力进行 ...

  5. 【AC自动机】背单词

    题意: 0 s v:添加价值为v的字符串s 1 t:查询t中含的s的权值和.(不停位置算多次) 思路: 在线AC自动机. 同学用过一个妙妙子的分块算法. 这里用二进制分组:通常用作把在线数据结构问题转 ...

  6. CentOS6.5修改镜像源问题

    千呼万唤使出来阿,随着centos版本不断地更新好多镜像源已经被放弃了治疗,尤其是低版本的centos,下面以CentOS6.5为例进行刨析吧! 上干货: 配置文件 vi /etc/yum.repos ...

  7. 【Azure 应用服务】NodeJS Express + MSAL 应用实现AAD登录并获取AccessToken -- cca.acquireTokenByCode(tokenRequest)

    问题描述 在上一篇博文 "[Azure 应用服务]NodeJS Express + MSAL 应用实现AAD集成登录并部署在App Service Linux环境中的实现步骤"中, ...

  8. STL栈与队列

    #include<queue>// 队列 #include<stack>//栈 stack<int> s;//参数也是数据类型,这是栈的定义方式 queue< ...

  9. vue-property-decorator

    vue-property-decorator使我们能在vue组件中写TypeScript语法,依赖于vue-class-component 装饰器:@Component.@Prop.@PropSync ...

  10. GDKOI 2021 Day1 TG 。。。

    看着一群群比 LHF , HQX 还强的大佬涌进了机房,本蒟蒻表示慌得一批 T1 讲题人说最简单的签到题本蒟蒻表示... \(Update\) 用 ds , dt 两个变量记录点 i 连向 s 或 t ...