Uniapp基础

选择器

只支持基本的类、标签、id、并集、伪元素

App.vue 中通过 @import 语句可以导入外联样式

字体图标

为方便开发者，在字体文件小于 40kb 时，uni-app 会自动将其转化为 base64 格式；
字体文件大于等于 40kb，仍转换为 base64 方式使用的话可能有性能问题，如开发者必须使用，则需自己将其转换为 base64 格式使用，或将其挪到服务器上，从网络地址引用；
字体文件的引用路径推荐使用以 ~@ 开头的绝对路径

 @font-face {
     font-family: test1-icon;
     src: url('~@/static/iconfont.ttf');
 }

生命周期

应用生命周期
onLaunch
onShow
onHide
onError

页面生命周期
onLoad
onShow
onReady
onHide
onUnload
onPullDownRefresh
onReachBottom
onShareAppMessage等

缓存Storage的set/get/remove

uni.setStorage(数据对象)
对象的属性：

1. key
2. data
3. success异步回调
4. fail异步回调
5. complete异步回调

uni.setStorageSync(数据对象）
对象的属性：

1. key
2. data

uni.getStorage(数据对象)
uni.removeStorage(数据对象)

1. key
2. success异步回调
3. fail异步回调
4. complete异步回调

uni.getStorageSync(数据对象）
uni.removeStorageSync(数据对象)
对象的属性：
key

uni.chooseImage(OBJECT)

对象参数
count数量
因为是异步方法所以有success、fail、complete三个回调

success 返回参数
tempFilePaths图片的本地文件路径列表
tempFiles图片的本地文件列表，每一项是一个 File 对象

uni.chooseImage({
    count: 6, //默认9
    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album'], //从相册选择
    success: function (res) {
        console.log(JSON.stringify(res.tempFilePaths));
    }
});

uni.previewImage(OBJECT)

对象属性
current为当前显示图片的链接/索引值，不填或填写的值无效则为 urls 的第一张
urls需要预览的图片链接列表
因为是异步方法所以有success、fail、complete三个回调

条件编译

页面中

<!-- #ifdef H5 -->
	<view>H5端显示</view>
<!-- #endif -->
<!-- #ifdef H5 || MP-WEIXIN -->
	<view>H5或微信端显示</view>
<!-- #endif -->

js中

//ifdef H5
	console.log("H5端")
//#endif
//#ifdef H5 || MP-WEIXIN
	console.log("H5或微信端")
//#endif

style中也相同

路由跳转

调用 API uni.navigateTo 、使用组件 <navigator open-type="navigate"/>
调用 API uni.redirectTo 、使用组件 <navigator open-type="redirectTo"/>
调用 API uni.navigateBack 、使用组件 <navigator open-type="navigateBack"/> 、用户按左上角返回按钮、安卓用户点击物理back按键
调用 API uni.switchTab 、使用组件 <navigator open-type="switchTab"/> 、用户切换 Tab

<navigator url="navigate/navigate?title=navigate">
    <button type="default">跳转到新页面</button>
</navigator>
<navigator url="redirect/redirect" open-type="redirect">
    <button type="default">在当前页打开</button>
</navigator>
<navigator url="/pages/tabBar" open-type="switchTab">
    <button type="default">跳转tab页面</button>
</navigator>

// navigate.vue页面接受参数
export default {
    onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
        console.log(option.id); //打印出上个页面传递的参数。
        console.log(option.name); //打印出上个页面传递的参数。
    }
}