如何使用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>

页面显示效果如下: