uniapp小项目介绍 uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到i

介绍

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

两种开发 uni app 项目的方式

uni app 官网提供了两种创建uni app 项目的方式

使用配套的开发工具 HBuilderX，可视化的方式来创建和开发项目
使用基于 vue-cli 脚手架来创建和开发项目

vue-cli 创建 uni app 项目

全局安装脚手架
使用脚手架创建 uni app 项目
填入appid
运行编译 uni app 项目
微信开发者工具导入编译好的uni app项目

全局安装脚手架

npm install -g @vue/cli@4.5.19

查看安装版本

vue -V

使用脚手架创建 uni app 项目

打开命令行工具输入以下命令名为 my-project 的项目

vue create -p dcloudio/uni-preset-vue 项目名

填入appid

vscode项目根目录打开项目，src/manifest.json内的第57行，填入 appid

运行编译 uni app 项目

在项目根目录内输入命令，运行和编译 uniapp项目

npm run dev:mp-weixin

编译成功： 微信开发者工具导入uniapp项目

打开微信开发者工具导入uni app项目
路径是 /dist/dev/mp-weixin

看到此页面即可

注意

要记得先填入 appid再运行 uni app 项目
导入项目时，要注意导入的最后的路径是 mp-weixin

开发注意事项

1.不能在微信开发者工具中或者直接修改编译好后的代码 2.开发时，标签尽可能使用小程序的，而语法尽可能使用vue的

uniapp 目录结构

Pages.json

原生小程序中，是通过全局配置和页面配置来设定tabbar、标题、导航栏颜色和开启下拉刷新等功能。全局配置和页面配置分别是app.json、页面.json
在uniapp中，是通过 pages.json文件实现上述功能

manifest.json

修改appId

原生小程序中，假如我们想要修改appId，本质上是在 project.config.json中修改的。
但是在uniapp中，我们是需要在 manifest.json文件中修改。

新建页面

uni app 生命周期

生命周期是一堆会在特定时期执行的函数，这个特定时期贯穿了一个组件从创建到销毁的整个过程。
学会这些函数可以帮助我们更好的编写代码实现功能

在uni app 中，生命周期分为三种

应用生命周期使用小程序的规范

onLaunch

页面生命周期使用小程序的规范

onLoad， onShow等。

组件生命周期使用vue的规范

created，destroyed 等.

uniapi

介绍 uni-api指的是uni-app 针对一些微信小程序api所做的封装它解决了两个问题

原生的小程序api不支持promise形式的调用（需要自己封装）
原生的微信小程序api不支持跨平台

如 wx.request修改为 uni.request即可，改前缀
如果该方法有返回值，那么返回值是一个数组，第1项为错误信息，第2项才是想要的返回结果

项目根目录运行h5 npm run dev:h5

easycom组件引入方式

介绍

uniapp提供的方便使用组件的技术

easycom的使用步骤

必须按照固定格式创建组件 /components/组件名称/组件名称.vue
在页面中直接使用组件

命名格式

components/组件名称/组件名称.vue

uView

www.uviewui.com/ uni-app生态最优秀的UI框架大概使用步骤六步：

安装依赖
全局引入uviewjs库
全局引入uviewsass库
全局引入uview主样式库
配置easycom模式引入uview组件
使用uview组件

安装依赖

npm i uview-ui@1.8.4 sass

在 main.js 引入以下配置

import uView from "uview-ui";
Vue.use(uView);

在 uni.scss 引入主题样式文件

@import 'uview-ui/theme.scss';

引入uView基础样式 App.vue

<style lang="scss">
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "uview-ui/index.scss";
</style>

修改 pages.json

{
"easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},

// 此为本身已有的内容
"pages": [
// ......
]
}

在index.vue尝试使用补充点：重新下载npm包或者配置文件的话，最好重启服务

优购项目

创建好uniapp

上面已完成

引入uView

上面已完成

新建四个关键页面

引入tabBar

搜素uniapp官方文档tabBar

拷贝文件夹

设置底部导航样式

根据设计图更改顶部导航栏样式

首页搜索框

轮播图

详看uvView轮播图文档使用

封装网络请求

common/http.interceptor.js

导航图片

楼层数据

分类页面

分析

渲染左侧菜单

结构

获取数据

选中添加伪类

先默认第一个元素添加

右侧每个类型菜单内容的标题

根据接口获取到数据

右侧内容

添加内减模式

开发小程序需要注意的性能问题

商品列表

新建页面

跳转页面传参数

获取数据

商品列表tabs切换页

效果图

布局

数据
下面list的name表示tabs页的标签名（也就是综合销量价格）

事件

选中标签改变样式

效果图使用tabs页的属性active-color

商品列表综合数据

效果图

将获取到的商品分类数据给goods数组

渲染数据

布局

使用onReachBottom上拉加载事件

全局变量参数获得数据

如果还有下一页数据，则页码加一，然后再请求数据

合并新旧数组，防止每次请求新数据，旧数组清空

商品列表开启下拉刷新

下拉刷新生命周期

商品详情

传goods_id

接受goods_id获取数据

图片放大预览

wx.previewImage(Object object) developers.weixin.qq.com/miniprogram…

价格，名称，富文本

得到的数据不用v-for，直接渲染就好了，这里数据保存在detail，直接detail.属性名即可

当数据存在时才渲染数据页面

引入uView模板完成提交订单栏布局

找到提交订单栏

下载插件

复制样式和结构

固定订单提交栏

position: fixed; 生成绝对定位的元素，相对于浏览器窗口进行定位。

在vuex中划分购物车模块

购物车模块

在 store/index.js 引入购物车模块

在组件中使用是否可行

引入store 结果输出

mutation 来处理业务

记得加上命名空间namespaced

给加入购物车添加点击事件

点击添加增加以下数据，会被mutations中的cartAddGoods推进goodList数组中

引入辅助函数

把数据传递到Vuex中，mutation-同步、action-异步

结果

累加和

渲染到页面

购物车页面

跳转到购物车页面

购物车页面结构样式
不要直接修改Vuex的数据，违反Vuex的使用规范

换成uView源码中的value，布尔值控制其选中或者不选中因为当初点击加入购物车，存了goodList和checked和num，这时就可以用checked属性了，当时传入checked为true，也就是默认选中

Vuex中引入本地存储

存取本地存储数据

取的时候一定要判断，如果本地存储goodList没有数据，则是空数组，防止后面获取数据遍历数组会报错，undefined之类的。存储成功获取本地存储数去渲染购物车页面数据改变复选框选中状态点击购物车加减修改数量如果购物车数量等于一或等于再点击减，就弹窗提示如果goodsList有长度则显示数据，否则显示图片滑动商品滑块（uView组件）收藏和删除操作的滑块删除商品步骤：

判断当前用户点击 收藏 还是 删除 - 根据滑块中的点击事件处理函数的第二个参数判定，它是代表当前options第几个元素的下标
在事件中获取到要删除的商品的id（删除商品必须要商品id）传入商品id两种做法：第一种：在接收index 地方放商品id （:index="item.goods_id"）第二种：把事件处理函数改成匿名函数方式，传递多个参数第一种：（在接收 index 地方放入了 id）
执行删除如果index为1则是删除下标，执行删除操作，上面已经通过:index="item.goods_id"传进来了商品id

第二种（把事件处理函数改为了匿名函数方式传递多个参数）复选框全选

补充知识：

1. 小程序的本地存储

2. 小程序的style不需要加scoped，因为是一个page，不会污染到别人的page

3. null和undefined的区别

4. null和{}的区别

5. 数组findIndex()方法

findIndex() 方法返回数组中通过测试的第一个元素的索引（作为函数提供）。 findIndex() 方法对数组中存在的每个元素执行一次函数：如果找到函数返回 true 值的数组元素，则 findIndex() 返回该数组元素的索引（并且不检查剩余值）否则返回 -1 注释：

uniapp小项目

介绍