UniApp
介绍
-
uniapp就是基于vue语法进行开发,然后发布成不同端,可以发布成h5web界面,微小小程序,android软件,ios软件
-
uniApp可以使用微信小程序原生的所有API,只需要把wx变成uni即可
-
模板采用的是vue的模板,分为三部分,结构区域template,逻辑区域script,样式区域style
-
生命周期函数还是微信小程序的生命周期函数,但是数据需要定义在data中,方法需要写在methods中
-
界面渲染的时候也是v-for或者v-if
-
点击事件的时候也是通过@click=“函数名(传递参数)”
下载
-
下载地址,下载为app开发版
-
https://dcloud.io/hbuilderx.html
创建项目
- 文件—新建—项目—uni-ui
目录介绍
-
├── components 复用组件存放地址 │ └── Header.vue Header组件 ├── pages 界面存放目录 │ ├── Index │ │ └── Index.vue index界面 │ └── List │ │ └── List.vue list界面 ├── static 静态资源存放地址,只能存放到这里,视频,图片等等 ├── main.js 项目入口文件 ├── App.vue 应用配置,用来配置全局样式,生命周期函数 ├── manifest.json 配置应用名称,appid,logo,版本等打包信息 └── pages.json 配置页面路径,页面窗口样式,tabBar,navigationBar等页面类信息
把项目运行到微信开发者工具
-
点击项目下面的manifest.json文件,然后点击微信小程序配置,将自己的appid填写进去
-
工具—设置—运行配置—微信小程序安装路径
-
微信开发者工具点击设置—安全—服务端口(打开)
取消黄色警告
-
manifest.json下面找到源码
-
在setting里面添加一个"checkSiteMap": false
-
"mp-weixin" : { /* 小程序特有相关 */ "appid" : "wxe6ac6d43c116568d", "setting" : { "urlCheck" : true, "checkSiteMap": false }, "usingComponents" : true }
tabBar配置
- 在pages.json里面创建一个tabBar节点,在里面进行配置即可,和微信小程序一样
配置导航条
- 在pages.json里面创建一个globalStyle节点,在里面进行配置即可,和微信小程序一样
网络请求的第三方包
-
uni中不支持axios请求,但是可以使用原生的wx.request(),但是原生的功能太简单太少,因此建议使用第三方的npm包
-
下载
-
npm install @escook/request-miniprogram
-
具体使用方法参考官方
-
与小程序的用法不同的是,直接在入口文件里面进行引入即可,不需要像小程序那个进行构建
分包
-
和微信小程序配置分包方法一致
-
"fenbao01pages": [{ "root": "fenbao01", "pages": [{ "path": "fenbao01/01/01", "style": { "navigationBarTitleText": "", "enablePullDownRefresh": false } }] }],
自定义方法
-
跟vue一样在main.js文件里面全局uni身上进行挂载即可,后续直接调用方法进行使用即可
-
uni.$showMsg = function(title = "获取数据失败"){ uni.showToast({ title, icon: 'none', duration: 2000 }) }
自定义组件
-
在components下面右键进行创建组件即可,创建建议使用less模板,然后勾选创建同名目录
-
使用组件就直接在界面使用即可,组件以标签的形式进行使用,名称就是你所定义的名称
过滤器
- 和vue一样,先进行filters定义,然后在界面使用管道符进行使用即可
分离窗口
-
增加开发效率,开发的时候一般都是Hbuilder进行开发,然后切换成微信小程序模拟器进行预览,比较麻烦,因此我们可以进行分离窗口,在修改之后不需要切换直接看到效果,增加开发效率
-
在微信模拟器找到分离窗口,在模拟器区域,然后分离出来进行置顶显示
发布成微信小程序
- 点击Hbuilder发行—发行成微信小程序—发行
发布成App
-
先点击左下角的登录进行登录上去
-
然后打开当前项目的manifest.json文件
-
基础配置获取一下uni-app的应用标识,没有的话从新获取一下就可以了,设置应用名称
使用git进行忽略
-
node_modules/ dist/** .project unpackage/ .DS_Store wxcomponents/**/*.vue wxcomponents/**/*.css .hbuilderx/