unapp开发规范

unapp开发规范: vue 语法 + uni内置组件 + uniapp +uniapp 跨段框架ui库 + flex 布局

uniapp官网：

https://uniapp.dcloud.io/README

Unapp 环境配置

1.HbuilderX 全量安装

2.创建Unapp项目

3.打开dmanifest.json 配置基础配置

​ 基础配置 填入Dcloud appID

​ H5配置：路由模式 history模式

​ 运行基础路径： /

​ 微信小程序配置： 填入appID

4.打开微信工具

​ 设置 -》安全设置 -》 开启服务端口

​ 打开HBX -》 工具 -》 设置 -》 运行设置 -》 微信开发工具路径 -》 浏览找到

运行到小程序模拟器 :

运行 -》 运行到小程序模拟器

浏览器运行：

​ 运行到浏览器 -》 选择浏览器

会产生unpackage 文件

​ 里面dist -》 dev 里面是不同的项目依赖 小程序 H5 app

项目结构

pages： 跟小程序中的pages 一样

（ 不过里面的生命周期 小程序和 vue 可以混用 ）

static 对应于 vue中 pablic

dmanifest.json 开发配置

App.vue 相对于 原生小程序的 App.js

main.js 入口文件

pages.json

​ globalStyle -》 小程序文件 app.json 中的 窗口 window

​ pages -》 单页面配置 相当于页面的配置 路径和样式 小程序中单页面的page.json

app.vue

app.vue -》 相对于小程序中的 app.js / app.wxss

static

静态本地资源 -》 小程序中的 images

components

公共组件

全局组件注册 （ main .js 中 注册全局组件 ）

先引入 import 组件名 from  ’  地址  ‘

vue. 挂载到vue 实例身上
vue.component （   " 组件名 " ， 引入的组件名 ）

unApp规范推荐

路由不推荐vue - router 推荐小程序

钩子函数 推荐小程序 支持vue 钩子

样式支持 rpx

局部注册组件

具体看文档：

https://uniapp.dcloud.io/vue-components?id=%e5%b1%80%e9%83%a8%e6%b3%a8%e5%86%8c

全局组件 再main.js 中注册全局组件

​ 使用vue.component 来注册

​ import 导入

import {  } from '../ '

​ vue.component （ ’ 组件名 ’ , import 导入的组件变量名 ）

不支持dom操作

内置 wx .api 要改成 uni . switchTab ( )

路由跳转

wx.switchTab({   改成 uni 
  url: '/index'
})

插件市场 下载组件

下载 导入插件

this.$set

mounted () {
			对象         键    你改的值
  this.$set(this.student,"age", 24)
}

事件对象

当组件绑定事件触发后，将传递一个事件对象到绑定的函数中

function(event){
}