正式編碼
我們在第一篇文章中已經實現了編碼環境的搭建,本章將從實際代碼中出發,構造一個查詢的小程序
產品目標
我們做一個產品之前,我們要明晰產品的功能和定位,現在要做的產品是一個國家獸藥限量數據查詢,定位於快速開箱即用,所以我們要開發一個微信小程序來實現這個產品。
頁面原型
以下是設計的產品頁面原型,我們可以從原型中看到產品具有兩個頁面
- 首頁——用戶進入的首頁面,在此頁面進行搜索並向具體模塊中跳轉。
- 內容列表——首頁上會存在多個模塊入口,該頁面用以分開展示各模塊下的具體內容。
首頁實現
根據首頁頁面設計,我們首頁需要一個搜索框,然後下方豎向排列幾個模塊入口。
搜索框我們可以在 插件市場中找到 SearchBar 搜索欄,點擊頁面右側
這樣就會調起 HX 中的導入操作,
選擇剛纔建立好的項目,點擊確認即可。
我們可以看下項目中 components,裏邊已經存在我們剛纔加載那個插件
但是目前僅僅是導入了項目,我們需要在業務頁面進行相應調用。
<uni-search-bar placeholder="搜索關鍵詞" @confirm="search" cancelButton="none"></uni-search-bar>
<script>
import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
export default {
components: {
uniSearchBar,
},
}
</script>
我們還需要一個card區域用來表示模塊,代碼如下:
<uni-card title="允許作治療用,但不得在動物性食品中檢出的獸藥" @click="content('a3')">
<template>
<view>
<text class="intro">GB 31650-2019 食品安全國家標準 食品中獸藥最大殘留限量</text>
<view style="float: right;">
<uni-badge :text=result_num.a3 type='success'></uni-badge>
</view>
</view>
</template>
</uni-card>
點擊編輯器上方 運行 -> 運行到小程序模擬器 -> 微信開發者工具
這一步有幾個地方
- 需要安裝微信小程序開發ide
- 需要在 小程序ide中 設置 -> 安全設置 -> 開啓服務端口
另外程序中需要發起一些ajax請求,我們可以直接調用 uni.request,具體使用可以查看文檔
<script>
uni.request({
url: 'https://****************',
data: {
func_name: 'lists',
kw: this.keyword,
type: type
},
success: (res) => {
this.result_num[type] = res.data.data.total;
}
});
</script>
內容列表實現
基本實現與之前的一致,不過這裏用了列表來顯示內容,直接粘代碼
<template>
<view>
<!-- 手風琴效果 -->
<uni-collapse accordion="true" v-for="info in lists">
<uni-collapse-item :title=info.cn_name>
<view style="padding: 30rpx;" v-show="null != info.categroy">
獸藥分類: {{info.categroy}}
</view>
<view style="padding: 30rpx;" v-show="null != info.cn_name">
中文名稱: {{info.cn_name}}
</view>
<view style="padding: 30rpx;" v-show="null != info.en_name">
英文名稱: {{info.en_name}}
</view>
<view style="padding: 30rpx;" v-show="null != info.from">
來源: {{info.from}}
</view>
<view style="padding: 30rpx;" v-show="null != info.maximum_residue">
最大限量: {{info.maximum_residue}}
</view>
<view style="padding: 30rpx;" v-show="null != info.target_tissue">
靶組織: {{info.target_tissue}}
</view>
<view style="padding: 30rpx;" v-show="null != info.animal_category">
動物種類: {{info.animal_category}}
</view>
</uni-collapse-item>
</uni-collapse>
</view>
</template>
<script>
import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
// import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
export default {
components: {
uniCollapse,
uniCollapseItem,
// uniLoadMore
},
onReachBottom() {
this.sy_request()
},
onLoad: function(option) { //option爲object類型,會序列化上個頁面傳遞的參數
this.option = option;
this.sy_request()
},
data() {
return {
page: 1,
lists: []
}
},
methods: {
sy_request() {
uni.request({
url: 'https://*********',
data: {
func_name: 'content',
kw: this.option.kw,
type: this.option.type,
page: this.page
},
success: (res) => {
this.page += 1;
console.log(res.data)
for (let i in res.data.data.data) {
this.lists.push(res.data.data.data[i])
// console.log(res.data.data.data[i])
}
}
})
}
}
}
</script>
<style>
</style>
頁面顯示效果如下: