当前位置： 首页 > wzjs >正文

北京设计公司名称北京网站优化价格

wzjs 2025/7/20 8:24:26
北京设计公司名称,北京网站优化价格,郓城建设局网站,天津建设厅网站目录相关 static文件 编译器会把static目录中的内容整体复制到最终编译包内， 非 static 目录下的文件（vue组件、js、css 等）只有被引用时，才会被打包编译。 css、less/scss 等资源不要放在 static 目录下，建议这些…

目录相关

static文件

编译器会把static目录中的内容整体复制到最终编译包内，

非 static 目录下的文件（vue组件、js、css 等）只有被引用时，才会被打包编译。

css、less/scss 等资源不要放在 static 目录下，建议这些公用的资源放在自建的 common 目录下。

注意控制static目录的大小，太大的static目录和太多文件，会造成App安装后第一次启动变慢。

manifest应用配置

配置微信小程序的appid等，以及打包时的一些配置。

components文件

局部组件引入

在根目录下建立components文件夹，在文件夹里创建局部组件，在对应的页面组件内引入即可

注意：components下是组件文件夹，组件文件夹的名称与组件名称一致

路由相关

添加路由

页面创建完成后，需要在pages.json文件内添加文件路径，否则将无法访问相应页面

路由传参

路由传递的参数要从uniapp中的页面生命周期函数-onload内获取，不能在组件生命周期onMounted内获取

<template><view class="">姓名：{{name}} - {{age}}<scroll-view scroll-y="true" ref="scroll"><view></view></scroll-view><navigator url="/pages/demo5/demo5">跳转demo5</navigator><view>----</view><view>计数：{{count}}</view><view>----</view><navigator open-type="reLaunch" url="/pages/demo4/demo4">demo4页面</navigator><view v-for="item in 50">{{item}}</view><view class="fixed" v-if="fixed">↑</view></view>
</template><script setup>
import {onBeforeMount, onMounted, ref, getCurrentInstance} from "vue"
import {onLoad,onReady,onShow,onHide,onUnload,onPageScroll} from "@dcloudio/uni-app"
const name = ref("张三")
const age = ref(18)
const scroll = ref(null)
const count = ref(0)
const fixed = ref(false);let time= setInterval(()=>{count.value++
},50)onLoad((e)=>{	console.log("onload函数");	console.log(e);name.value = e.nameage.value = e.age
})onShow(()=>{console.log("onShow函数");time= setInterval(()=>{count.value++},50)
})onHide(()=>{console.log("onHide函数");clearInterval(time)
})onReady((e)=>{	console.log("onReady函数");
})onBeforeMount(()=>{console.log("onBeforeMount函数");
})onMounted(()=>{console.log("onMounted函数");const instance = getCurrentInstance();// const query = instance.route.query;console.log("onMounted函数-query", instance);})onUnload(()=>{console.log("onUnload卸载页面");
})onPageScroll((e)=>{console.log(e.scrollTop);	fixed.value = e.scrollTop>200})</script><style lang="scss" scoped>
.fixed{width: 100px;height: 100px;background: orange;position: fixed;right:30px;bottom:30px;
}
</style>

CSS相关

rpx

rpx 即响应式 px，一种根据屏幕宽度自适应的动态单位。以 750 宽的屏幕为基准，750rpx 恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大，但在 App（vue2 不含 nvue） 端和 H5（vue2） 端屏幕宽度达到 960px 时，默认将按照 375px 的屏幕宽度进行计算，具体配置参考：rpx 计算配置 。

UI在做设计稿时，宽度最好按750px像素做，这样，当UI设计稿的宽度是1px的时候，我们在写CSS样式时就用1rpx就好了，省去换算的问题。

底部安全区域css环境变量

避免底部区域遮挡相关功能

padding-bottom: env(safe-area-inset-bottom);

设置通用样式

不放在Static文件加内，是因为，Static文件内的文件会被打包进去，放在common下的文件，只有引入才会被打包进去，并将样式文件在App.vue文件内引入。

view,swiper,swiper-item{box-sizing: border-box;
}.pageBg{background: linear-gradient(to bottom,transparent,#fff 400rpx),linear-gradient(to right,#beecd8 20%,#F4E2D8);min-height: 80vh;
}.loadingLayout{padding:30rpx 0;
}.safe-area-inset-bottom{height: env(safe-area-inset-bottom);
}

定义颜色变量

uni.scss文件定义uni-app内置的常用样式变量，common下的文件下定义的自定义变量在此文件内引入就可以全局使用。

样式穿透

deep(){.uni-icons{color:$brand-theme-color !important;}
}

插件

unplugin-auto-import自动导入vue和uniapp模块

// 根目录下创建vite.config.js，并拷贝下面的代码
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import AutoImport from 'unplugin-auto-import/vite'export default defineConfig({plugins: [uni(),        // 自动导入配置AutoImport({imports:[// 预设'vue','uni-app'                ]})]    
})

使用官方扩展组件

注意：引入之后不好用的话，就重新编译，小程序必须重新编译。如果下载插件的时候出现合并提示框，点击合并即可。

<uni-icons type="arrow-up" size="26" color="#888"></uni-icons>

 

编译器（#ifdef）

编译器：将uni-app统一代码编译生成每个平台支持的特有代码；如在小程序平台，编译器将.vue文件拆分生成wxml、wxss、js等代码。

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台

参考文档：什么是编译器 | uni-app官网

在Html中的示例

<!-- ifdef MP 在小程序展示 -->
<!-- #ifdef MP -->
<button open-type="contact">联系客服</button>
<!-- #endif --><!-- ifndef MP 非小程序的情况下展示 -->
<!-- #ifndef MP 非小程序的情况下展示 -->
<button @click="clickContact">拨打电话</button>
<!-- #endif -->

在Script中的示例

	//点击下载const clickDownload = async () => {// #ifdef H5uni.showModal({content: "请长按保存壁纸",showCancel: false})// #endif}

获取系统信息

系统信息的概念 | uni-app官网

uni.getSystemInfoSync()获取系统信息，一般使用同步方法，系统内获取的信息，其单位都是px的。

状态栏高度

const SYSTEM_INFO = uni.getSystemInfoSync();export const getStatusBarHeight = ()=> SYSTEM_INFO.statusBarHeight || 15;

胶囊按钮（小程序才有）

getMenuButtonBoundingClientRect() | uni-app官网

uni.getMenuButtonBoundingClientRect();

标题高度

一般标题高度 = 标题栏距状态栏的距离 + 胶囊按钮的高度 + 胶囊按钮距内容区的高度

const SYSTEM_INFO = uni.getSystemInfoSync();// 状态栏高度
export const getStatusBarHeight = ()=> SYSTEM_INFO.statusBarHeight || 15;// 标题栏高度
export const getTitleBarHeight = ()=>{// 如果存在胶囊按钮if(uni.getMenuButtonBoundingClientRect){// 获取胶囊按钮高度以及距顶部的距离let {top, height} = uni.getMenuButtonBoundingClientRect();// 胶囊按钮高度 + 上下边距return height + (top - getStatusBarHeight()) * 2		}else{return 40;}
}

自定义标题栏时占位区高度

const SYSTEM_INFO = uni.getSystemInfoSync();// 状态栏高度
export const getStatusBarHeight = ()=> SYSTEM_INFO.statusBarHeight || 15;// 标题栏高度
export const getTitleBarHeight = ()=>{// 如果存在胶囊按钮if(uni.getMenuButtonBoundingClientRect){// 获取胶囊按钮高度以及距顶部的距离let {top, height} = uni.getMenuButtonBoundingClientRect();// 胶囊按钮高度 + 上下边距return height + (top - getStatusBarHeight()) * 2		}else{return 40;}
}// 自定义标题栏占位元素的高度 = 状态栏高度 + 标题栏高度
export const  getNavBarHeight = ()=> getStatusBarHeight() + getTitleBarHeight();

头条小程序的头部icon

相关API查看抖音小程序开发文档，uni-app中没有写。

const SYSTEM_INFO = uni.getSystemInfoSync();// 状态栏高度
export const getStatusBarHeight = ()=> SYSTEM_INFO.statusBarHeight || 15;// 标题栏高度
export const getTitleBarHeight = ()=>{// 如果存在胶囊按钮if(uni.getMenuButtonBoundingClientRect){// 获取胶囊按钮高度以及距顶部的距离let {top, height} = uni.getMenuButtonBoundingClientRect();// 胶囊按钮高度 + 上下边距return height + (top - getStatusBarHeight()) * 2		}else{return 40;}
}// 自定义标题栏占位元素的高度 = 状态栏高度 + 标题栏高度
export const  getNavBarHeight = ()=> getStatusBarHeight() + getTitleBarHeight();// 抖音小程序标题有一个icon
export const getLeftIconLeft = ()=> {// #ifdef MP-TOUTIAO// 下面这种语法是深度解构let {leftIcon: {left, width}}  = tt.getCustomButtonBoundingClientRect();return left + parseInt(width);// #endif// #ifndef MP-TOUTIAOreturn 0// #endif	
}

网络请求

uni.request

在各个小程序平台运行时，网络相关的 API 在使用前需要配置域名白名单。详细内容请参考官方文档 uni.request(OBJECT) | uni-app官网

function getData() {uni.request({url: '/XXX/XXX',method: 'POST', // 默认是getdata: {name: '测试'},success: (res: any) => {// 将接口的返回结果都包在data中console.log(res.data)}})
}

使用Promise封装request


const BASE_URL = 'https://XXX.XXX.com/XXX/XXX';export function request(config = {}){	let {url,data = {},method = "GET",header = {}} = config;url = BASE_URL + url;header['access-key'] = "XXX";	header['token'] = 'XXX';return new Promise((resolve, reject)=>{		uni.request({url,data,method,header,success: res=>{if(res.data.errCode === 0){// 直接取接口的返回值，去除中间包的那一层dataresolve(res.data)}else if(res.data.errCode === 400){uni.showModal({title: "错误提示",content: res.data.errMsg,showCancel: false})reject(res.data)}else{uni.showToast({title: res.data.errMsg,icon: "none"})reject(res.data)}				},fail: err=>{reject(err)}})})
}

打包

web/H5

1、路径模式，如果有后端做Nginx转发，就可以选择history，没有就选hash模式

2、将打包后的东西放在根路径下，就用 ./ 就可以了，但是一般情况下，服务器中可能有多个文件，比如说后端文件、前端文件、管理系统的文件，一个服务器里可能存在多个包，所以大多数情况下，运行的基础路径都会指定一个基础路径。

3、打包流程

 

打包APP-安卓

一、相关配置

二、运行APP

遇到下面这个弹窗，有两种解决方式：

1、把安卓手机直接连在电脑上

2、下载模拟器，百度自行下载即可

三、打包

 四、版本更新

uniPush统一推送与App升级中心uni-upgrade-center系列uniapp进阶课，安卓apk打包及自定义基座_哔哩哔哩_bilibili

即时设计

1、打开即时设计，选在创建文件

2、把UI做好的图拖入文件中 ，在图上右键锁定，这样图片就不会随便移动

ctrl+鼠标滚轮可以放大缩小图片

3、通过切片功能来模拟量图工具

http://www.dtcms.com/wzjs/4509.html

相关文章：

  • 网站不备案可以做淘宝客吗互站网
  • godaddy wordpress hosting优化防控举措
  • wordpress 图站信息流推广渠道
  • 学做网站论坛 可以吗微信小程序开发详细步骤
  • 英铭长沙网站建设培训班报名
  • 山东网站建设好不好seo全网推广营销软件
  • 如何做销售网站品牌推广计划书怎么写
  • 深圳建设厅官方网站百度收录查询网址
  • 国家工信部 网站备案seo外链招聘
  • 长沙网站建设哪家强百度自动点击器
  • 触屏版网站设计百度问答优化
  • asp网站 换模板网站设计与制作教程
  • 自己开的网站 可以做代销吗百度怎么推广自己的信息
  • 谷歌seo网站怎么做产品分类大数据获客系统
  • 哪里可以学做资料员的网站河南网站推广
  • 360网站建设价格windows优化大师怎么下载
  • 东莞网站建设方案表微信运营
  • 佛山营销网站建设服务公司网站百度seo关键词优化
  • 网站收录的页面被k出来苏州seo关键词排名
  • 可以免费做中考题的网站做seo要投入什么
  • 企业检索网站建设2022知名品牌营销案例100例
  • 网页源代码搜索关键字郑州网站seo推广
  • 网站群建设的意义站长基地
  • wordpress文章不见网站优化推广教程
  • 网站制作价格关键洞察力
  • 发改委网站建设方案百度推广运营公司
  • 品牌设计全案长沙seo 优化选智投未来no1
  • 编程猫加盟条件和费用新网站怎么做优化
  • 制作公司网站视频上海专业的seo推广咨询电话
  • element ui设计网站网址域名大全