一. uniapp项目的起步：

1.工具下载

在 Dcloud 的官网上下载 HBuilderX 的 app 版本，以及微信开发者工具

2. 项目创建

按照uni-app文档建立对应的 uni-app 项目。

3. 微信开发者工具的设置

打开微信开发者工具->设置->安全->打开服务端口 / 设置->代理->使用系统代理

4. 项目运行

打开HBuilder->运行->运行到小程序模拟器执行成功会调起微信开发者工具，并运行小程序。在 HBuilder 上编译保存会实时的更新微信编辑器。注：如果跳过第三步直接执行第四步会报错且不能成功运行。

5. 运行报错

在创建项目的时候有的项目可能会使用 scss/sass 这个时候我们是会执行报错的，按照提示可以在工具->插件市场中选择对应的插件。注：插件市场中也有很多已经写好的模板或者组件，但需要注意的是有的模板或者组件会覆盖index文件，所以在导入的时候需要多加注意。

6. 大致语法

uniapp的语法大致与vue相同，例如

注：:key="item.state" 不写的话小程序会有提示

7. appid：

小程序的发布都需要一个appid且需要在微信的开发平台上添加为开发者。开发环境下可以使用测试appid，在uniapp下可以不设置但发布时需要在 manifest.json 里设置 appid，
需要注意的是如果你配置好了appid其它的人拿你的项目且不是开发者的情况下是启动不了的，但是可以通过删除 manifest.json 里配置的id后再运行。

8. 域名类型

小程序正式环境的接口一定得是 https 的，但我们在开发的时候可以在微信开发者工具->详情->本地设置->勾选不校验合法域名、web-view（业务域名）......，这样就能正常访问接口了。（补充：正式环境的接口域名需要在微信小程序的平台上添加）

9. 小程序的发布：

需要在 HBuilder 上点发行->选择小程序-微信他会进行打包并让你填写项目名字和appid（如果已经填写过了则会自动填写上去），打包完成会重新打开一个新的小程序项目，在微信开发者工具上进行上传后在开发者平台进行提交审核或设置体验版。

二. 生命周期:

应用生命周期：

应用生命周期仅可在 App.vue 中监听，在其它页面监听无效。

比较常用的是 onLaunch 全局只触发一次,一般用作打开小程序的初始化或者进行登录判定

页面生命周期：

常用的页面生命周期：

1. onLoad：

监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），一般在这里请求接口初始化页面数据。

例如：a 跳转 b 进行传参如果是对象的话需要先转成字符串再进行传递，页面接收后再进行转换。需要注意的是太长了会被url截断导致传递失败。但我们可以进行编码传送encodeURIComponent()。

a页面

wx.navigateTo({

url: "/pages/index/index?id=" +Id

})

b页面

onLoad: function(options){

let Id = options.Id;

}

2. onShow：

监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面，也可以像onLoad一样接收传递过来的参数，一般可以用作别人分享给你的时候获取分享的参数以便进行一些操作。

3. onPullDownRefresh：

监听用户下拉动作，一般用于下拉刷新，需要在页面的json文件中配置 "enablePullDownRefresh": true , 才能在页面中触发。

4. onTabItemTap：

点击 tab 时触发，参数为Object，这个事件是在点击tabbar的时候才会触发的。tabbar加载完后再次进入是不会触发onLoad的可能会导致数据不会再次加载，这个时候我们可以借助这个事件去刷新页面，或者将数据的加载写在onShow里面。

5. onShareAppMessage：

用户点击右上角分享一般作为用户主动点击了按钮进行小程序的分享

<button class="hideBtn" open-type="share"></button> // open-type="share 代表分享按钮

onShareAppMessage(res) {

if (res.from === 'button') { // 来自页面内分享按钮

console.log(res.target)

return {

title: '易纸箱:随时随地掌握工厂',

path: '/pages/login/login',

imageUrl: '../../static/share.png',

}

}

}

path: '/pages/login/login', // 这里是可以带参数的就像跳转页面那样，接收的地方在 onLoad / onShow

6. 官方文档：

https://uniapp.dcloud.io/frame?id=生命周期

三. 全局变量：

1. 通过Storage来设置

页面 A 跳转到页面 B 并获取数据

A : 设置缓存

uni.setStorageSync('newMember', this.newMember); // 设置缓存

B : 获取缓存

let str = uni.getStorageSync('newMember') // 获取缓存

uni.removeStorageSync('newMember') // 删除缓存

2. getApp()

需要在app.vue里设置变量 globalData // globalData 示例对象仅为方便统一管

getApp().globalData.currentOrderTab = 1; // 设置变量

this.tabCurrentIndex = getApp().globalData.currentOrderTab; // 获取变量

四. tabBar页面和普通页面：

1. tabbar ：

1. 跳转至页面的方式以及传参： switchTab；不能

2. onLoad的触发：第一次打开仅触发一次

3. pages.json配置: pages /tabBar 都需要

4.左上角的返回: 不带返回按钮

2. 普通：

1. 跳转至页面的方式以及传参： navigateTo / redirectTo；可以

2. onLoad的触发：每一次打开都会触发

3. pages.json配置: 仅需要在pages配置

4.左上角的返回: 带返回按钮

五. 页面跳转的方式：

navigateTo、reLaunch、redirectTo、switchTab区别

1.navigateTo

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

要注意的是navigateTo只能跳转的

应用内非 tabBar 的页面的路径 , 路径后可以带参数；

如果跳转url参数为tabBar的路径则无法进行跳转

2.redirectTo

关闭当前页面，跳转到应用内的某个页面。

需要跳转的应用内非 tabBar 的页面的路径，路径后可以带参数

3.reLaunch

关闭所有页面，打开到应用内的某个页面。

需要跳转的应用内页面路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 'path?key=value&key2=value2'，与redirectTo不同的是如果跳转的页面路径是 tabBar 页面则不能带参数

4.switchTab

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

需要跳转的 tabBar 页面的路径，路径后不能带参数

注：tabBar 页面需在 pages.json 的 tabBar 字段定义页面

跳转到tabbar页面是不会加载onLoad的，如果在跳转babbar的时候需要刷新页面可以进行如下操作：

跳转刷新页面：

uni.switchTab({

url: '/pages/order/order',

success: (e) => {

let page = getCurrentPages().pop();

if (page == undefined || page == null) return;

page.onLoad();

}

});

六. 开发：

1. 自定义导航头

2. scroll-view 的高度自适应

<scroll-view :style="{'height':pageHeight}" scroll-y="true" class="scroll-Y">

try {

const getSystemInfoSyncData = uni.getSystemInfoSync(); // 获取系统信息

this.pageHeight = (getSystemInfoSyncData.screenHeight * (750 / getSystemInfoSyncData.screenWidth) - 88 - 32 - 72) + 'rpx'; // screenHeight ：屏幕高度， - 的数字是你固定头部的高度。并将 px 转为 rpx

// console.log('pageHeight', this.pageHeight)

} catch (e) {

// error

}

不要使用 windowHeight / windowWidth 他获取的是可用高度/宽度，在某些带导航栏的手机上显示系统导航栏的状态下打开页面再隐藏导航栏会造成原先导航栏的位置是空白的。

3. 请求头塞入token

let SetHeader = { // 设置请求头、token

'context-type': 'application/x-www-form-urlencoded',

'Cookie': `token=` + uni.getStorageSync('token')

}

uni.request({

url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。

data: {

text: 'uni.request'

},

header: SetHeader,

success: (res) => {

console.log(res.data);

this.text = 'request success';

}

});

4. 界面布局

1. uniapp只支持 display：

flex 的布局， view 标签默认宽度100% ，所以想将元素居中的话使用 margin：0 auto 是不能生效的，可以使用 justify-content：center

2. 高度塌陷：

如果一个元素因为没有内容造成了高度塌陷：可以给父元素设置一个总高后再给子元素设置高度，单独设置子元素是不生效的。

3. v-for不显示页面

八成是数据为空造成的，如果不能保证数据都是有的情况下对于一些展示的东西需要写死，或者创建一份基础数据有数据的话再覆盖它

4. 原生/uniapp 背景图

小程序的原生不能正常的展示背景图需要转成base64的，uniapp写背景图会帮你转成base64

5. 尺寸单位

使用rpx单位书写会便捷很多

6. 坑点：

1. picker

在使用picker的时候值只能使用 - 的形式隔开不然在ios上会从第一年第一月开始，事件是绑定在{{data}}上的，具体用法查看uniapp文档

2. 滚动条请求数据重置滚动的距离

如果是有一个选项卡头共用了一个数据源，在切换时不会重置滚动距离，可以先将数据清空后再赋值

3. 想刷新tabBar但是他又有二级页面，二级返回的时候不想tabBar页面刷新

在 tabbar页面的切换中是不会刷新页面的，但我们可以通过 onshow 来实现，但 onshow 有个特性就是页面的显示必定会刷新但有时候我们并不期望这样，例如有个详情页面的时候后退不想让他刷新。这里我们可以使用 onTabItemTap（单击选项卡时触发，参数为对象）来实现

4. {{}}中进行toFixed

小程序在{{}}中使用toFixed会报错，可以单独写个变量进行处理后再赋值

5. SearchBar 搜索栏组件全英文输入

搜索组件输入英文字母如果是有联想的，必须要选中，否则点搜索无法获取到输入值

在使用SearchBar 搜索栏的时候遇到了全英文输入不点上面的待选直接搜会获取不到输入的内容，这里可以添加一个失去焦点时间在失去焦点事件里面进行查询。但因为搜索事件会先触发所以要在搜索条件里调用失焦事件失焦事件再进行接口查询，如果不想失焦在除了点击搜索以外的时候触发可以在搜索按钮里添加一个参数判断

6. onLoad/onTabItemTap执行顺序

正常情况下onload会先执行

但在ios微信7.0.15版本 onTabItemTap 会比 onLoad 先执行，低于这个版本的可能也会存在这个问题

7. 修改input的值v-model并不生效

this.$nextTick(() => {

this.productHeight = val;

});