aqsc-mobile-com

v0.0.4

Published

4 months ago

基于uni-ui实现的二次封装

Downloads

0High
0Medium
0Low

haoxie

vue3 uni-ui

安全生产移动应用

技术栈：vue3 + vite + pinia + uni-ui

Node版本 >=16.14.0，建议使用`16.19.1`

可使用nvm管理node版本，方便老项目维护

全局安装pnpm: `npm install [email protected] -g`

✔️需要使用 pnpm命令来启动项目和管理npm包 ❌禁止使用 npm来管理包

安装依赖：pnpm install pnpm install --registry=http://10.244.130.144:8082/repository/npm/

启动项目：pnpm dev:h5

添加依赖：pnpm add XXX pnpm add XXX -D

删除依赖：pnpm remove XXX

开发注意事项

css 单位使用rpx，不使用px，蓝湖设计图 -> 选择开发平台 -> 微信小程序
项目引入并使用了AutoImport，所以vue相关的变量不需要引入和声明
接口请求方式只允许大写GET和POST，其他会有平台兼容问题

husky 验证 git 提交规范

⚠️项目安装完依赖后会自动初始化husky，也可以手动运行pnpm prepare初始化，git提交信息需以以下一条 英文+冒号+空格 开头对于Linux和Mac系统中，可能出现因为没有将钩子 '.husky/pre-commit' 设置为可执行钩子被忽略。的错误。这是因为当前的文件没有执行权限，只需要执行chmod +x .husky/pre-commit和chmod +x .husky/commit-msg更改文件为可执行即可。

build: 📦编译相关的修改，例如发布版本、对项目构建或者依赖的改动

chore: 🚀其他修改, 比如改变构建流程、或者增加依赖库、工具等

ci: 👷持续集成修改

docs: ✏️文档修改

feat: ✨新特性、新功能

fix: 🐛修改 bug

perf: ⚡优化相关，比如提升性能、体验

refactor: ♻️代码重构

revert: ⏪回滚到上一个版本

style: 💄代码格式修改, 注意不是 css 修改

test: ✅测试用例修改

使用`iconfont`字体图标库

邀请链接，失效请单独联系获取

不支持 `IE11`以下

培训内容（方便快速上手和一些代码规范）

vue

为提高代码的易读性、简洁性，规范代码内容书写，建议按照下面页面顺序书写代码

<template>
  <view>
    <view>div</view>
    <text>span</text>
    <image src="img" />
    <text class="iconfont icon-arrow-right self-style"></text> // iconfont字体图标
    // 其他uni内置组件和uni-ui扩展组件均为自动引入，直接使用，无需手动引入
  </view>
</template>

<script setup> // setup语法糖不能少，否则需要将变量导出后，template才可用
import XXX from 'XXX'
import { onReady } from '@dcloudio/uni-app' // uni-app页面周期
import { throttle } from 'lodash' // 工具库，提供了防抖，节流，deepClone等方法
import dayjs from 'dayjs' // 时间操作的工具库
import { useUserStore } from '@/store/modules/user'

const userStore = useUserStore() // pinia store固定用法

const { proxy } = getCurrentInstance() // vue示例，相当于vue2页面中的this

// 组件传值接收
const props = defineProps({
  // 多少毫秒移动1像素
  speed: {
    type: Number,
    default: 100,
  },
})

let a = ref(1) // Number Boolean String Array Object

const b = ref([]) // 建议所有类型都通过ref来定义

const c = reactive([]) // 只可以定义 Array Object

// toRef 和 toRefs 感兴趣可自行了解

const isHundred = computed(() => props.speed === 100 ? true : false)

function demo() {
  a.value = 2 // 易错，需要注意
  b.value.push(1)
  c.push(1)
}

// watch 和 watchEffect 感兴趣可自行了解
watch(() => {})
watchEffect(() => {})

// ---------------------- vue 提供 ----------------------
// 组件挂载前
onBeforeMount(() => {})
// 组件挂载完成
onMounted(() => {})
// 组件卸载之前
onBeforeUnmount(() => {})
// 组件卸载完成
onUnmounted(() => {})
// 数据更新前
onBeforeUpdate(() => {})
// 数据更新后
onUpdated(() => {})

// ---------------------- uni-app提供 ----------------------
// 页面周期函数--监听页面加载 类比 vue2 created
onLoad(() => {})
// 页面周期函数--监听页面初次渲染完成 类比 vue2 mounted
onReady(() => {})
// 页面周期函数--监听页面显示(not-nvue)
onShow(() => {})
// 页面周期函数--监听页面隐藏
onHide(() => {})
// 页面周期函数--监听页面卸载
onUnload(() => {})
// 页面处理函数--监听用户下拉动作
// onPullDownRefresh(() => { uni.stopPullDownRefresh() })
// 页面处理函数--监听用户上拉触底
// onReachBottom(() => {})
// 页面处理函数--监听页面滚动(not-nvue)
// onPageScroll((event) => {})
// 页面处理函数--用户点击右上角分享
// onShareAppMessage((options) => {})

// 页面生命周期仅在page页面有效，而单独封装的组件中【页面周期无效】，但是Vue的生命周期依然有效 【Vue的生命周期在任何地方都是有效的】

// 组件要暴漏出去的方法，暴漏后通过父组件$ref才可以调用
defineExpose({
  demo,
})

</script>

<style lang="scss" scoped>
  // src/uni.scss 中定义的变量会自动注入，每个页面都可使用这些变量

  // 全局变量的使用 --window-top 和 --window-bottom
  padding-top: calc(var(--window-top) + 372rpx);
  padding-bottom: var(--window-bottom);
</style>

页面跳转

uni.navigateTo() 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
uni.redirectTo() 关闭当前页面，跳转到应用内的某个页面。
uni.reLaunch() 关闭所有页面，打开到应用内的某个页面。
uni.switchTab() 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。跳转tabBar页面时只能用switchTab，使用navigateTo跳不过去

页面模块定义

页面需要在src/pages.json的pages数组中定义，记住path路径
登录PC端，在系统配置/权限管理/模块管理的对应模块功能中配置移动端链接地址为 '/' + path

常用功能参考示例

分页列表加载（页面触底加载下一页）参考功能：我的/版本更新(代码地址：src/pages/main/personal/version.vue)
表单提交以及验证参考功能：我的/修改密码(代码地址：src/pages/main/personal/password.vue)
图片上传参考功能：我的/基本信息点击头像上传(代码地址：src/pages/main/personal/info.vue)

IHN+扫一扫帮助说明

安生移动应用基于IHN+扫一扫二维码实现原理

应用外部调用

IHN+扫码会根据二维码url跳转对应功能页面，同时校验url中域名是否可信，页面收到请求后验证必要参数，同时追加自动登录信息后跳转autologin页面，登录验证通过后根据配置的跳转path访问最终功能数据；

应用内部调用

调用IHN+JSSDK的wx.scanQRCode()方法，方法会返回识别的url字符串，内部应用根据url的参数判断进行定向跳转即可；
具体方法参照https://hncoact.chng.com.cn:10443/api/doc#18019
说明：安卓版本返回与API有些许出入，开发时请根据API实际返回进行处理；

1、生成二维码说明

以外包工器具二维码为例：
生成的二维码内容（url字符串）为： String qrContent = mobileUrl + "#/pages/main/a?g=" + gqjid;
其中：mobiuleUrl为常量配置里面的MOBILE_SERVICE_URL；（获取常量时注意最后是否有“/”，没有则需要手动添加，保证url正常）
#/pages/main/a? 为固定值；
g为标识位，各模块实际开发时需与陈勇成确认标识，避免出现重复；
gqjid为需要查询的工器具数据主键； \

2、移动端扫码说明

1)提供上述1中的标识字段；
2)提供扫码跳转业务的路径，即移动前端代码中pages.json的path;
3)业务功能页面实现参数接收、展示、返回等功能；
其中1）2）提交给陈勇成；3）自行实现。

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme