微信小程序使用uni-app开发小程序及部分功能实现详解_javascript技巧_

一、uni-app

官网：https://uniapp.dcloud.io/

1、简介

uni-app 是一个使用 Vue.js (opens new window) 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台；

2、开发工具

uni-app 推荐使用 Hbuilderx 开发工具来开发项目，下载地址：https://www.dcloud.io/hbuilderx.html或者点击这里下载，下载 App开发版；

1、安装 sass 插件

点击 工具 => 插件安装 => 安装新插件 => 前往插件市场安装 ，在这里你可以搜索自己需要的插件，我们以 sass 为例；找到需要的插件之后点击下载 => 使用Hbuilderx 导入插件，这里需要登录 sass 的网站，如果登录成功则会打开 Hbuilderx 编译器，然后点击确定就可以安装了；

3、新建 uni-app项目

Hbuilderx 点击 文件=>新增=>项目 ，本文新建一个小程序项目：uni-app => 填写项目名称、选择项目存放路径 => 模板 uni-ui 项目=>创建，然后就可以生成一个小程序项目；

components：组件文件
pages：页面文件
static：静态文件
uni_modules：依赖包
App.vue：应用配置，配置小程序全局样式、生命周期
main.js：Vue 初始化入口文件
manifest.json：配置应用名称 appid、logo、版本等打包信息
pages.json：配置页面路径、页面样式、tabBar等信息
uni,scss：全局样式

4、把项目运行到微信开发者工具

1、配置 appid

在 manifest.json 文件 => 微信小程序配置 填写微信小程序 appID；

2、在 Hbuilderx 配置微信开发者工具的安装路径：这样可以在 Hbuilderx 里面运行的时候自动打开微信开发者工具查看项目

工具 => 设置 => 运行配置 => 小程序运行配置 配置微信开发者工具的安装路径，如：C:\Program Files (x86)\Tencent\微信web开发者工具

3、在微信开发者工具开启服务端口

设置 => 安全设置 => 安全 开启服务端口

4、运行

Hbuilderx 点击 运行=>运行到小程序模拟器 点击第一个就可以在 Hbuilderx 自动编译，成功之后会自动打开微信开发者工具；

注意：这个时候我们想修改项目里面的内容，需要在 Hbuilderx 里面修改，例如修改配置：manifest.json 文件 => 源码视图

二、实现tabBar效果

1、创建tabBar页面

在 pages 下面创建，右键新建页面，这里创建的是 tanBar 对应的几个页面；记住这里要勾选"创建同名目录、在pages.json 中注册"两个选项，默认是选中的；（home、cate、cart、my）

2、配置tabBar

在 pages.json 文件中在 pages 平级新增 tabBar 的配置：

"tabBar":{ "selectedColor":"#C00000", "list":[ { "pagePath":"pages/home/home", "text":"首页", "iconPath":"static/c1.png", "selectedIconPath":"static/c2.png" }, { "pagePath":"pages/cate/cate", "text":"分类", "iconPath":"static/c3.png", "selectedIconPath":"static/c4.png" }, { "pagePath":"pages/cart/cart", "text":"购物车", "iconPath":"static/c5.png", "selectedIconPath":"static/c6.png" }, { "pagePath":"pages/my/my", "text":"我的", "iconPath":"static/c7.png", "selectedIconPath":"static/c8.png" } ] } 

注意：home 也必须在 pages 数组的第一位；还可以在 pages.json 文件修改 globalStyle 配置项，来自定义自己的导航条样式；

三、配置网络请求

由于小程序不支持 axios ，并且原生的 wx.request() API 功能比较简单，且不支持拦截器等全局定制的功能；所以建议在 uni-app 项目中使用 @escook/request-miniprogram 第三方包发起网络请求；

官网：https://www.npmjs.com/package/@escook/request-miniprogram

1、依照官网提示安装、导入、使用

//引入网络请求 import { $http } from '@escook/request-miniprogram'; uni.$http = $http; //全局baseUrl $http.baseURL = "https://www.uinav.com"; //请求拦截器 $http.beforeRequest = function (options) { uni.showLoading({ title:"数据加载中..." }) } //相应拦截器 $http.afterRequest = function () { uni.hideLoading() } 

在 uni-app 中可以使用 uni.xxx 来调用 wx.xxx 的 api；

2、实战

//home data() { return { swiperList:[] }; }, onLoad() { this.getSwiperList(); }, methods:{ async getSwiperList(){ let { data:res } = await uni.$http.get('接口地址') if(res.meta.status !== 200){ return uni.showToast({ title:"数据请求失败", duration:1500, icon:"none" }) } this.swiperList = res.message; } } 

四、uni-app 里面小程序分包

1、创建分包目录

在根目录下创建分包目录，subpackage；

2、在 pages.json 文件中配置

在 pages 节点同级，声明 subpackages 节点用来配置分包结构；

"subPackages":[ { "root":"subpackage", "pages":[] } ] 

3、创建分包页面

在 sunpackage 目录上右键点击新建文件，填写页面名称、选择分包 sunpackage ，然后创建就可以了，编译器会自动在代码中将配置信息填充到 sunpackage 分包下面；

"subPackages":[ { "root":"subpackage", "pages":[{ "path" : "goods_detail/goods_detail", "style" :{ "navigationBarTitleText": "", "enablePullDownRefresh": false } } ] } ] 

注意：这里提一下，页面跳转传参跟小程序原生跳转传参是一样的：1、navigator 配合 url 跳转、路径拼接传参；2、点击事件通过 uni.redirectTo ；

五、公用方法封装

这里以 错误提示信息为例，在 main.js 中；

uni.$showMsg = function(titie="请求失败",duration=1000){ uni.showToast({ title, duration, icon:"none" }) } 

六、搜索功能

1、搜索组件

1、自定义搜索组件：在 components 文件夹右键，选择 新建组件 ，在这里可以编写组件的内容；

2、小程序自定义组件自定义事件：由于小程序提供的组件已经帮助我们封装了 click 事件，所以我们可以直接使用，但是我们自定义的组件没有封装所以不能直接在自定义的组件上使用 click 事件；

我们可以在父组件绑定一个自定义事件，然后子组件绑定 click 事件，在触发 click 的时候通过 $emit 来触发父组件绑定的自定义事件，这样就可以完成自定义组件的事件传递；

3、吸顶：主要是利用 position:sticky ,把组件定位到页面的顶部；

最后使用组件：直接在页面使用就可以了，组件名是自定义组件的文件名称；

//自定义组件 

//父组件 

2、搜索建议实现