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

╰+哭是因爲堅強的太久メ 2023-07-17 06:59 17阅读 0赞

#### 正式编码 ####

我们在第一篇文章中已经实现了编码环境的搭建，本章将从实际代码中出发，构造一个查询的小程序

#### 产品目标 ####

我们做一个产品之前，我们要明晰产品的功能和定位，现在要做的产品是一个国家兽药限量数据查询，定位于快速开箱即用，所以我们要开发一个微信小程序来实现这个产品。

#### 页面原型 ####

以下是设计的产品页面原型，我们可以从原型中看到产品具有两个页面

1.  首页——用户进入的首页面，在此页面进行搜索并向具体模块中跳转。
2.  内容列表——首页上会存在多个模块入口，该页面用以分开展示各模块下的具体内容。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29adW9ZdTEyMw_size_16_color_FFFFFF_t_70]

#### 首页实现 ####

根据首页页面设计，我们首页需要一个搜索框，然后下方竖向排列几个模块入口。  
搜索框我们可以在 插件市场中找到 [SearchBar 搜索栏][SearchBar]，点击页面右侧![在这里插入图片描述][20200320144307782.png]  
这样就会调起 HX 中的导入操作，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29adW9ZdTEyMw_size_16_color_FFFFFF_t_70 1]  
选择刚才建立好的项目，点击确认即可。  
我们可以看下项目中 components，里边已经存在我们刚才加载那个插件  
![在这里插入图片描述][20200320144531706.png]  
但是目前仅仅是导入了项目，我们需要在业务页面进行相应调用。

<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>

点击编辑器上方 运行 -> 运行到小程序模拟器 -> 微信开发者工具  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29adW9ZdTEyMw_size_16_color_FFFFFF_t_70 2]  
这一步有几个地方

1.  需要安装微信小程序开发ide
2.  需要在 小程序ide中 设置 -> 安全设置 -> 开启服务端口

另外程序中需要发起一些ajax请求，我们可以直接调用 uni.request，具体使用可以查看文档

#### 内容列表实现 ####

基本实现与之前的一致，不过这里用了列表来显示内容，直接粘代码

<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>

页面显示效果如下:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29adW9ZdTEyMw_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29adW9ZdTEyMw_size_16_color_FFFFFF_t_70]: /images/20230528/b303553686234a078a04054f62010ed6.png
[SearchBar]: https://ext.dcloud.net.cn/plugin?id=866
[20200320144307782.png]: /images/20230528/cf975dde6e27439d885f71f90f93813b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29adW9ZdTEyMw_size_16_color_FFFFFF_t_70 1]: /images/20230528/84969f114ae64933b41cc70846554764.png
[20200320144531706.png]: /images/20230528/55e2277233234ae08d32bf82118f3941.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29adW9ZdTEyMw_size_16_color_FFFFFF_t_70 2]: /images/20230528/4f077a2ecbc14dcaa5054854d3b50105.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29adW9ZdTEyMw_size_16_color_FFFFFF_t_70 3]: /images/20230528/756113929e754d1d90b5a669db2b7279.png