uniapp知识点

• manifest.json 开发app的配置文件

• 每个页面都要配置到 pages.json 中

• 如果是用hbuilderx开发的, 在修改pages.json后, 可能需要重新编译运行才能使用

• template, script, style 标签都能用src标签进行导入

• 屏幕宽度永远都为750px

• 布局推荐flex

• 手机端字体的大小大约为PC端的两倍, 至于字体具体设置多大, 多做就有感觉了

• 开发项目时, 可以把正在开发的页面设置为启动页, 方便开发, 然后开发完项目后再改回来

• 页面的生命周期: onLoad onRead onShow onHide onPullDownRefresh onReachBotton onShareAppMessage onPageScroll onTabItemTap onUnload onClose

• 常用事件: click touchstart touchmove touchend tap longtap input change submit blur focus reset confirm columnchange linechange error scrolltoupper scrolltolower scroll

• 事件只接收一个参数e, 这个参数由系统传递, 所以程序员不能通过事件函数来传参 (但可以通过标签的自定义属性data-xxx="xxxxxx"来传参

• 事件的参数e: e.currentTarget 指的是触发事件的元素, e.target 指的是冒泡事件的源头. 所以正常用都要用 e.currentTarget

• 事件触发时, 可以获取元素的id值, 相当于代替了vue的ref

• stop会阻止事件冒泡

• prevent可以直接干掉, 因为uniapp中没有默认事件. 比如submit不会导致页面的跳转

• 导航函数: (都需要uni.来调用) navigateTo, navigateBack, redirectTo, reLaunch, switchTab

• 页面跳转时参数的传递: 跟get请求方式的传递方式差不多, 如/pages/test?name=juln&age=20

• uni.request({ url: ‘xx’, method: ‘POST’, data: {…}, header: {‘content-type’: ‘application/json’}, success: function(result){}, fail: function(result){} })

• uni.chooseImage({ count: 最大选择数, success: function(result){}, fail: function(result){} })

• uni.previewImage, uni.getImageInfo, uni.saveFile, uni.saveImageToPhotosAlbum

• let uper = uni.uploadFile, uper.onProgressUpdate( e => () )

• let downer = uni.downloadFile, downer.onProgressUpdate( e => () )

• 安卓软件更新的实现: uni.updateFile下载安装包, 然后执行安装命令

• uni.setStorage({ key: ‘name’, data: ‘juln’, success: function(){}, fail: function(){} })

• try { uni.setStorageSync(‘name’, ‘juln’) } catch(e) {} 不try-catch会报错

• uni.getStorageInfo, uni.getStorageInfoSync, uni.removeStorage, uni.removeStorageSync, uni.clearStorage, uni.clearStorageSync

• uni.getSystemInfo

• uni.getNetWorkType, uni.onNetWorkStatusChange

• 加速度机, 计算手机用户的移动: uni.onAccelerometerChange, uni.startAccelerometer, uni.stopAccelerometer

• 罗盘: uni.onCompassChange, uni.startCompass, uni.stopCompass

• 拨打电话: uni.makePhoneCall({ phoneNumber: ‘110’ })

• 扫码: uni.scanCode({ success: function(){} })

• 剪切板: uni.setClipboardData({ data: ‘xxx’, success: function(){} }), uni.getClipboardData

• 屏幕亮度: uni.getScreenBrightness, uni.setScreenBrightness({ value: 0.1, success: function(){} }), uni.setKeepScreenOn({ keepSreenOn: true }) 手机保持常亮, 防止息屏, 但离开此应用后就失效了

• 振动: uni.vibrateLong 400ms, uni.vibrateShort 15ms

• 手机联系人: uni.addPhoneContact, 只能增加不能获取

• 设置导航条: uni.setNavigationBarTitle({ title: ‘xxx’ }), uni.showNavigationBarLoading, uni.hideNavigationBarLoading

• 下拉刷新: onPullDownRefresh, uni.startPullDownRefresh, uni.stopPullDownRefresh, 下拉刷新需要在pages.json中的style中"enablePullDownRefresh": true

• 上拉加载: onReachBottom

• 交互反馈: uni.showToast({ title: ‘xxx’, icon: ‘success’ }), uni.hideToast, uni.showLoading({ title: ‘xxx’, mask: true }), mask意思即遮罩层, 让用户无法点击遮罩层下面的元素, uni.hideLoading, uni.showModal({ title: ‘xxx’, content: ‘xxx’ }, success: function(res){} ), uni.showActionSheet({ itemList: [‘A’,‘B’], success: function(res){}, fail: function(res){} })

• tabBar最多设置五个, 最少设置两个

• 没有 v-show, 只有 hidden

• navigationBarTextStyle 只支持black和white

• view, scroll-view[scroll-x], text, swiper, swiper-item, rich-text, progress

• form, button, checkbox-group, checkbox, input, label, picker, slider, radio, slider, switch, textarea

• navigator, audio, image, video

• onLaunch, onShow, onHide, onLoad

// pages.json
{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "福理小福利 - 首页"
			}
		},
		{
			"path": "pages/my/my",
			"style": {
				"navigationBarTitleText": "福理小福利 - 我的"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "福理小福利",
		"navigationBarBackgroundColor": "#2b9939",
		"enablePullDownRefresh": true,
		"backgroundColor": "#F8F8F8"
	},
	"tabBar": {
		"color": "#C0C0C0",
		"selectedColor": "#999999",
		"backgroundColor": "#F1F1F1",
		"list": [
			{
				"pagePath": "pages/index/index",
				"iconPath": "static/logo.png",
				"selectedIconPath": "static/logo.png",
				"text": "首页"
			},
			{
				"pagePath": "pages/my/my",
				"iconPath": "static/logo.png",
				"selectedIconPath": "static/logo.png",
				"text": "我的"
			}
		]
	},
	"condition" : { //模式配置，仅开发期间生效
		"current": 0, //当前激活的模式(list 的索引项)
		"list": [
			{
				"name": "", //模式名称
				"path": "", //启动页面，必选
				"query": "" //启动参数，在页面的onLoad函数里面得到
			}
		]
	}
}

• 跨端兼容

  <!-- #ifdef MP-WEIXIN -->
  <view>微信小程序上显示</view>
  <!-- #endif -->
  <!-- #ifdef APP-PLUS -->
  <view>h5+app上显示</view>
  <!-- #endif -->
  

  view{
  	/* #ifdef MP-WEIXIN */
  	color: red;
  	/* #endif */
  	/* #ifdef APP-PLUS */
  	color: blue;
  	/* #endif */
  }
  

  // #ifdef MP-WEIXIN
  console.log('微信小程序上显示)
  // #endif
  // #ifdef APP-PLUS
  console.log('h5+app上显示')
  // #endif
  

登录

1. 小程序登录

小程序只能靠微信号登录
manifest.json中开启登录授权