uni-app框架使用介绍

1. 开始

1.1. 介绍

框架基于uni-app + uView,在uni-app的基础上进行了一些封装

uView是一款多平台快速开发的ui框架,文档地址:www.uviewui.com/

1.2. 准备

在开发之前,请先下载安装uni-app的开发工具 hbuilderx

下载地址:www.dcloud.io/hbuilderx.h...

由于是开发微信小程序,微信开发者工具也是必不可少的

下载地址:developers.weixin.qq.com/miniprogram...

1.3. 项目地址

http://192.168.128.69/shcepp/uniapp-miniprogram/tree/dev dev分支

1.4. 目录结构

目录结构

1.5. 运行

通过hubuilder打开项目后,运行项目!

1.6. 发布

如上图所示,然后去微信开发者工具上传

2. 使用

2.1. 应用配置 (根目录 .env.js)

应用配置文件

默认应用分为两个环境: development(开发)、production(生产)

里面的属性可自行拓展和修改,使用时 **import ENV from '@/env.js' **即可

2.2. 请求

框架基于 uni.request 的基础上进行了封装

代码位置:utils/request.js

所有的请求接口放在了 根目录 api 文件夹下

注意:真机调试时,可能会出现无法请求到后端的情况,可以尝试将 手机 连接到 内网wifi 再进行真机调试

应用配置文件

2.4. 全局样式

代码位置:styles/index.less

通过一个index.less文件引入其余的less文件,然后再main.js中引入index.less,这样方便管理

·

2.5. 关于echarts

框架中引入了echarts.js, 因为是整个eharts全部引进来的,所以echarts.js文件比较大,有900+kb,为了防止开发者工具内因为主包大于2MB无法预览,所以对echarts做了分包处理

代码位置:根目录下 echarts

在开发过程中,我们通过微信开发工具进行真机调试时,请将真机调试切换到2.0模式,不然echarts可能会无法正常显示,如果没有显示切换真机调试2.0,请更新您的微信开发者工具

·

2.6. 关于分包

小程序主包最大不能超过2MB,所以在开发过程中,可以通过分包进行开发,减小主包的大小

关于分包的文档:developers.weixin.qq.com/miniprogram...

2.8. 平台判断 [uniapp.dcloud.net.cn/worktile/ru...](#2.8. 平台判断 uniapp.dcloud.net.cn/worktile/ru… "#%E5%88%A4%E6%96%AD%E5%B9%B3%E5%8F%B0")

2.9. 安卓打包

· Error in beforeCreate hook: "TypeError: Cannot read property '_i' of undefined"

组件名可能和安卓内置关键字冲突,换个名字,之前有个"ad"组件,改成"homeAd"就好了

2.9.1. xxx undefined****

· 一般是由于元素还没有实例化,nettick 或者 setimeout 0 一下就行\

2.9.2. Cannot read property 'date' of undefined"****

· 2.10 关于预览

当预览时可能会出现如上图所示的报错,这是因为uniapp-miniprogram使用的是测试账号,在开发时,请

· 将您正在开发的小程序项目的AppId对原有的框架Id进行覆盖

相关推荐
爱吃的小肥羊17 分钟前
比 Claude Code 便宜一半!Codex 国内部署使用教程,三种方法任选一!
前端
IT_陈寒2 小时前
SpringBoot项目启动慢?5个技巧让你的应用秒级响应!
前端·人工智能·后端
树上有只程序猿2 小时前
2026低代码选型指南,主流低代码开发平台排名出炉
前端·后端
橙某人2 小时前
LogicFlow 小地图性能优化:从「实时克隆」到「占位缩略块」!🚀
前端·javascript·vue.js
高端章鱼哥2 小时前
为什么说用OpenClaw对打工人来说“不划算”
前端·后端
大脸怪2 小时前
告别 F12!前端开发者必备:一键管理 localStorage / Cookie / SessionStorage 神器
前端·后端·浏览器
Mr_Mao3 小时前
我受够了混乱的 API 代码,所以我写了个框架
前端·api
小徐_23333 小时前
向日葵 x AI:把远程控制封装成 MCP,让 AI 替我远程控制设备
前端·人工智能
冴羽3 小时前
来自顶级大佬 TypeScript 之父的 7 个启示
前端·typescript
leafyyuki3 小时前
在 Vue 项目中玩转 FullCalendar:从零搭建可交互的事件日历
前端·javascript·vue.js