uni-app2
二、路由导航
组件导航：
api
methods: {
toPage(){
// 1.保留当前页面
uni.navigateTo({
url:"../list/list"
})
}
}
接收参数
传递参数：
使用url地址传递： ？ &
接受参数：
1.使用onload生命周期函数
2.使用this.$mp.query获取参数
三、运行环境判断
(1)uni-app 可通过 process.env.NODE_ENV 判断当前环境是开发环境还是生产环境。一般用于连接测试服务器或生产服务器的动态切换。
(2)在HBuilderX 中，点击“运行”编译出来的代码是开发环境，点击“发行”编译出来的代码是生产环境
代码案例
// var baseUrl = "http://localhost:3000";
// var baseUrl = "https://api.aslegou.top";
// 生产环境 开发环境
var baseUrl;
if(process.env.NODE_ENV === "development"){
baseUrl = "http://localhost:3000"
}else{
baseUrl = "https://api.aslegou.top"
}
export default{
baseUrl
}
四、平台判断
平台判断有2种场景，一种是在编译期判断，一种是在运行期判断。
能够很好的处理多平台兼容问题。
1编译期判断 (条件编译)
语法：
代码编写完成之后，编译器进行编译； 编译期就是在编译的时候，将代码已经换分完毕；
1.只在当前平台运行的代码
注释#ifdef 平台 【H5，MP-weixin，app】
代码块
注释#endif
2.除了当前平台都运行的代码
注释#ifndef 平台
代码块
注释#endif
3.多个平台运行的代码
注释#ifdef 平台 || 平台
代码块
注释#endif
代码：
模板中使用
<button type="primary" @click="change" style="width: 70%;">{{ title }}button>
<button type="warn" @click="change" style="width: 70%;">{{ title }}button>
<button type="default">除了小程序button>
<button type="default">按钮button>
js中使用
click(){
// console.log('123')
// #ifdef H5
console.log("H5")
// #endif
// #ifdef MP-WEIXIN
console.log("微信小程序")
// #endif
},
json中使用
// #ifndef H5
{
"text":"购物车",
"pagePath":"pages/cart/cart"
},
// #endif
css中
.btn{
/* #ifdef H5 */
background-color: #4CD964;
/* #endif */
/* #ifdef MP-WEIXIN */
background-color: #F0AD4E;
/* #endif */
},
2运行期判断
判断运行环境（ios，android，windows，devtools）
代码：
// 运行期判断
click1(){
// ios 打印我是ios
// android 打印安卓
// pc
// 小程序
// console.log('1')
var platform = uni.getSystemInfoSync().platform;
// console.log(platform)
switch(platform){
case "ios":
console.log("ios运行")
break;
case "android":
console.log("android运行")
break;
case "windows":
console.log("pc运行")
break;
case "devtools":
console.log("小程序运行")
break;
}
},
五、网络请求
1数据请求
语法
uni.request({})
代码
getData(){
uni.request({
url:"http://localhost:3000/v1/goods",//服务器地址
data:{},//参数
method:"get",
header:{
"content-type":"application/json"
},
success(res){
console.log(res)
},
fail(err){
console.log(err)
}
})
}
login(){
uni.request({
url:"http://localhost:3000/v1/login",//服务器地址
data:{
user:"admin",
pass:123456
},//参数
method:"post",
header:{
"content-type":"application/json"
},
success(res){
console.log(res)
},
fail(err){
console.log(err)
}
})
},
2模块封装promise
config.js
// var baseUrl = "http://localhost:3000";
// var baseUrl = "https://api.aslegou.top";
// 生产环境 开发环境
var baseUrl;
if(process.env.NODE_ENV === "development"){
baseUrl = "http://localhost:3000"
}else{
baseUrl = "https://api.aslegou.top"
}
var version = "/v1"
export default{
baseUrl,version
}
http.js
// const config = require("./config");
// config.baseUrl = "http://localhost:3000"
import config from "./config.js"
const http = (option = {}) => {
// console.log(config.baseUrl + config.version + option.url);
// return;
// option = {url,data,method,header,timeout}
return new Promise((resove, reject) => {
wx.request({
url: config.baseUrl + config.version + option.url, //服务器地址
data: option.data || {},
method:option.method || "get", // get默认值
header: option.header || {
"content-type": "application/json"
},
timeout: option.timeout || 60000,
// success:resove,
success: (res) => {
resove(res)
},
fail:(err)=>{
reject(err)
}
})
})
}
module.exports = http;
main.js
import http from "utils/http.js";
Vue.prototype.$http = http;
页面使用
async getDataByHttp(){
// var option = {
// url:"/goods"
// }
// var res = await http(option);
// console.log(res)
// var option = {
// url:"/login",
// data:{
// user:"admin",
// pass:"123456"
// },
// method:"post"
// }
// var res = await http(option);
// console.log(res)
var option = {
url:"/login",
data:{
user:"admin",
pass:"123456"
},
method:"post"
}
var res = await this.$http(option);
console.log(res)
},
注意事项：
(1)请求的 header 中 content-type 默认为 application/json。
(2)网络请求的 超时时间 可以统一在 manifest.json 中配置 networkTimeout。
(3)H5 端本地调试需注意跨域问题
方案1：最利索的，当然还是将前端代码和后端接口部署在同域的web服务器上
方案2：由后台服务器配置策略，设为允许跨域访问。
(4)localhost、127.0.0.1等服务器地址，只能在电脑端运行，手机端连接时不能访问。请使用标准IP并保证手机能连接电脑网络
六、uView组件库
uView UI，是uni-app生态最优秀的UI框架，全面的组件和便捷的工具。
1安装
(1)安装说明
-
由于uView使用
easycom模式，让您无需引入组件即可直接使用，但是此功能需要Hbuilder X 2.5.5及以上版本才支持，详见配置easycom组件模式。easycom打包的时候是按需引入的，您可以放心引入uView的整个组件库，发布打包时会自动剔除您没有使用的组件(注意：调试时仍然是全部引入的) -
请确保您下载的Hbuilder X为
APP开发版，而非标准版，并且在"工具-插件安装"中安装了"scss/sass编译"插件 -
在uni-app插件市场右上角选择
使用HBuilder X 导入插件或者下载插件ZIP -
如果您的项目是由HBuilder X创建的标准uni-app项目，将下载后的
uview-ui文件夹，复制到项目根目录。 -
下载地址
https://ext.dcloud.net.cn/plugin?id=1593
-
将解压后的uview-ui文件夹直接复制到项目的根目录即可
2配置【下载安装方式配置】
根据路径，把整个的解压之后的文件夹，直接放入项目的根目录（注意名字问题）
（1）引入uView主JS库
在项目根目录中的main.js中，引入并使用uView的JS库，注意这两行要放在import Vue之后。
//导入ui库
import uView from "uview-ui";
Vue.use(uView);
（2）在引入uView的全局SCSS主题文件
在项目根目录的uni.scss中引入此文件。
/* uni.scss */
@import 'uview-ui/theme.scss';
（3）引入uView基础样式
在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性
（4）配置easycom组件模式
此配置需要在项目根目录的pages.json中进行。
注意事项：
uni-app为了调试性能的原因，修改easycom规则不会实时生效，配置完后，您需要重启HX或者重新编译项目才能正常使用uView的功能。
请确保您的pages.json中只有一个easycom字段，否则请自行合并多个引入规则。
代码案例
pages.json
{
"easycom": {
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},
}
3快速使用
在pages.json中配置easycom模式，在页面的魔板中，可以直接使用组件
<u-icon name="search">u-icon>
<u-search placeholder="日照香炉生紫烟" v-model="keyword">u-search>
七、工程初始化
1项目介绍
（1）界面介绍
（2）项目运行
（3）接口分析
2服务端初始化
（1）数据库初始化
1.创建数据库shop_db
2.导入数据库sql文件
3.进行接口参数的配置
shop_api项目--config--global.js 填写数据库信息 名字、密码
（2）接口运行
1.进入shop-api项目
2.执行npm install
3.npm start
（3）后台系统运行
1.进入shop-admin项目
2.执行npm install
3.npm start
3工程创建
4导入工程模板（静态页面）
5工程运行
6网络请求Promise封装
(1)配置文件config.js
(2)网络封装
(3)挂载
tips4
八、首页数据
1骨架屏
https://www.uviewui.com/components/skeleton.html 骨架屏位置
骨架屏一般用于页面在请求远程数据尚未完成时，页面用灰色块预显示本来的页面结构，给用户更好的体验。
该组件原理是通过uni的uni.createSelectorQuery接口，查询页面带有指定类名的元素的位置和尺寸， 通过绝对定位的方式，用同样尺寸的灰色块定位到相同的位置。所以要求在请求数据尚未完成时，填写一些模拟数据，才能让对应的元素有对应的尺寸和位置.
组件名称：
u-skeleton
类名要求：
u-skeleton(必须)，该类名用于页面的最外层元素，供骨架屏组件查询和定位出绘制骨架的位置和尺寸
u-skeleton-circle(可选)，该类名用于页面的圆形元素，供骨架组件描绘出圆形的骨架块
u-skeleton-rect(可选)，该类名用于页面的矩形元素，供骨架组件描绘出矩形的骨架块
u-skeleton-fillet(可选)，该类名用于页面的矩形带圆角元素，供骨架组件描绘出矩形带圆角的骨架块
组件API：
Props
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| el-color | 骨架块状元素的背景颜色 | String | #e5e5e5 | - |
| bg-color | 骨架组件背景颜色 | String | #ffffff | - |
| animation | 骨架块是否显示动画效果 | Boolean | false | true |
| border-radius | u-skeleton-fillet类名元素，对应的骨架块的圆角大小，单位rpx |
String | Number | 10 | - |
| loading | 是否显示骨架组件，请求完成后，将此值设置为false |
Boolean | true | false |
2商品分类快速导航
组件：u-tabs
接口
http://localhost:3000/api/getcate
获取数据
// 1.获取一级分类信息
async getFirstCates(){
var option = {
url:"/getcate",
}
var res = await this.$http(option)
// console.log(res)
this.firstCates = res.data.list;
}
导航切换
// 2.点击一级分类，进入商品列表页面
toGoodListPage(index){
// console.log(index)
this.firstCateIndex = index;
uni.navigateTo({
url:"../goodlist/goodlist"
})
},
3商品活动banner
https://www.uviewui.com/components/swiper.html 组件地址
组件： u-swiper
接口
http://localhost:3000/api/getbanner
获取数据、图片路径
// 3.获取轮播图信息
async getBanners(){
var option = {
url:"/getbanner",
}
var res = await this.$http(option)
// console.log(res)
// 处理图片路径问题
res.data.list.map((item,index)=>{
res.data.list[index].img = this.$config.baseUrl +item.img
})
this.bannerlist = res.data.list
},
点击活动图片，进行活动页面
// 4.点击轮播图，跳转到活动界面
toActivePage(){
uni.navigateTo({
url:"../active/active"
})
},
4商品秒杀活动
https://www.uviewui.com/components/countDown.html 组件地址
组件： u-count-down
- 通过
timestamp参数设置倒计时间，单位为秒
接口
http://localhost:3000/api/getseckill
获取数据/实现倒计时
// 5.获取秒杀活动信息
async getSeckill(){
var option = {
url:"/getseckill"
}
var res = await this.$http(option)
this.obj = res.data.list[0];
// console.log(res)
this.actionTime(this.obj)
},
封装方法
// 7.处理时间
actionTime(obj){
var ntime = new Date().getTime() / 1000; //秒
var btime = obj.begintime / 1000// 秒
var etime = obj.endtime / 1000;
// 1.如果当前时间 < 活动开始的时间
// btime - ntime 活动开始
if(ntime < btime){
this.timestamp = btime - ntime;
this.activeName ="距离活动开始"
}else if(ntime >= btime && ntime < etime ){
// 2.如果当前时间 >= 活动开始时间 && 当前时间 < 活动结束时间
// etime - ntime 活动进行中
this.timestamp = etime - ntime;
this.activeName ="活动进行中"
}else{
// 3 如果当前时间 >= 活动结束时间
// 活动结束
this.activeName ="活动结束"
}
},
倒计时完成
当前组件自带的end方法触发的函数 @end=“countDownEnd”
// 6.倒计时为0的时候触发
countDownEnd(){
// console.log('0')
this.actionTime(this.obj)
},