Uni-app 笔记

/* 
  安装插件 工具--插件安装
	内置浏览器  内置终端
	scss  prettier
	
	vue cli 创建
	vue create -p dcloudio/uni-preset-vue name
	选择 默认模板
	cd name
	npm run serve
	
	src = HbuilderX
	
	HbuilderX 创建  推荐
	
	
	运行方式
	1 h5 浏览器
	2 小程序端
	3 手机端--app--ios
	
	小程序开发工具设置  设置-安全设置--服务端口打开  代理--使用系统代理
	
	手机端--夜神模拟器 或者MuMu模拟器(端口7555)--屏幕旋转--Android模拟器端口设置--ADB路径设置--adb.exe
	
	真机--开发者模式
	
	APP调试
	1 样式 -- 运行-- 手机或者模拟器--显示webView调试控制台--左下角--Inspect调试
	2 JS -- 编译终端--右上角--调试
  
	基本语法--约定开发规范
	1 页面文件--Vue的单文件语法
	2 标签--靠近小程序的规范 (95%)--小程序的组件
	3 API接口--靠近小程序
	4 数据绑定既事件绑定--Vue的规范
	5 生命周期--兼容小程序 + Vue
	6 flex布局 
	
	<view> == div
	  空标签 <block> 包裹多个标签 </block>
	<text>  文字标签--span
	image--img
	navigator--a
	
	<template> <view>  <view/> <template/> 根组件 必须有这俩
	data必须是一个函数
	
	小程序 组件跳转  <navigator url=""> <button>  <navigator />
	js 事件触发跳转  methods-> uni.navigateTo({url:""})   保留当前页面  有返回按钮 
	uni.navigateTo  保留当前页面  有返回按钮 （{url:""}）
	uni.redirectTo  关闭当前页面  无返回按钮
	uni.reLaunch    关闭所有页面,打开新页面
	微信小程序原生 <web-view src="">  直接加载  可以放到点击后跳转后的页面直接加载
	
	uni.request
	uni.showToast
	

  支持小程序的  最大为 960px超出 按照375px    375px=750rpx
  rpx  750rpx = 屏幕宽度   iphone 6 750rpx = 375px 设计稿是750 手机是375 二倍图
  h5 的 vw
  100vw = 屏幕宽度
  非要修改 750rpx 为基准 -- pages.json--rpxCalcBaseDeviceWidth--只有APP H5 生效--小程序不生效
  
  样式 和 sass
  安装 依赖  npm i sass-loader node-sass
  vue 的 style 标签中 <style lang="scss">
  uniapp --不需要添加 scope  默认已经添加
  
	static 静态资源文件
	pages.json  所有页面  页面公共配置
	uni.scss   内置常用样式变量
	
  小程序 数据共享
  App.vue 定义数据
  globalData:{
	  baseUrl:"www.baidu.com"
  }
  components  获取数据
  获取小程序的应用实例 getApp()
  let url = getApp().globalData.baseUrl
  
  生命周期
  应用--App.vue   
  是入口文件 所有页面的切换都在 此处进行  本身不是页面 所以没有template标签 
  1 应用生命周期   只在App.vue中 
  2 全局css样式
  3 全局事件   登录  globalData----getApp()小程序实例
  onLaunch  应用启动时,初始化  只执行一次  实现 3 
  onShow    显示   后台-前台
  onHide    隐藏   前台-后台
  
  页面--pages  参考微信小程序生命周期
  1 tabbar底部切换栏   切换页面  不管哪个平台 页面都不会销毁 只会触发 onHide 同微信小程序
  2 navigator 跳转其他页面  一级页面: onHide   二级页面: onLoad onShow onReady 
              返回时       二级页面: onUnload 一级页面: onShow 
              所以返回一级页面时 触发onShow 不会触发这之前的 setup-->Load
			  
  onInit   --只适用百度小程序
  
  onLoad   页面加载完毕  此处就已经拿到响应式数据了 --API调用
  onShow   页面用户可见
  onReady  初次渲染完成,数据准备好在可见show之后
  onHide   页面隐藏
  onUnload 卸载时
  
  组件--tab-bar  同VUE
  mounted  组件挂载完毕
  
  APP Launch--App Show--
  setup--
  Page Load--Page show--
  Com beforeCreate--Com Create--Com beforeMounted--Com mounted--
  Page Ready
  应用后台
  App Hide
  page onHide
  组件所在页面销毁时
  Page onUnload--Com beforeDestory--Com destory--
  一级页面 page onShow
  
	
  自定义组件      组件命名 不区分大小写  写啥是啥
  只要是在 components/name/name.vue  下创建的组件 可以直接 使用 无需导入,注册
	
	uni-ui扩展组件 使用  --无需导入,注册 直接 使用
	1 使用uni-ui 模板
	2 单个使用 找到组件--点击跳转--导入插件--多出uni-modules 文件夹--uni-rate
	
  
  条件编译  注释--里面前后包裹    不满足                     满足
  H5||MP-WEIXIN  APP       // #ifndef XXX  // #endif    // #ifdef XXX // #endif   
  H5  MP-WEIXIN  APP-PLUS
  html   js  css中需要多行注释  都可以 区分 	
	
	static文件夹  条件编译  
	文件夹 mp-weixin h5  必须小写  
	条件编译 // #ifdef XXX // #endif 指定 路径  static/h5/xxx.png   即可,
	不符合条件的 编译后不会生成不符合的文件夹 只有符合的文件夹资源
	
	只在h5端使用  打包后 只打包 该文件下组件
	platforms/h5/xx.vue
	platforms/mp-weixin/xx.vue
	
	
	wxcomponents  存放小程序组件的目录
	h5components  存放h5组件的目录
					 
  @import "";   导入css		
			   
  底部 tabBar 配置
  pages.json 中
  
  配置当前页 下拉刷新
 "enablePullDownRefresh": true
 监听--onPullDownRefresh
					  
 css 内置变量
 "navigationStyle": "custom"// 沉浸式状态栏 小程序端   页面 pages 中设置
 // 显示状态栏  页面最上方  view 尺寸设置 height: var(--status-bar-height)
 bottom: var(--window-bottom)	// 底部定位 H5 端 与bottomNavigation 重合 加上 不重合				
						
						
 "tabBar": {
     "color": "#7A7E83",
     "selectedColor": "#3cc51f",
     "borderStyle": "black",
     "backgroundColor": "#ffffff",
     "list": [{
         "pagePath": "pages/component/index",
         "iconPath": "static/image/icon_component.png",
         "selectedIconPath": "static/image/icon_component_HL.png",
         "text": "组件"
     }, {
         "pagePath": "pages/API/index",
         "iconPath": "static/image/icon_API.png",
         "selectedIconPath": "static/image/icon_API_HL.png",
         "text": "接口"
     }]
 }			
	
 */

/* 

 网络请求封装  uni-app-uview  提供的网络封装
 ./request/request      ./network/request.js
 
 */

/* 

uview  
1 插件市场--找到插件--HBX导入插件 
2 项目生成  components  theme.scss 但是样式没有引入
3 导入样式 uni.scss 中
  @import "./theme.scss";  
4 直接使用	-- <u-button> <u-button/>

 */

/* 
 
uni-ui 
1 插件市场--找到插件--HBX导入插件 
2 项目生成  uni_modules  
3 直接使用	-- <uni-button> <uni-button/>
 
 */


/* 
 nvue     不在手机端运行  直接不需要使用
 生成 APP 在手机端运行时
 nvue 原生渲染  weex 改进的原生渲染引擎    写法受限过多 ,效率高（首页，长列表页面 提高速度，其他不必）
 flex 布局 适配  
 vue  则使用webview渲染   
 
 结合条件编译  以免APP-nvue 端的代码在其他平台报错 影响代码执行 
 addRule            设置自定义字体
 scrollToElement    滚动  定位
 getComponentRect   获取元素  尺寸  位置信息
 animation          动画
 */

/* 
   第三方授权登陆  1 小程序有自己的  网页有自己的  Android Ios    最终都是放到自己服务器上 拿到 Token
   Uni-app   API--第三方服务--登陆
   1 获取服务供应商   uni.getProvider({})  qq  weixin sina
   2 发起登陆请求     str.indexOf("provider") != -1 判断是否包含在 provider 内
				    uni.login({provider:type, success:()=>{ }, fail:()=>{ } })   
					
*/

/* 
    webSocket
	
	链接socket
	uni.connectSocket({
		url:"ws://111111111111",
	})
	监听是否连接成功
	uni.onSocketOpen(()=>{
		console.log("连接成功会执行这个函数")
	})
	关闭
	onHide(){  //刷新页面  隐藏  触发
	  uni.closeSocket()	
	}
	uni.closeSocket()
	发送数据   String 
	uni.sendSocketMessage({
		data:Json.stringify({
			
		}),
	})
	监听数据分发
	uni.onSocketMessage(data => data
	{
		this.array.push(Json.parse(data.data))
	}   //将数据追加到 数组中  v-for 展示
	)
 */

/* 
    打包 
		mainfest.json
		源码视
		小程序特有相关 
		"mp-weixin": {
		"lazyCodeLoading": "requiredComponents"
		}
		
	h5 web 端
	manifest.json--H5配置--运行的基础路径--  ./   没有部署到web服务器,直接打开
	发行--网站PC-Web 或者手机H5--网站标题,网站域名(可不填 百度域名www.baidu.com)
	manifest.json -- 基础配置--APPID
	生成 unpackage--dist--build--h5--该文件夹发给 后端(或者自己 搞  云开发)
	manifest.json h5  还可以配置一些其他配置
	
	微信小程序
	方式1
	manifest.json--微信小程序配置--AppId--其他配置(全选)
	发行--微信小程序--发行--
	unpackage--dist--build--mp-weixin--目的是编译后再上传
	
	mp-weixin 自动连接到 微信开发者工具
	微信开发者工具--右上角上传--小程序开发平台--版本管理（版本号+描述）--上传--
	官网--管理--版本管理--开发版本--提交审核--根据提示完善信息--提交审核--
	审核版本--成功--上线--线上版本
	
	方式2 
	发行--微信小程序--发行--勾选自动上传微信平台（不打开开发工具）--
	这是需要一个密钥
	官网--开发--开发管理--开发设置--小程序代码上传--小程序代码上传密钥--
	重置--扫码--下载密钥--在桌面--
	勾选时 选择 密钥--版本管理（版本号+描述）--上传--
	官网--管理--版本管理--开发版本--提交审核--根据提示完善信息--提交审核--
	审核版本--成功--上线--线上版本
	
	
	分包
	1 项目过大时,项目页面过多,静态资源过多时,超过小程序的限制(2M) 需要分包
	2 标准  不超过16个包  单包不超过 2M
	3 主包里面一般存储  tabBar  或者 即时展示的页面 主包默认存在--pages文件夹
	4 分包存储 详情页 或者其他 跳转页面 , tabBar 对应的页面不可以 打包到分包内
	5 pageA/static/xxx/xx.png
	       /fenbao/fenbao.vue
				 /about/about.vue
				 root 中的 相对 路径
	6 配置
	pages.json 中
	"subPackages": [
		{
		"root": "pageA", // 子包名称
		"pages": [{
			"path": "fenbao/fenbao",// 路径  相对与 root 
			"style": {
				"navigationBarTitleText": "",
				"enablePullDownRefresh": false
			}
		}]
	}
	]
	跳转的 地方  pages/about/about.vue
	改为  ../../pageA/about/about.vue
	
	7 配置加载规则   类似懒加载
	"preloadRule":{
		"pageA/fenbao/fenbao":{
			"network":"all",//什么网 都可以加载 此页面  wifi 环境下
			"packages":["__APP__"]//当什么加载时  就可以加载 配置页面 APP--主包加载时 
			           [ "pageA"]
		}
	}
	8 manifest.json 中  开启分包优化  optimization 
	源码视图--mp-weixin--添加
	"optimization":{
			"subPackages":true
		}
	},
	
	============================================
	
	App--Android
	发行--原生APP 云打包
	Android证书--使用自有证书--如何生成证书
	借助工具--Android 在线生成证书--App Uploader--填写
	证书别名--密码--文件
	生成文件 XXXX.keystore--
	混淆代码，广告推送
	安心打包
	错误解决1  manifest--App常用其他配置--支持CPU类型（可全选）--x86
	          APP启动界面配置--使用原生隐私政策提示框
	错误解决2  网络安全错误--消费者隐私协议 提示
	manifest--源码视图--app-plus--
	"app-plus" : {
		"privacy":{
			"prompt":"template",
			"template":{
				"title":"服务协议和隐私政策",
				"message":"请您在注册前仔细阅读相关政策...",
				"buttonAccept":"我知道了",
				"buttonRefuse":"暂不注册"
			}
		}
	渠道包--到对应的平台上传 提供资质
	不选 渠道 直接生成 Apk
	快速安心打包
	unpackage--release--xx.apk
	
 */

/* 
 
 用到的代码
 1  沉浸式状态栏
 pages.json
 {
 	"path": "pages/index/index",
 	"style": {
 		// "navigationBarTitleText": "首页"
 		// 显示状态栏  页面最上方  view 尺寸设置 height: var(--status-bar-height)
 		"navigationStyle": "custom" // 沉浸式状态栏
 	}
 }
 
 2 弹窗--uni-popup
 
 3 触底事件  上拉下拉加载
 import { onReachBottom } from '@dcloudio/uni-app'
 
 调用后触发下拉刷新动画，效果与用户手动下拉刷新一致
 uni.startPullDownRefresh() 开始下拉刷新 -- 初始化 
 uni.stopPullDownRefresh()
 onPullDownRefresh() 监听用户下拉动作  -- 手动下拉和 start都可触发
 
 onReachBottom() 触底 触发 上拉-- 手动
 onReachBottomDistance -- 距离底部距离触发 上拉加载
 
 4 uni.showLoading({ title: '加载中' })
 
 5 uni-load-more 加载更多
 
 6 picker  联动选择器
 
 7 checkbox 多项选择器
 
 8 uni-file-picker 文件选择上传组件，可以选择图片、视频等任意文件
 
 9 uni.chooseMedia
 
 10 uni.previewImage  图片预览 
 
 11 uni.navigateTo    跳转 
    uni.navigateBack  可以返回到原页面
		navigateTo, redirectTo 只能打开非 tabBar 页面。
		switchTab 只能打开 tabBar 页面。
		reLaunch 可以打开任意页面。
 
 12 页面通信	
	  navigateTo--events 
		getCurrentInstance().proxy.getOpenerEventChannel().emit
		
		uni.$emit $on $off 页面通信
		
 13 		
 */