如何使用uni-app快速成型一個微信小程序（二）

正式編碼

我們在第一篇文章中已經實現了編碼環境的搭建，本章將從實際代碼中出發，構造一個查詢的小程序

產品目標

我們做一個產品之前，我們要明晰產品的功能和定位，現在要做的產品是一個國家獸藥限量數據查詢，定位於快速開箱即用，所以我們要開發一個微信小程序來實現這個產品。

頁面原型

以下是設計的產品頁面原型，我們可以從原型中看到產品具有兩個頁面

1. 首頁——用戶進入的首頁面，在此頁面進行搜索並向具體模塊中跳轉。
2. 內容列表——首頁上會存在多個模塊入口，該頁面用以分開展示各模塊下的具體內容。
   

首頁實現

根據首頁頁面設計，我們首頁需要一個搜索框，然後下方豎向排列幾個模塊入口。
搜索框我們可以在 插件市場中找到 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>

點擊編輯器上方 運行 -> 運行到小程序模擬器 -> 微信開發者工具

這一步有幾個地方

1. 需要安裝微信小程序開發ide
2. 需要在 小程序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>

頁面顯示效果如下: