uniapp起步

uniapp起步

1.使用Git管理项目

1.2本地管理

​ 1.在项目根目录新建 .gitignore 忽略文件,配置如下

​ //运行到小程序前要编译生成，生成的文件就是dist下的文件

 /node_modules
  /unpackage/dist   
1
2

注意：此时还需要在unpackage下新建一个占位文件 .gitkeep 并没有实际意义，主要是标明要被git跟踪。

​ 2.打开终端，切换到项目根目录，运行如下命令，初始化本地仓库：

git init
1

​ 检查里面的文件状态：git status

​ 3.使用 git add . 加入到文件暂存区

​ 4.完成后进行一次本地的提交： git commit -m “init project”

​ 再次检查文件状态： git status

2.将本地的项目托管到码云上管理

创建公钥，本地会出现.ssh文件，从中可以获取公钥

ssh-keygen -t ed25519 -C "xxxxxx.com"
1

将公钥复制到码云上，得到码云的“信任”

新建仓库，更改为ssh方式，运行两行代码

与码云建立连接

git remote add origin git@gitee.com:luyaoqianwanli/wx-app.git
1

向码云推送

git push -u origin "master"
1

代码可能推送不成功或者建立连接不成功error: remote origin already exists.

执行此命令git remote -v 查看本地库是否关联了origin的远程库，如果关联成功，执行

删除关联的origin的远程库

git remote rm origin
1

再次输入关联远程库命令

git remote add origin git@github.com:(github名)/(git项目名).git

可参考黑马笔记https://www.escook.cn/docs-uni-shop/mds/1.start.html#_1-6-1-%E6%9C%AC%E5%9C%B0%E7%AE%A1%E7%90%86

2.创建tabBar一个分支

运行如下命令，基于master分支在本地创建tabBar子分支，用来开发和tabBar相关的功能

git checkout -b tabbar
1

之后查看当前分支情况，使用如下命令

git branch
1

*tabbar意思是当前处于tabbar分支

完成后，去项目中创建页面，创建完成后，需要实现tabBar效果

3.实现tabBar效果

1.将tabBar图标放到static文件夹

2.修改项目根目录中的page.json配置文件，新增tabBar的配置如下

要与pages平级

"pages":{[]}
"tabBar": {
		"list": [
			{
				"pagePath": "pages/home/home",
				"text": "首页",
				"iconPath": "static/tab_icons/home.png",
				"selectedIconPath": "static/tab_icons/home-active.png"
			},
			{
				"pagePath": "pages/cate/cate",
				"text": "分类",
				"iconPath": "static/tab_icons/cate.png",
				"selectedIconPath": "static/tab_icons/cate-active.png"
			}
			   ]
			}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

4.修改导航条的样式效果

1.打开pages.json这个全局的配置文件

2.找到 globalStyle下的

"globalStyle": {
        //修改导航条上文本颜色
		"navigationBarTextStyle": "black",
		//修改导航条上文本内容
		"navigationBarTitleText": "uni-app",
		//修改导航条背景颜色
		"navigationBarBackgroundColor": "#F8F8F8",
		//修改
		"backgroundColor": "#F8F8F8",
		//全局注册组件
		"usingComponents":{
					 "van-button": "/wxcomponents/vant/button/index",
					
		}
		
	},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

5.tabBar分支的提交与合并

1.git branch查看分支情况

2. 将本地的tabbar分支进行本地的commit提交

   git add .
   git commit -m "完成了 tabBar 的开发"
   1
   2

3. 将本地的tabbar分支推送到远程仓库进行保存

   git push -u origin tabbar
   1

   4.将本地的tabbar分支合并到本地的master分支

 先切换到master分支   git checkout master
1

 合并到master   git merge tabbar
1

此时虽然本地已经合并到master中，但是gitee上还是原来的

重新推送

git push
1

5.删除本地的tabbar分支,必须到切换到别的分支才能删除

git branch -d tabbar
1

7.创建home分支

创建home子分支

 git checkout -b home
1

8.配置网络请求

不支持axios

https://blog.csdn.net/guhanfengdu/article/details/127738906?spm=1001.2014.3001.5502

9.常用API

1.uni.showToast({})

是一个消息提示弹框

              title:'数据请求成功',
              //持续时间
				duration:5000,
			 //消息类型
				icon:'success'
1
2
3
4
5

2.navigator路由跳转

点我跳转至商品详情路径并传递参数
1

3.uni.switchTab

用于跳转到其他tabbar页面，同时关闭非tabbar页面

2.其余常用持续更新

10.配置小程序分包

优点：可减少小程序首次启动时的加载时间

在tabBar对应的页面放到主包中

非tabBar页面对应页面放到分包中

如何操作？？？

1.在项目根目录中创建分包的根目录，命名为subpkg

2.在pages.json中，和pages节点平级的位置声明subPackages节点，用来定义分包的相关结构

"subPackages": [
		{
			// 当前目录下有多少页面
			"pages": [ ],
			// 指定分包的根目录
			"root": "subpkg"
		}
	],
	
1
2
3
4
5
6
7
8
9

3.在subpkg目录上鼠标 新建页面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M4rSJugW-1668304909249)(study.assets/image-20221108203532267.png)]

pages.json中的subPackages，就会自动配置好了

11.home分支的合并与提交

1.查看分支情况

git branch   
1

2.将本地的 home 分支进行本地的 commit 提交：

git add .
git commit -m "完成了 home 首页的开发"
1
2

3.将本地的 home 分支推送到远程仓库进行保存：

git push -u origin home
1

4.将本地的 home 分支合并到本地的 master 分支：

git checkout master
git merge home
1
2

5.此时虽然本地已经合并到master中，但是gitee上还是原来的

重新推送

git push
1

6.删除本地的 home 分支：

git branch -d home
1

12.自定义组件

在根目录components目录上，鼠标右键-----新建组件-----填写组件信息后点击创建，例如组件名为my-search

就可以在某个页面中直接使用标签的形式使用

13.vuex初始化

1.根目录创建文件夹store

2.在store目录上新建js文件 store.js

3.在 store.js 中按照如下 4 个步骤初始化 Store 的实例对象：

// 1. 导入 Vue 和 Vuex
import Vue from 'vue'
import Vuex from 'vuex'

// 2. 将 Vuex 安装为 Vue 的插件
Vue.use(Vuex)

// 3. 创建 Store 的实例对象
const store = new Vuex.Store({
  // TODO：挂载 store 模块
  modules: {},
})

// 4. 向外共享 Store 的实例对象
export default store
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

4.在 main.js 中导入 store 实例对象并挂载到 Vue 的实例上：

// 1. 导入 store 的实例对象
import store from './store/store.js'

// 省略其它代码...

const app = new Vue({
  ...App,
  // 2. 将 store 挂载到 Vue 实例上
  store,
})
app.$mount()
1
2
3
4
5
6
7
8
9
10
11

14.开启命名空间

namespaced:true
1

开启命名空间后，需要挂载到模块里，modules:{}

在这里，我们可以调整模块内成员的访问路径，例如：

modules:{
 m_cart:xxxxx
}
1
2
3

//方式一：自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二：借助mapGetters读取：
...mapGetters('countAbout',['bigSum'])

1
2
3
4
5

15.获取用户基本信息

一键登录
1

methods:{
	事件名(e){
	console.log(e)  //点击后拿到了对象，包含了detail，其中包含了获取用户信息所需要的参数，在后续登录时需要使用
	}
}
1
2
3
4
5

使用uni.login()获取微信用户凭证 ——code //也是获取token中的一个参数

整理参数后，即可获取token

16.微信支付

1.创建订单

请求创建订单的api接口：把订单金额、收获地址、订单中包含的商品信息…发送给服务器

服务器响应的结果：订单编号

2.订单预支付

请求订单预支付的api接口，把（订单编号发送给服务器)

服务器响应的结果：订单预支付的参数对象，里面包含了订单支付相关的必要残水

3.发起微信支付

调用：

uni.requestPayment(参数为预支付返回的对象)
1

时刻监听uni.requestPayment（）的支付状态