1 创建nui-app
- 点击左上角的文件
- 点击新建-》项目,将信息填写完整
- 点击确定
2 uni-modules 插件管理
通过 uni-app 插件市场 实现 uni-modules的插件安装,在插件市场搜索对应的插件名称,点击进去,点使用Hbuild’erX导入插件。详细使用见uni-modules
3. 项目目录
1.官方项目目录详解
2. 项目常用目录
- pages 存放页面
- static 静态资源目录(如图片、视频等,静态文件只能存放到这里)
- App.vue 应用入口文件(跟小程序 app.js 类似,如:APP全局样式、监听声明周期)
- main.js 应用入口文件(如:Vue 初始化、定义全局组件 ...)
- manifest.json 项目配置文件(如:应用名称、appid、logo、版本、启动页 ...)
- pages.json 页面配置文件(如:页面路由、导航条、选项卡 ...)
- uni.scss 全局样式(如:按钮颜色、样式风格 ...)
- unpackage 编译后的文件存放目录
- 注意:下面需要自建的,根据项目开发情况创建即可。
- api 请求封装存放目录(自建)
- common 公共文件存放(自建)
- components 自定义组件存放(自建)- uniapp
- wxcomponents 小程序组件存放(自建)- wx
- store vuex 状态管理(自建)
- utils 公共工具目录(自建)
- hybrid 存放本地网页目录(自建)
- platforms 存放各平台专用页面目录(自建)
- vue.config.js vue 配置管理(自建)
- vite.config.js vite 配置管理(自建)
3. 开发注意事项
-
要想是某个插件的组件整体底色改变,不要在组件的根节点改变样式,而是在外面包裹一层view,在view上添加样式。原因:发布成小程序,加在组件根节点的样式会丢失
-
在页面中最好不要用for循环进行绑定动态参数的事件(插件可以使用,自己写的不要用)。因为发布成小程序,会读取不到动态的参数,也有可能是是页面中有两块地方有点击事件
-
app-plus 页面中多个位置有点击事件最好点击事件加.navite,即@click.navite
-
web-view 组件的地址为外网地址时,高度100vh,不起作用,会不显示内容,应该给具体的高度,可以通过获取uni.getSystemInfo 获取到屏幕高度进行赋值
-
微信小程序的hideLoading()方法会把 toast提示框隐藏掉,不想让totas隐藏,可以使用
noConflict: true
取消混用uni.showToast({ title:'测试', icon:'none' }) uni.hideLoading({ noConflict: true })
-
uview上传前需要确认信息再开始选择文件的方法
this.$refs.uploadFileRef.chooseFile()
,uploadFileRef是上传组件的ref的值