uniapp

目录：

1.安装uniapp环境

2.基本语法

3.插件市场

第一部分： uniapp开发环境搭建
一、安装开发工具

安装HBuilderX 官方下载地址 https://www.dcloud.io/hbuilderx.html
源码下载： https://github.com/zhangdaiscott/jeecg-uniapp

安装教程【安装教程】
HBuilderX是通用的前端开发工具，但为uni-app制成特别强化。
下载App开发版，可开箱即用；如下载标准版，在运行或发行uni-app时，会提示安装uni-app插件，插件下载完成后方可使用。

二、项目
1、使用HBuilderX导入项目

（1）前端工程jeecg-boot-uniapp
（2）HBuilderX打开项目

HuilderX 生成的uniapp项目目录结构也就类似 vue 和 小程序 的结合。

┌─.hbuilderx 云空间目录
│─components 符合vue组件规范的uni-app组件目录
│ └─comp-a.vue 可复用的comp-a组件
├─node_modules 存放终端下载的插件（npm install / cnpm install 等）
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index首页页面
│ └─list
│ └─list.vue list列表页面
├─static 存放应用引用的本地静态资源（如图片、视频等）的目录
├─utils 自定义工具类文件存放目录
├─main.js Vue初始化入口文件
├─App.vue 应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json 配置应用名称、appid、logo、版本等打包信息
├─index.html 自定义HTML文件在H5中可以加入百度统计以及网址标题图标等
├─package-lock.json 记录npm安装的插件名、版本号、存放处等
├─pages.json 配置页面路由、导航条、选项卡等页面类信息
└─uni.scss HbuilderX sass插件安装生成的文件

2、运行uni-app

1.浏览器运行：进入jeecg-boot-uniapp项目，点击工具栏的运行->运行到浏览器->选择浏览器，即可在浏览器里面体验uni-appH5版。

H5在开发环节，运行到外部浏览器可能会出现跨域的问题。
如果遇到跨域造成js无法联网，注意网络请求（request、uploadFile、downloadFile等）在浏览器存在跨域限制，解决方案有详见：https://ask.dcloud.net.cn/article/35267。

如果只是开发调试可以使用内置浏览器，没有跨域等的问题，首次使用内置浏览器可能会提示下载，运行成功后，可以在右侧看到相应的页面。

2.在微信开发者工具里运行：进入jeecg-boot-uniapp项目，点击工具栏的运行->运行到小程序模拟器->微信开发者工具，即可在微信开发者工具里面体验jeecg-boot-uniapp项目

3.其他
manifest.json 配置多端

第二部分 基础语法

代码规范：

1.页面文件遵循 Vue 单文件组件 (SFC) 规范
2.组件标签靠近小程序规范，详见uni-app 组件规范
3.接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范

uni.navigateTo({url:’./workorder-finish’})
uni.showToast({

title: ‘标题’,
duration: 2000
})

4.数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期

4.1应用的生命周期 app.vue
onLaunch onShow onHide

4.2页面的生命周期 page.vue
onLoad onShow onReady onHide onUnload 也可以写vue生命周期

4.3组件的生命周期 (不是一个页面，是一个自定义组件.vue)
vue的生命周期 create mounted …

5.为兼容多端运行，建议使用flex布局进行开发

6.rpx

rpx换算公式： 750 * 元素在设计稿中的宽度 / 设计稿基准宽度

设计稿 750
元素：100px Xxrpx
750*100/750 = 100rpx
设备是iphone6 7 8 设计稿是750px 量的多少px 写rpx

设计稿 640
元素：100px 换算成 XX rpx
750*100/640 = 117rpx

如果设计稿不是750，去工具-设置-编辑器配置-勾选转rpx单位，设置比例
比例的计算方式 设计稿的大小/750

7.更多规范 参考官网

第三部分 丰富的插件市场

使用前需先登录uni原生插件市场，在插件详情页中购买，免费插件也可以在插件市场0元购。购买后才能够云端打包使用插件。

uni-app写的时候注意事项
dom,中不允许给变量赋值,(即不能用=)
小程序不支持window,document等，如果用window对象，必须if(window) 保护下代码
引入第三方库或者依赖的话，在群里通知下，因为有些第三方库含有document，不支持小程序
小程序不支持cookie，大家不用用cookie
第一次访问服务器，将Cookie存起来

  if(result && result.header && result.header['Set-Cookie']){
                            wx.setStorageSync('cookieKey', result.header['Set-Cookie']);//保存Cookie到Storage
                        }
        

再次访问服务器，获取cookie

let cookie = wx.getStorageSync('cookieKey');

将cookie加入header

                    header:{
                    'Content-type':'application/x-www-form-urlencoded',
                    'Cookie':cookie
                    },

background-image:url写行内形式，路径用引号引起来
v-for 遍历时，:key必须用整数（不要红字符串，否则可能引发@click时间的参数拿不到）
dom里去vuex里的数据不能直接用this(小程序里直接取vuex里的数据，可能this指向不是vue实例)
v-for嵌套v-for时候，两层的key不要有重复，,内层循环取数据，通过索引取，直接内层取不到数据
dom 中尽量避免过多的逻辑运算，比如变量拼接字符串（这些逻辑尽量在代码中做）；否则可能出现本地和线上不一致问题