正式编码
我们在第一篇文章中已经实现了编码环境的搭建,本章将从实际代码中出发,构造一个查询的小程序
产品目标
我们做一个产品之前,我们要明晰产品的功能和定位,现在要做的产品是一个国家兽药限量数据查询,定位于快速开箱即用,所以我们要开发一个微信小程序来实现这个产品。
页面原型
以下是设计的产品页面原型,我们可以从原型中看到产品具有两个页面
- 首页——用户进入的首页面,在此页面进行搜索并向具体模块中跳转。
- 内容列表——首页上会存在多个模块入口,该页面用以分开展示各模块下的具体内容。
首页实现
根据首页页面设计,我们首页需要一个搜索框,然后下方竖向排列几个模块入口。
搜索框我们可以在 插件市场中找到 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>
页面显示效果如下: