使用Mpvue配合Weui开发面试题题库微信小程序,并且发布到正式环境

简介: 本次做的微信小程序项目是一个类似在线题库的功能,面试者可以通过小程序来检索笔试题,同时用户输入关键词时同步监听输入行为,不需要点击就可以获取知识要点,后台采用[tornado+mongodb+mortor的组合](https://v3u.cn/a_id_111)实现异步非阻塞的接口。

之前的一篇文章详细阐述了微信小程序开发的准备和入门以及环境搭建,这一次我们介绍如何将微信小程序如何上线,同时配合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协议的网站,请在微信公众号平台将该域名加入白名单

随后,打开微信小程序开发者工具,点击上传按钮,输入一个版本号

最后,回到微信开发者平台,提交审核即可,一般大约两三个小时的时间就会通过审核,审核之前你也可以先用体验版自己测试一下功能和界面。

整个流程还是比较清晰的,最后附上在线面试题检索平台的二维码,欢迎测试和使用

相关文章
|
6天前
|
小程序 前端开发 物联网
无人桌球室小程序平台系统定制开发方案
【项目摘要】随着社会进步和科技发展,无人桌球室小程序应运而生,解决传统桌球室管理难题。提供在线预订、自动计分、赛事查询及会员管理功能,采用微信小程序前端、微服务后端及物联网智能设备技术实现。市场推广结合社交媒体、线下活动及口碑营销。需开发支持,请联系小编。
|
2天前
|
小程序 BI
水滴筹小程序设计开发:打造公正透明的社会援助体系
随着互联网的快速发展,移动支付和线上服务逐渐成为人们日常生活的一部分。在这种背景下,医疗众筹平台应运而生,为大众提供了筹款、互助、公益的新渠道。水滴筹小程序的诞生,与中国的互联网环境紧密相连。
|
2天前
|
小程序 安全 数据挖掘
陪玩语聊APP小程序定制开发模块功能
随着电竞行业的规范化,游戏陪玩软件兴起,提供专业陪玩服务。核心功能包括:多样化注册登录、用户资料展示、智能匹配筛选陪玩、语音互动(多人/私聊)、订单交易管理、陪玩入驻审核、数据分析、客服系统及社交功能。旨在融合游戏、语音聊天与社交,构建综合娱乐平台。
|
7天前
|
小程序 BI 定位技术
广州跑腿小程序功能开发让生活更方便
跑腿小程序整合生活服务,提供快捷的跑腿任务解决方案。用户通过手机号或微信注册登录,发布如取快递、买饭等需求;跑腿员接单并利用导航高效完成。支持订单管理、多种支付方式及评价反馈系统,确保服务质量。小程序还发送订单状态通知,进行数据统计分析以促进平台发展。
|
6天前
|
小程序 安全 数据安全/隐私保护
理发店预约小程序开发:随时随地,省时省力
理发店预约小程序开发要点:集成预约系统,用户填写信息并自动匹配时间及理发师;包含充值功能,支持安全支付及多种折扣;用户评价系统确保服务质量透明;发型展示帮助用户选择,支持模拟试戴;重视用户体验,界面友好,加载速度快;确保数据安全,兼容多平台,定期更新以优化性能和响应用户需求。寻求开发合作可联系相关人员。
|
6天前
|
人工智能 小程序 搜索推荐
餐饮类小程序开发定制需要多少钱,费用是怎样的
餐饮小程序开发费用因需求、规模和复杂性而异。基础版约几千到万元,含菜品展示、在线点餐等功能;界面设计费几千到几万;服务器租赁年费几千到几万;维护更新费同水平。总成本通常在几万到几十万之间。选择开发商时要考虑实际需求、合同条款及付款方式。
|
7天前
|
小程序 定位技术
货拉拉货运小程序开发:构建便捷可靠的货运平台
货拉拉货运小程序整合物流服务,用户可录入货物详情、使用地图定位跟踪运输状态;订单管理功能便于查看进度和费用;支持多种支付方式及支付记录查询;评价系统提升服务质量;客服支持确保用户疑问得到解答,打造移动物流新时代。
|
6天前
|
小程序
美团买菜小程序平台开发:搭建便捷的线上买菜渠道
随着时代的发展和人们生活水平的提高,网上购物已经成为更多人的首选。在此背景下,类似美团买菜小程序平台开发应运而生,为消费者提供方便快捷的网上购物体验。下面我们将详细讲解美团买菜小程序平台开发的功能特点和优势。
|
7天前
|
小程序 安全 UED
百果园社区电商小程序开发:打造私域精准营销发展趋势
百果园借助社区电商小程序转型,拓展线上渠道,增强品牌形象,降低运营成本,适应市场变化。小程序提供实时购物、社群互动、商家入驻及优惠活动,强调用户体验、功能丰富性和安全性,成为品牌与消费者连接的新桥梁。
|
7天前
|
小程序 安全 搜索推荐
陪玩交友互动小程序开发:打造有趣的社交互动平台
【陪玩交友小程序】融合趣味与实用,打造安全社交新平台。用户经实名认证后,可享在线匹配、语音聊天、游戏组队等多元互动。智能推荐系统助你高效找到玩伴,共享游戏攻略与娱乐资讯。个性化推荐服务,让每一次交流都充满乐趣,邀请好友共赴精彩社交之旅。

热门文章

最新文章