之前的一篇文章詳細闡述了微信小程式開發的準備和入門以及環境搭建，這一次我們介紹如何将微信小程式如何上線，同時配合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協定的網站，請在微信公衆号平台将該域名加入白名單
随後，打開微信小程式開發者工具，點選上傳按鈕，輸入一個版本号
最後，回到微信開發者平台，送出稽核即可，一般大約兩三個小時的時間就會通過稽核，稽核之前你也可以先用體驗版自己測試一下功能和界面。