uniapp模板：新建一个uniapp项目，并加入基础化建设,uniapp开发全流程_uni模板

写作背景：许久没开发小程序了，加上it升级迭代的有点快，很多都忘了。趁着公司有这个需求，重新熟悉一下整个的过程。整体技术栈：uniapp+vite+vue3+pinia+less+vant-weapp

1.通过vue-cli创建一个uniapp项目

tips:官网有两种创建项目的方法：1. 通过 HBuilderX 可视化界面 2. 通过vue-cli命令行 。除了a.创建出来的项目目录不一致，b.vue-cli创建的项目可用其他编辑器打开进行开发,其它两者都是一样的。 这里我们选用通过vue-cli命令行的方式来创建。原因是比较熟悉vue项目的目录编排方式。而且想用vscode开发（比较熟悉）。
cli创建项目参考官网：https://uniapp.dcloud.net.cn/quickstart-cli.html
使用下面的命令来创建一个vite+ts的uniapp项目，选择默认模板即可。如命令行创建失败，请直接访问 gitee 下载模板

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
1

之后运行以下命令

cd my-vue3-project
npm i 
npm run dev:h5
1
2
3

运行之后即可在浏览器看到页面

2.下载HBuilderX

官网下载安装即可：https://uniapp.dcloud.net.cn/quickstart-hx.html

将刚才创建好的项目直接拖到HBuilderX中,然后点击 ”运行-运行到浏览器-chrome“即可启动项目

如果有报错，则需要去配置一下谷歌浏览器的启动程序的路径,点击 ”运行-运行到浏览器-配置web服务器“
在下面这里填上谷歌浏览器的exe的路径就ok了。

3.下载微信开发者工具

官方下载网址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

下载好了之后，使用hbuilder来运行”运行-运行到小程序模拟器-微信开发者工具(第一个)“

首次运行，会让你配基础的路径，但是选不到exe。所以我们点击关闭，然后点击”运行-运行到小程序模拟器-运行设置“

将exe的启动路径填入。

此时再次运行，依然会报错，我们需要到微信开发者工具中设置一下

打开微信小程序开发者工具，点击右上角设置-安全设置-服务端口（主要是让hbuilder能调用微信小程序的桌面端）


此时我们再次运行，就能看到hbuilder主动打开了微信开发者工具，能很好的看到我们的项目预览情况。

4.如何开发更加便捷？

开发uniapp可以使用以下两种方法之一就行，相对来说还是比较方便的

1.hbuilder+微信开发者工具进行开发+uniapp官网api

将创建好的项目拉到hbuilder编辑器中，然后点击”运行-运行到小程序模拟器-微信开发者工具(第一个)“，就会将微信开发者工具启动。然后你在hbuilder编辑器中进行开发，微信开发者工具就能同步变更代码。注意hbuilder下方运行的窗口不要关闭，否则hbuilder修改的代码不会同步到微信开发者工具中。

2.vscode+微信开发者工具进行开发+uniapp官网api

a.运行 npm run dev:mp-weixin,会生成一个dist文件夹，将map-weixin文件夹用微信开发者工具打开。

将map-weixin文件夹用微信开发者工具打开


注意这里要用自己的appID（下一步就教你怎么获取）：
此时修改vscode中的代码，微信开发者工具也会跟着热更新。此时也要注意，运行npm run dev:mp-weixin的窗口不能关闭，否则微信开发者工具不会热更新。

下次关闭了再打开的时候运行命令npm run dev:mp-weixin，然后打开微信开发者工具中的项目就行了。

5.申请appid和设置小程序

申请微信小程序appid
官方申请步骤流程：https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/getstart.html#
官方注册地址：https://mp.weixin.qq.com/wxopen/waregister?action=step1
申请小程序帐号之后，去开通成为开发者,然后再开发中的开发管理中就有appid了。

设置小程序名称和介绍之类的
https://mp.weixin.qq.com/wxamp/basicprofile/index?token=245343287&lang=zh_CN

管理-成员管理中可以添加人员一起开发

6.生成git仓库

由于这里生成的没有git仓库，所以我们git init来生成一个仓库。然后git add . ，git commit- m"初次提交" 来进行初次提交。

7.配置别名

不需要进行配置，直接使用@即可。但是在导入时会有波浪线，

那是因为uniapp没有帮我们做省略后缀（extensions）的操作，我们需要把完整路径写上才不会有波浪线

8.区分生产环境和开发环境

在src同级目录建立两个文件，定义变量VITE_APP_URL（注意要以VITE_开头）
.env.production文件 .env.development 文件

VITE_APP_URL = http://47.106.228.28:1337
1

如何使用该变量？使用import.meta.env.VITE_APP_URL来调用

9.配置代理

因为我这边是通过cli创建的项目，所以可以直接在vite.config.ts中配置即可。
在vite.config.ts中添加:

// 样例
server: {
     proxy: {
      "/api": {
        //'/api'是自行设置的请求前缀
        target: "http://localhost:5000",
        changeOrigin: true, //用于控制请求头中的host值
        rewrite: (path) => path.replace(/^\/api/, ""), //路径重写，（正则）匹配以api开头的路径为空（将请求前缀删除）
      },
    },
}
1
2
3
4
5
6
7
8
9
10
11

10.建立路由

参考官网：https://uniapp.dcloud.net.cn/collocation/pages.html#
在pages.json中写入以下代码加入路由：

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "大数据"
			}
		},
    {
      "path": "pages/home/index"
    },
    {
      "path": "pages/course/index"
    },
    {
      "path": "pages/study/index"
    },
    {
      "path": "pages/my/index"
    }
	],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

并在pages页面中建立相应的对应文件：

<template>
  <view class="my">
    我的
  </view>
</template>

<script setup lang="ts">
</script>

<style>
</style>

1
2
3
4
5
6
7
8
9
10
11
12

11.自定义底部菜单栏tabbar

在pages.json中写入以下代码配置tabbar(可配可不配，看自己项目的实际情况有没有tabbar)。。iconPath和selectedIconPath是图片，这里我就不放上来了，大家可以用自己的图片地址。或者不要这两个属性也可以

"tabBar": {
    "selectedColor": "#ff9a2c",
    "color": "#b7b7b7",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/home/index",
        "iconPath": "static/tabs/icon_home@2x.png",
        "selectedIconPath": "static/tabs/icon_home_selected@2x.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/course/index",
        "iconPath": "static/tabs/icon_course@2x.png",
        "selectedIconPath": "static/tabs/icon_course_selected@2x.png",
        "text": "课程"
      },
      {
        "pagePath": "pages/study/index",
        "iconPath": "static/tabs/icon_study@2x.png",
        "selectedIconPath": "static/tabs/icon_study_selected@2x.png",
        "text": "学习"
      },
      {
        "pagePath": "pages/my/index",
        "iconPath": "static/tabs/icon_my@2x.png",
        "selectedIconPath": "static/tabs/icon_my_selected@2x.png",
        "text": "我的"
      }
    ]
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

最终我们能看到我们的index页面,但是没看到我们的tabbar

如何在微信开发者工具中进行跳转路由?

但是我们发现却跳转不到home页面，**那么如何在微信开发者工具中进行跳转路由?**我我们点击普通编译-添加编译模式，把我们想要跳转的路由加入进去就Ok了。

如何在打开微信开发者工具中默认就打开某个页面?

在vscode或hbuilder中修改pages.json中把该页面放在第一个就ok了。参考：//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages

12.加入less

安装依赖即可使用

npm i less less-loader -D
1

13.加入状态管理器pinia

参考官网：https://uniapp.dcloud.net.cn/tutorial/vue3-pinia.html
a.添加依赖:

npm install pinia
1

b.在pages同级目录建立stores文件夹，在该文件夹下建立counter.ts，编写以下代码：

// stores/counter.js
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
	state: () => {
		return { count: 0 };
	},
	// 也可以这样定义
	// state: () => ({ count: 0 })
	actions: {
		increment() {
			this.count++;
		},
	},
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

c.在main.ts中导入使用：

import { createSSRApp } from 'vue'
import App from './App.vue'
import * as Pinia from 'pinia';
export function createApp() {
  const app = createSSRApp(App)
  app.use(Pinia.createPinia());
  return {
    app,
    Pinia
  }
}

1
2
3
4
5
6
7
8
9
10
11
12

d.在页面中使用:

14.封装请求方法

不需要安装axios，直接使用uni.request的来请求就可以。 在src目录下建立utils目录，在其下面建立request.ts文件，加入以下封装代码:

// const BASEURL = 'http://localhost:3000/api/'
const BASEURL = "http://192.168.1.182:21888/police"

const request = ({ url, data = {}, header = {}, method = "GET" }:any) => {
  return new Promise((resolve, reject) => {
    const token = uni.getStorageSync("token")
    if (token) {
      header.Authorization = token
    }

    uni.showLoading({
      title: "拼命加载中...",
    })

    // 异步操作
    uni.request({
      url: `${BASEURL}${url}`, //仅为示例，并非真实接口地址。
      method,
      data: data,
      header: header,
      success: (res) => {
        resolve(res.data)
      },
      fail: (err) => {
        reject(err)
      },
      complete: () => {
        uni.hideLoading()
      },
    })
  })
}

export {request}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

如何使用接口?如下图:
get请求:

post请求：

15.加入ui组件库vant-weapp(使用：uniapp原生+vant)

uniapp原生：无需安装，直接根据文档使用

原生组件官网：https://uniapp.dcloud.net.cn/component/
uniapp的主要组件说明：
view组件：类似于h5的div标签
image组件：类似于h5的img标签
text组件：类似于h5的span标签,文字组件
swiper:轮播图组件
button组件：https://uniapp.dcloud.net.cn/component/button.html# （非常重要，一般用于打开授权窗口，使用open-type和@事件名相配合。）

加入第三方vant-weapp组件

如果加入？参考：https://juejin.cn/post/6942451973484445710#heading-1
如何使用？参考：https://vant-contrib.gitee.io/vant-weapp/#/quickstart
1.在项目的src目录下创建目录wxcomponents，再在该目录下创建vant目录

2.安装依赖，并将组件复制到我们的组件文件夹中

npm i @vant/weapp -S --production
1

安装完成后在项目根目录node_modules中找到@vant或者vant-weapp，找到dist目录,将里面所有组件复制到刚才创建的vant文件夹下。


3.在页面/全局中注册组件：
找到pages.json，在globalStyle或者具体page的style中引入Vant的组件。如果需要全局使用该组件，可以在globalStyle中usingComponents中全局引入。
a.全局引用：

"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "大数据",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
    "usingComponents": {
      "van-button": "/wxcomponents/vant/button/index"
    }
	}
1
2
3
4
5
6
7
8
9

b.页面引用(只能在该页面下使用)：

{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "大数据",
        "usingComponents": {
          "van-cell": "/wxcomponents/vant/cell/index",
          "van-cell-group": "/wxcomponents/vant/cell-group/index"
        }
			}
		}
1
2
3
4
5
6
7
8
9
10

16.路由跳转：

参考官网：https://uniapp.dcloud.net.cn/api/router.html#navigateto
uniapp的路由跳转需要使用uniapp官网的跳转方式，而不是使用vue-router的方式，我们在项目里也没有vue-router。大家需要注意下。

uni.navigateTo用的比较多

跳转示例：

17.生命周期：

a.应用生命周期：https://uniapp.dcloud.net.cn/collocation/App.html

使用参考（vue3）:https://uniapp.dcloud.net.cn/tutorial/vue3-composition-api.html
解释：应用生命周期就是对于整个uni进行操作的生命周期，对于这个生命周期一般都是在App.vue当中操作。。（用的比较少）

b.页面生命周期：https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle

说明：需要在page.json配置的.vue文件中才可使用
使用参考（vue3）:https://uniapp.dcloud.net.cn/tutorial/vue3-composition-api.html

onLoad用的最多，一般用来发送请求，以及接受上个页面传递的数据。

使用：

import { onLoad } from '@dcloudio/uni-app'
onLoad(() => {})
1
2

c.组件生命周期：https://uniapp.dcloud.net.cn/tutorial/page.html#componentlifecycle

说明：在所有的.vue文件中都可使用

18.本地存储

参考：https://uniapp.dcloud.net.cn/api/storage/storage.html#setstoragesync
本地存储也不能使用 window.localStorage.setItem了。需要用uniapp中内存的数据缓存

使用示例：
存：

取：

19.处理官方demo的ts报错

1.tsconfig.json的报错

根据报错内容，加入：

 "ignoreDeprecations":"5.0",
1

2.json文件报错，把这些注释去掉就行

20.登录流程

其实看这个图还是很容易懂的，大致就是
a.前端调用login接口（不需要用户确认或授权）会返回一个code给我们，
b.然后我们用请求a把这个code给到后台。
c.后台把code、appid还有appsecret这三个东西去请求微信第三方的api置换openid，session_key。后台会通过openid和session_key生成一个token。然后后台生成了token通过请求a把token返回给我们了。
d.我们把返回的oken存储到本地，以及在请求头这里带上token，往后的每次请求都有token
e.后台收到前端的请求，去校验这个token的状态，如果是好的，那么就返回业务数据。
官方的程序登陆解释：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html
不懂的参考这篇博客：https://blog.csdn.net/weixin_57677300/article/details/129644693?spm=1001.2014.3001.5506

21.授权获取用户信息问题

目前uni.getUserProfile 和 getuserinfo均无法获取用户昵称和头像（已废弃,，关于这个api微信嘎嘎能改，我找了很久才在公告里发现了，哭死。很多小程序都摆烂不要微信的昵称和头像了，大家玩小程序的时候可以看看），原因请看：这里。现在都需要用户自己填写，如官方文档。
另外使用手机号登录不能是个人开发者appid，否则无法打开授权弹框，大家在开发时要注意。

22.基础开发

基本上你理解了上面的内容，解决了一切的问题，下面就是进入了基础的开发阶段，其中很简单，大家基本上都知道怎么开发。但你等你咔咔一吨开发之后，发现诶，无法发布，原因是因为代码体积太大了，接下来你就需要进行分包了。

22.分包

小程序要求压缩包体积不能大于2M,否则无法发布 实际开发中小程序体积如果大于2M就需要使用分包机制进行发布上传，分包后可解决2M限制，体积可达20m
微信小程序分包嘎嘎简单，看官网就行：https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html
uniapp分包参考这篇文章，写的蛮详细的：https://juejin.cn/post/7018108969302360095#comment

23.小程序发布：

a.点击微信开发者工具的上传按钮，再次确认版本信息，填写版本号和项目备注

b.上传完成之后，登录小程序后台，进入版本管理，提交审核

其他：

项目模板地址:https://github.com/rui-rui-an/uniapp_vue3_vite