医依通小程序项目总结

一、项目介绍：

这是一个医疗类的小程序，主要用于新冠疫苗预约，HPV疫苗预约，核酸预约，和咨询等，主要作用就是方便快捷，可以在手机上进行预约挂号，和一些健康自测的功能，还有一些医生专家讲座，分享一些疾病宣传及预防

二、项目使用技术栈：

✨脚手架工具：uniapp 和 高效、快速的 Vite

🔥前端框架：眼下最时髦的 Vue3

🍍状态管理器：vue3新秀 Pinia，犹如 react zustand般的体验，友好的api和异步处理

🏆开发语言 TypeScript

三、项目模块：

项目目录：

com-components：

文件名	页面属性
point.vue	页面没有数据，为空的时候显示该页面
st-member.vue	模态框，点击显示模态框，选择就诊人，提价数据

pages：

文件夹名	页面属性
login-page	登录授权
index	首页
registered	挂号
video	医师课堂
mine	我的
xinguan-vaccine	新冠接种疫苗接种预约
hpv-vaccine	hpv页面和详情页
hesuan-vaccine	核酸检测预约
graphics	图文咨询
phy-exam	体检套餐列表页面和体检详情页
my-service	存放的是每个页面的二级三级....页面

 my-service：

文件夹名	页面属性
hesuan	核酸预约列表
hpv-view	hpv 预约列表
my-patient	我的就诊人和添加就诊人
xinguan	新冠疫苗预约订单
phy-view	体检预约订单

public：

文件名	页面属性
request.ts	接口封装
decl-type.d.ts	类型声明文件 .d.ts文件 不能执行逻辑操作 只能用来声明 不会转化成js文件
misc.ts	上传图片的方法

四、 项目开发前期准备工作：

1、打开uniapp官网下载项目框架

 这次做的是uniapp，vue3，ts的项目，以下图片可根据需求下载，点击gitee到git码云仓库下载

2、获取Appid

重定项目Appid

打开src/manifest.json文件，微信小程序配置里，更改为你自己的小程序APPID

3，下载依赖

 npm install

 4、运行

在命令窗口输入： npm run dev:mp-weixin  ，用于解析代码转换小程序原生代码

运行完之后会生成一个dist文件夹，

 5、生成dist文件包，因为本项目用到vue3+ts语法，所以选用vs code编译器，但是不能主动调去微信开发者工具。所以手动拖动项目到微信开发者平台

五、封装接口

1、在src下创建public文件夹，在这个文件夹加下面创建request.ts文件

2、在这个页面下定义一个对象，用于接口管理，然后用export导出

3、登录授权，下载js-base64，封装一个方法用于获取本地存储的token，在请求接口request()里的header使用这个方法

//公用请求
const baseUrl = 'https://meituan.thexxdd.cn/api'

//获取token npm install -- save js-base64
import { Base64 } from 'js-base64'
import {
    Rescovidapi,
    Wxloginapi,
    Covidcancelapi,
    Hpvorder,
    Resnuataapi,
    AddPatient,
    Graphics,
    FilterData,
    PhyRes
} from "@/public/decl-type"
function getToken(): string {
    const token = uni.getStorageSync('wxuser').user_Token || ''
    //后端和前端的约定 
    const base64_token = Base64.encode(token + ':')
    return 'Basic ' + base64_token
}

//请求
function request(url: string, method: 'GET' | 'POST', data: string | object | ArrayBuffer) {
    return new Promise((resolve, reject) => {
        uni.request({
            url: baseUrl + url,
            method,
            data,
            header: {
                Authorization: getToken()
            },
            success: (res: any) => {
                if (res.statusCode == 200) {
                    resolve(res)
                } else if (res.statusCode == 401) {
                    //权限过期
                    // 没有权限访问接口:跳转到登陆界面
                    uni.navigateTo({ url: '/pages/log