微信小程序使用uni-app开发小程序及部分功能实现详解心得

目录

一、uni-app

1、简介

2、开发工具

3、新建 uni-app项目

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

二、实现tabBar效果

1、创建tabBar页面

2、配置tabBar

1、创建分包目录

2、在 pages.json 文件中配置

3、创建分包页面

四、公用方法封装

五、搜索功能

1、搜索组件

2、搜索建议实现

3、本地存储

4、过滤器

六、上拉加载、下拉刷新

1、上拉加载

2、下拉刷新

七、登录

1、获取用户基本信息

2、获取用户登录凭证 code

八、支付

1、请求头添加 token

2、微信支付流程

其他

总结

---

一、uni-app

官网：uni-app官网

1、简介

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

2、开发工具

uni-app 推荐使用 Hbuilderx 开发工具来开发项目，下载地址：HBuilderX-高效极客技巧或者点击这里下载，下载 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"