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

企业开发 2023-05-17 03:22:43 阅读次数: 0

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

新建一个uniapp项目，并加入基础化建设

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

之后运行以下命令

cd my-vue3-project
npm i 
npm run dev:h5

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

2.下载HBuilderX

官网下载安装即可：https://uniapp.dcloud.net.cn/quickstart-hx.html
image.png
将刚才创建好的项目直接拖到HBuilderX中,然后点击 ”运行-运行到浏览器-chrome“即可启动项目
image.png
如果有报错，则需要去配置一下谷歌浏览器的启动程序的路径,点击 ”运行-运行到浏览器-配置web服务器“
在下面这里填上谷歌浏览器的exe的路径就ok了。
image.png

3.下载微信开发者工具

官方下载网址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
image.png
下载好了之后，使用hbuilder来运行”运行-运行到小程序模拟器-微信开发者工具(第一个)“
image.png
首次运行，会让你配基础的路径，但是选不到exe。所以我们点击关闭，然后点击”运行-运行到小程序模拟器-运行设置“
image.png
将exe的启动路径填入。
image.png
此时再次运行，依然会报错，我们需要到微信开发者工具中设置一下
image.png
打开微信小程序开发者工具，点击右上角设置-安全设置-服务端口（主要是让hbuilder能调用微信小程序的桌面端）
image.png
image.png
此时我们再次运行，就能看到hbuilder主动打开了微信开发者工具，能很好的看到我们的项目预览情况。
image.png

4.如何开发更加便捷？

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

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

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

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

a.运行 npm run dev:mp-weixin,会生成一个dist文件夹，将map-weixin文件夹用微信开发者工具打开。
image.png
将map-weixin文件夹用微信开发者工具打开
image.png
image.png
注意这里要用自己的appID（下一步就教你怎么获取）：
此时修改vscode中的代码，微信开发者工具也会跟着热更新。此时也要注意，运行npm run dev:mp-weixin的窗口不能关闭，否则微信开发者工具不会热更新。
image.png
下次关闭了再打开的时候运行命令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了。
image.png
设置小程序名称和介绍之类的
https://mp.weixin.qq.com/wxamp/basicprofile/index?token=245343287&lang=zh_CN
image.png
管理-成员管理中可以添加人员一起开发
image.png

6.生成git仓库

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

7.配置别名

不需要进行配置，直接使用@即可。但是在导入时会有波浪线，
image.png
那是因为uniapp没有帮我们做省略后缀（extensions）的操作，我们需要把完整路径写上才不会有波浪线
image.png

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

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

VITE_APP_URL = http://47.106.228.28:1337

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

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开头的路径为空（将请求前缀删除）
      },
    },
}

image.png

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"
    }
	],

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

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

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

<style>
</style>

image.png

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/[email protected]",
        "selectedIconPath": "static/tabs/[email protected]",
        "text": "首页"
      },
      {
    
    
        "pagePath": "pages/course/index",
        "iconPath": "static/tabs/[email protected]",
        "selectedIconPath": "static/tabs/[email protected]",
        "text": "课程"
      },
      {
    
    
        "pagePath": "pages/study/index",
        "iconPath": "static/tabs/[email protected]",
        "selectedIconPath": "static/tabs/[email protected]",
        "text": "学习"
      },
      {
    
    
        "pagePath": "pages/my/index",
        "iconPath": "static/tabs/[email protected]",
        "selectedIconPath": "static/tabs/[email protected]",
        "text": "我的"
      }
    ]
  },

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

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

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

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

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

12.加入less

安装依赖即可使用

npm i less less-loader -D

image.png
image.png

13.加入状态管理器pinia

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

npm install pinia

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++;
		},
	},
});

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
  }
}

d.在页面中使用:
image.png

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}

image.png
如何使用接口?如下图:
get请求:
image.png
post请求：
image.png

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目录
image.png
2.安装依赖，并将组件复制到我们的组件文件夹中

npm i @vant/weapp -S --production

安装完成后在项目根目录node_modules中找到@vant或者vant-weapp，找到dist目录,将里面所有组件复制到刚才创建的vant文件夹下。
image.png
image.png
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"
    }
	}

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

{
    
    
			"path": "pages/index/index",
			"style": {
    
    
				"navigationBarTitleText": "大数据",
        "usingComponents": {
    
    
          "van-cell": "/wxcomponents/vant/cell/index",
          "van-cell-group": "/wxcomponents/vant/cell-group/index"
        }
			}
		}

image.png

16.路由跳转：

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

uni.navigateTo用的比较多

跳转示例：
image.png

17.生命周期：

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

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

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用的最多，一般用来发送请求，以及接受上个页面传递的数据。

image.png
使用：

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

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

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

18.本地存储

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

19.处理官方demo的ts报错

1.tsconfig.json的报错
image.png
根据报错内容，加入：

 "ignoreDeprecations":"5.0",

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

20.登录流程

image.png
其实看这个图还是很容易懂的，大致就是
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，否则无法打开授权弹框，大家在开发时要注意。
image.png

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.点击微信开发者工具的上传按钮，再次确认版本信息，填写版本号和项目备注
image.png
b.上传完成之后，登录小程序后台，进入版本管理，提交审核

其他：

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

猜你喜欢

转载自blog.csdn.net/weixin_43239880/article/details/130417030
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
NEFU 117 素数个数的位数
Closest Common Ancestors (Lca,tarjan)
ELK部署
【转载】Hive笔记整理（三）
SQL语句（一）基本表的定义
关于Java web开发中的MySQL的事务语句
MFC创建自定义窗体
如何用一句话激怒程序员？
《逆袭大学》文摘——9.4 基础和应用的平衡中找到大学的节奏
【spring源码分析】@Value注解原理
每日归档
更多
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022