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/